CSS Code for Header

• 

  beachdazeblog · Member · Apr 22, 2011 at 10:35 pm

  • Copy link
  • Add topic to favorites

  So I’ve made a custom header that I’ve been trying to put on my blog, http://www.citymeetstheshore.wordpress.com but I haven’t been able to find the CSS code to do so. When I was changing the CSS around, I can’t remember how I altered the amount of space at the top of my blog (as you can see there is barely any). Thanks!

  The blog I need help with is: (visible only to logged in users)

• 

  thesacredpath · Member · Apr 22, 2011 at 11:30 pm

  • Copy link

  Oulipo supports a custom header natively. If you make your header image 712 by 80 then you can upload it at appearance > header.

• 

  beachdazeblog · Member · Apr 23, 2011 at 1:35 am

  • Copy link

  I have a much larger header than that and when I was playing around with the margins I remember I was able to alter the size of space at the top and I can’t seem to figure out how I did it. Does Oulipo only support that certain header or can I just insert my own?

• 

  thesacredpath · Member · Apr 23, 2011 at 1:59 am

  • Copy link

  The best way would be to put the header at the top of #wrapper and then adjust the top margin in #content (the 4em value). The wrapper looks to be about 800px wide (I really wish people would not use EM units for dimension, padding and margins, it just makes things so much more difficult). Upload the image to your media library, get the URL and put it into the background declaration in #wrapper.

  #wrapper {
  background: url("URL of image here") no-repeat scroll 0 0 transparent;
  }
  
  #content {
  margin: 4em 0 0;
  }

• 

  beachdazeblog · Member · Apr 23, 2011 at 3:34 am

  • Copy link

  Thank you so much thesacredpath! you’ve been such a big help. one more small question.. is there anyway to link the header back to my homepage?

• 

  thesacredpath · Member · Apr 23, 2011 at 3:48 am

  • Copy link

  That takes some doing, which would be much easier to accomplish if not for Internet Explorer and the fact it does not recognize “transparent” as a color. If it did, then it would be just a matter of resizing the blog title to cover the area of the image and then setting the title color to transparent. Every browser in existence recognizes transparent as a color, but NOT IE. It would be so much easier on designers if they just quit the browser business. OK, end of rant.

  What you have to do is to create a blank, transparent PNG image the same size as your header image and put an HTML image link into a text widget with that transparent image. You size that text widget (by ID) to the exact size of the header image and use position absolute, top and left declarations to move it up and over the header.image.

• 

  beachdazeblog · Member · Apr 23, 2011 at 5:04 pm

  • Copy link

  Thanks so much!

• 

  thesacredpath · Member · Apr 23, 2011 at 6:12 pm

  • Copy link

  You are welcome.