Andreas 09 Background Picture

ITS · Post by **ITS** » Wed Mar 07, 2007 5:39 pm

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

Post by **Don Chambers** » Wed Mar 07, 2007 7:20 pm

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.

ITS · Post by **ITS** » Wed Mar 07, 2007 7:59 pm

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

Post by **Don Chambers** » Wed Mar 07, 2007 8:48 pm

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.

ITS · Post by **ITS** » Wed Mar 07, 2007 9:34 pm

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

Post by **Don Chambers** » Wed Mar 07, 2007 9:50 pm

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!!!!

ITS · Post by **ITS** » Thu Mar 08, 2007 10:49 am

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

ITS · Post by **ITS** » Thu Mar 08, 2007 9:43 pm

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

Post by **Don Chambers** » Thu Mar 08, 2007 11:26 pm

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?

ITS · Post by **ITS** » Fri Mar 09, 2007 5:53 pm

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

ITS · Post by **ITS** » Fri Mar 09, 2007 11:00 pm

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

Post by **Don Chambers** » Fri Mar 09, 2007 11:53 pm

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.

ITS · Post by **ITS** » Sun Mar 11, 2007 1:46 pm

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

Post by **Don Chambers** » Sun Mar 11, 2007 5:49 pm

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.

ITS · Post by **ITS** » Sun Mar 11, 2007 5:58 pm

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