Template- Webon's "Minimal Red"
remove background-color from #body, #footer and #container
add BG image to #body and add background color if desired ( here- background-position:fixed, background-repeat: no-repeat, background-position: center top image is 1400px wide. In screen resolutions >1400px wide, this image will be centered with #body background-color selection displaying on both sides.)
add new BG color to #content and #sidebar
**********************
#content background-color: #252C0B; opacity : 0.9;
opacity was added manually via custom styles source view to give a sheer appearance to the content area allowing the #body BG image to show through it. (opacity value range= 0.1-1.0)
<---------------------- a background-color set at #main will add a solid color under #the #content and #sidebar sections. The background image that now displays between these 2 sections will disappear and an outer margin of the selected #main background-color will display around them.
It is easiest to try this for yourself in the webon custom editor to see what happens. -------------------------------------->
You could also remove the background-color from individual sections (ex. #sidebar or #content) so that the background-image displays under them. BUT text in those sections may be difficult to read if a background-color is not used.
**********************
Adding a header image or banner
The image or banner will need to be properly sized BEFORE uploading and should be 900 px wide to fit the template's header section layout width. Height will need to be adjusted if the image is more than 100 px in height
~ add background image to #header (header image size 900Wx 376H) no repeat
I also....
~ decreased the header layout width to 880px (in source view of webon custom editor) to better fit my image and the width of the displaying template sections below the header (#sidebar and #main).
Because I made the #main layout section transparent, I lost the 10px margins that would otherwise display if a color were set for #main. That threw off the header display in relation to the visible css sections below it.
~ increased header min-height from 100px to 360px so most of my uploaded header image will display
**********************
Changing navigation button colors
change navigation button background colors as below. I used css colornames in this example so the changes I made are easier to see and understand but replace with hex numbers in properties view of the custom css editor when making your own edits. Run your cursor over the navbuttons to see the color changes
background-color:black;
color:#fff;
font-weight:normal;
}
#body #container ul.navigation li a:hover{background-color:pink;}
#body #container ul.navigation li a:visited{background-color:orange; color:#fff;}
#body #container ul.navigation li a.selected{background-color:blue;}
#body #container ul.navigation li a.selected:hover{background-color:yellow;}