Banner Graphic Corruption

I am a very new user R/W using 7.2.1 with the Voyager theme.
When I select my .PNG photo (1080 x 724) to use as a banner, it ends up with a white horizontal line that extends edge to edge just below the “Title”. It appears to me that it is caused by the “Site Title Divider” because I can change it to either light or dark in the General setting. I have changed the size of the image and tried recreating the page without success. Is there any way to eliminate this line completely?
This line shows in both R/W Preview mode and also when I view it in Safari.
The image was created and edited using Pixelmator.

Url?
And the rest of characters needed to post on here.

It’s not corrupt. As you said, it’s a style option in the theme with option to make the color light or dark. You need some code to make the line not show up. I’m not the one to help you with that, though. Maybe you should look into a theme that lets you turn off the title divider.

I apologize. I do not have a URL for this web site I am working on because I wish to develop as much as I can be for I purchase a hosting server environment.

Robert Ringel
bob.ringel@icloud.com

Thank you, Lisa.
I cycled through all the available themes and found only two or three that supported banner photos and they appeared unusable to me for other reasons. Being new to R/W, I find it extremely difficult to determine just what resources to choose.

Robert Ringel
bob.ringel@icloud.com

Robert-
Yes, there is a learning curve. From what I remember, the free Real Mac themes are pretty basic. Take a look at https://themeflood.com and https://stacks4stacks.com. You can do so much, but it will take a good amount of time to decide what you want.
If you have specific questions, you can post screenshots and questions here, but I’d also watch some webinars and check out other people’s websites

My site uses a modified version of the Volcano Theme from Themeflood.

I understand, I’ll bet that you can deal with it. With a few lines of CSS that’s why I wanted a URL to see if I could fix it for you.

2 Likes

This CSS will stop the site title divider from being visible:

.navigation_bar {
border-bottom: none;

}

If you want to hide the divider bar on a single page paste the code into the Page Inspector > HTML Code > CSS.

To hide it on all your pages paste it into Settings > Code > CSS. When pasting use “Paste as plain text” from the edit menu.

By the way, you probably want to make your banner image a jpg instead of a png as jpg’s are much smaller files and will load a lot faster.

4 Likes

Thank you, David,
This CSS coding is something I am not familiar with yet and you gave an excellent description of how to invoke it, I will certainly give it a try.
I chose to use a PNG file because I wish to use a graphic banner that is oval with feathered edges and I do not want the white rectangular background. I want to use this banner on only the first (Home) page so I can tolerate a slightly longer load time for that page.

1 Like

Robert,

David(@thang) did a great job with the CSS for you. He either had a project that was using that theme or set one up just to customize it.
Just for the future it is much easier for people giving help out with customizing themes if you can provide a URL.
I know you don’t have one yet but the helpers can give you advice much easier by inspecting your site code.

You might want to give Chili-dog a look when you go for hosting:

https://www.chillidoghosting.com

Greg (@barchard) is a RapidWeaver add-on developer and has plans starting at $5 a month.

2 Likes

@teefers I feel like a genie, whenever someone mentions me I appear bringing answers about hosting and the like :slight_smile:

@cuber if you need hosting, let me know. Happy to help.

1 Like