Adding header with CSS upgrade in Garland

• 

  benjamminleder · Member · Jan 23, 2009 at 2:32 am

  • Copy link
  • Add topic to favorites

  I am trying to create a header image for the Garland theme with CSS. The site is phuturephillies.com. The header is simple, just a bunch of small mug shots of players from left to right. The problem I am running into is when I expand the div wrapper for the pages links at the top to create more room for the image, it pushes the middle column and the right sidebar down, including the graphical file that makes up the the middle section. It looks crude and awkward. Is there any way to do this properly (preferably by expanding the red area at the top) within the wordpress.com system?

  Here is the CSS I am using:

  #header {
  background:transparent url(‘http://phuturephillies.files.wordpress.com/2009/01/phu_phils_header2.jpg’) center no-repeat;
  }

  #header ul {
  height:150px;
  }

  Thanks.

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

• 

  gwideman · Member · Jan 23, 2009 at 3:18 am

  • Copy link

  I’m not sure what your intent was here. You made this element taller:

  #header ul

  … but you’ve added the images to the outer:

  #header

  Were you intending to make the whole header bigger?

• 

  benjamminleder · Member · Jan 23, 2009 at 3:51 am

  • Copy link

  yes, but adding the height element to #header didnt seem to do anything. any ideas?

• 

  vivianpaige · Member · Jan 23, 2009 at 5:36 am

  • Copy link

  Can we get a link to your wordpress.COM blog? And consider linking it in your user name as explained in the sticky, 8 Things, at the top of the forums.

  gwiderman – because of the number of folks who post here that don’t belong here, we volunteers generally don’t answer questions without a blog link. Take a look at this thread https://en.forums.wordpress.com/topic/wpcom-not-wporg-part-2?replies=114

• 

  gwideman · Member · Jan 23, 2009 at 6:33 am

  • Copy link

  vivian: He did post a blog link: phuturephillies.com

• 

  gwideman · Member · Jan 23, 2009 at 6:40 am

  • Copy link

  governator1:

  #header {
  height:150px;
  }

  … likely won’t do the trick because the 80px height setting is set in a rule with more specific selectors, and thus your overriding rule needs to be as specific:

  #wrapper #container #header {
  height:150px;
  }

  That doesn’t necessarily get the look you want, but may be a step in the right direction.

• 

  devblog · Member · Jan 23, 2009 at 6:42 am

  • Copy link

  #header{height: 150px !important;}

  That would also do the trick

• 

  benjamminleder · Member · Jan 23, 2009 at 6:07 pm

  • Copy link

  this works. thanks a lot. one further question, though. would it be possible to modify the background itself via CSS? expanding the #wrapper #container #header box still pushes down the center graphic awkwardly. it’s kind of hard to describe, but my guess is the background for the content column is a php include and is getting pushed down by the expanded div box above.

• 

  gwideman · Member · Jan 23, 2009 at 7:30 pm

  • Copy link

  I haven’t looked at that in detail. However, it’s highly likely you can make the needed adjustments via CSS.

  By the way, if you’re not using it, or didn’t know about this feature, you can quickly visualize and make trial adjustments to the sizes etc of various blocks using Firebug:

  Firebug: Essential for CSSing WordPress

• 

  benjamminleder · Member · Jan 24, 2009 at 2:44 am

  • Copy link

  wow that firebug is excellent. thanks a lot