Page 1 of 2
Andreas 09 Background Picture
Posted: Wed Mar 07, 2007 5:39 pm
by ITS
Hello,
the next episode in my find-the-right-style-adventure is Andreas 09.
How can I edit the background picture of the header to a normal background color or image?
thank you
ITS
Posted: Wed Mar 07, 2007 7:20 pm
by Don Chambers
That one appears to be using a little bit of a trick. The header does not actually have the background.... the ID mainpane sets both a background color, and a background image. The image is 800px tall, by 1 px wide and is repeated across the width of the page. It not only shows in the header, but also in the sidebars. Once the 800px height is reached, the background color takes over, which is f0f0f0 by default, so clearly the image fades to that color at the very bottom.
You can use the same trick with your own image or remove the image from the mainpane container and set a background image/color on the header. I suspect margins or padding will need to be played with a bit to get exactly what you want. I have never used this template before, so I cannot tell you much more than that from my brief look.
Posted: Wed Mar 07, 2007 7:59 pm
by ITS
Hello,
thank you very much. I don't know if I misunderstand you or if my description is unclear.
I mean the background image of the header, where you can find the blog title and description. Like the blue @
http://www.bb0.de.
Thank you,
ITS
Posted: Wed Mar 07, 2007 8:48 pm
by Don Chambers
Your description is perfectly clear, but perhaps mine wasn't.
Open style.css from your template folder. The very first line in that stylesheet is /****** Structure Styles ******/. A few lines below that is this:
Code: Select all
#mainpane {background:#f0f0f0 url(templates/andreas09//img/bodybg.jpg) repeat-x;
color:#303030;
margin:0;
min-width:770px;
padding:0;
text-align:left;
width:100%; }
The background image being used is templates/andreas09//img/bodybg.jpg. It is an image that is only 1 pixel wide, but 800 pixels tall. It is repeated across the width of the page by the "repeat-x" after the file name. Since it is not repeated in the y direction (page length or height), the background color of #f0f0f0 takes over at that point.
What you see as a header/banner image is, in this case, a little deceiving. It is not really a header image at all, it is being applied to the entire #mainpane container. The #mainpane container encompases the header, both sidebars, and the center content. The center content has its own background color (white), so it masks out the image.
You can completely get rid of the image if you want, but you should be aware that that same image you see in the header is also providing the gradient in the upper portion of your sidebars. You could leave the image in tact, but mask it out in the banner portion only by setting a different background color or image in the banner section of your css:
Code: Select all
#serendipity_banner {color:#ffffff;
height:92px;
margin:0 20px 10px;
text-align:left;
BACKGROUND: #0033CC;
MARGIN:0px;
PADDING: 0 20px 10px; }
I left the original margin in there for example, but clearly you would eliminate it, and you would certainly use whatever color you wanted.
This method leaves the original mainpane image in tact for the sidebar gradients, but masks out the banner area with a solid color. The background could also be any image you wanted. Since I am not familiar with this template, I do not know if there are other tweaks necessary to compensate for the switch from a margin to padding, especially in other browsers.
Posted: Wed Mar 07, 2007 9:34 pm
by ITS
Hello again,
thank you very much, it works! This was excellent!
I have a few more questions to the theme regarding the editing of some colors and fonts. May I state them to you?
ITS
Posted: Wed Mar 07, 2007 9:50 pm
by Don Chambers
ITS wrote:Hello again,
thank you very much, it works! This was excellent!
I have a few more questions to the theme regarding the editing of some colors and fonts. May I state them to you?
ITS
Absolutely NOT, what are you kidding me?
Of course - fire away!!!!
Posted: Thu Mar 08, 2007 10:49 am
by ITS
Ok thank you,
I'm on the way right now, I'm remembering just one atm:
The font size is everywhere addressed in X.Xem format. I understand this is a relative to the original font size definition, but I can't find a definition in px anywhere!
So I tried to change the em font size for the font in the entries but the font size didn't change
Which size entry exactly do I have to change and where is the original absolute definition to find?
thank you, ITS
Posted: Thu Mar 08, 2007 9:43 pm
by ITS
Hey,
you won't believe me, but I solved that one by myself
next problem:
The upper navigation of
http://www.bb0.de looks fine with IE7 and opera, but not with IE6. Is there any way to fix this?
ITS
Posted: Thu Mar 08, 2007 11:26 pm
by Don Chambers
I wonder how many billions of hours Microsoft has cost developers due to their non-compliance?!!!!
Before I spend time trying to track that one down, did the problem exist with the original template, or has this problem only surfaced once you began your revisions?
Posted: Fri Mar 09, 2007 5:53 pm
by ITS
Hi,
thank you again for your response.
The issue mentioned above works fine in the normal template, so the error is an issue of my modifications.
BUT I have a serious issue with the entries on the startpage with IE6 at
http://bb0.de
Sometimes the headlin is missing, sometimes a part from the first entry is just white. This only affects IE6 AND the original template is ALSO affected by this
Please help me!
ITS
Posted: Fri Mar 09, 2007 11:00 pm
by ITS
Update:
I modified the page, the header looks similar in all browsers now, BUT the hover effect is now one pixel too high, don't know where I can edit the position.
AND the first entry is still not clearly visible in IE6.
ITS
Posted: Fri Mar 09, 2007 11:53 pm
by Don Chambers
You are doing well with your corrections - probably learning more about the template than if someone simply handed you the solution. BTW - when you ask a question, then find a solution, make sure you post the solution so that it might benefit anyone else with the same problem.
In this case, I see you removed the background image from mainpane, and returned to margins.
As far as the other problems, search this site and google for terms like "disappearing text" and "IE peek-a-boo". It usually has to do with floated elements. Sometimes things are not properly cleared, sometimes they need a little trick like position: relative or a width or height assignment. I think the size trick is gone for IE7 though.
Posted: Sun Mar 11, 2007 1:46 pm
by ITS
Hello,
thank you again.
I fixed the missplaced hover effect: I adjusted the padding-top value.
Noo luck with the pick a boo bug yet
Posted: Sun Mar 11, 2007 5:49 pm
by Don Chambers
For starters, it appears that the very end of style.css is missing.... that template defines body IDs based on the colorset. Your's appears to be cut off toward the end of the red colorset tags. The entire colorset block, as contained in the original template, is as follows:
Code: Select all
/****** Colorset Styles ******/
#purple #mainpane {background:#f0f0f0 url('{TEMPLATE_PATH}img/bodybg-purple.jpg') repeat-x;}
#purple #mainmenu a:hover{background:#f0f0f0 url('{TEMPLATE_PATH}img/menuhover-purple.jpg') repeat-x top left;}
#purple #mainmenu a.current{background:#f0f0f0 url('{TEMPLATE_PATH}img/menuhover-purple.jpg') repeat-x top left;}
#red #mainpane {background:#f0f0f0 url('{TEMPLATE_PATH}img/bodybg-red.jpg') repeat-x;}
#red #mainmenu a:hover{background:#f0f0f0 url('{TEMPLATE_PATH}img/menuhover-red.jpg') repeat-x top left;}
#red #mainmenu a.current{background:#f0f0f0 url('{TEMPLATE_PATH}img/menuhover-red.jpg') repeat-x top left;}
#black #mainpane {background:#f0f0f0 url('{TEMPLATE_PATH}img/bodybg-black.jpg') repeat-x;}
#black #mainmenu a:hover{background:#f0f0f0 url('{TEMPLATE_PATH}img/menuhover-black.jpg') repeat-x top left;}
#black #mainmenu a.current{background:#f0f0f0 url('{TEMPLATE_PATH}img/menuhover-black.jpg') repeat-x top left;}
#green #mainpane {background:#f0f0f0 url('{TEMPLATE_PATH}img/bodybg-green.jpg') repeat-x;}
#green #mainmenu a:hover{background:#f0f0f0 url('{TEMPLATE_PATH}img/menuhover-green.jpg') repeat-x top left;}
#green #mainmenu a.current{background:#f0f0f0 url('{TEMPLATE_PATH}img/menuhover-green.jpg') repeat-x top left;}
#orange #mainpane {background:#f0f0f0 url('{TEMPLATE_PATH}img/bodybg-orange.jpg') repeat-x;}
#orange #mainmenu a:hover{background:#f0f0f0 url('{TEMPLATE_PATH}img/menuhover-orange.jpg') repeat-x top left;}
#orange #mainmenu a.current{background:#f0f0f0 url('{TEMPLATE_PATH}img/menuhover-orange.jpg') repeat-x top left;}
Also - I see that you are editing the original template. IMHO, It is a good idea to copy a template into a new folder, then make your changes there. That way, you can switch back and forth between your revisions, and the original template, to see if odd behavior happens only in yours, or also in the original.
Anyway, start by fixing your style.css.
Posted: Sun Mar 11, 2007 5:58 pm
by ITS
Hello,
thank you, the style.css is now fixed but it didn't change anything.
I have backup copies of every file I editied and I have the original template in another folder.
ITS