Customizing my Bueno Theme

• 

  awesomedc · Member · May 16, 2010 at 5:46 pm

  • Copy link
  • Add topic to favorites

  I recently changed my theme to Bueno (my blog: http://www.awesomedc.com).

  Can anyone tell me how to get ride of the white space above the logo and the menu bar so I can push my page a little bit more up?

  Appreciate your input and help.

  Thanks
  Elias

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

• 

  hallluke · Member · May 16, 2010 at 5:52 pm

  • Copy link

  Here we go:

  #header {padding-top:0;}

  lh

• 

  awesomedc · Member · May 17, 2010 at 11:21 pm

  • Copy link

  Thanks Hallluke :-) it worked http://www.awesomedc.com

  Would you also kindly let me know the html code for moving my red logo “awesome DC” a little bit more to the left so it gets lined up with the banner below it?

  Speaking of the banner, do you think there is a way to decrease the Height as well as decreasing the space below the banner like I just did on top of the banner with your code?

  Here is my current code for header:

  #header {
  padding-top:0;
  }

  #logo {
  text-indent:-9999px;
  background:url(‘http://my Logo’);
  height:60px;
  width:260px;
  }

  thanks

• 

  devblog · Member · May 18, 2010 at 3:34 pm

  • Copy link

  awesomedc,

  Just to clarify, the code you’ve been using is not HTML, is CSS. HTML is the markup that makes up a web page.

  It seems you’re using your blog’s custom header feature. When you have the CSS upgrade, you don’t need to use it. Reset it, and use CSS to add it to your blog.

  Also, although your header image is 930px wide, there is a “white space” 15px wide… you might want to fix that otherwise the image won’t look centered.

  Replace your current code with this one:

  #header {
  padding: 0 0 10px;
  }
  
  #pagenav{
  margin: 20px 0;
  }
  
  #header-image{
  background: transparent url(http://awesomedc.files.wordpress.com/2010/05/cropped-logo-for-fb-18.jpg) 0 0 no-repeat;
  border: solid 5px #EFEFEF;
  height: 198px;
  overflow: hidden;
  padding: 0;
  }
  
  #header-image img {display: none;}
  
  #logo {
  background: transparent url('http://awesomedc.files.wordpress.com/2009/12/medium-logo.jpg') -40px 0 no-repeat;;
  height:60px;
  text-indent:-9999px;
  width:260px;
  }

  If you want to decrease the height of the header, change the 198px value in the “#header-image” selector to one that fits your needs.

  The gap between the header and the contents is defined in the “#header” selector. If you want a bigger gap, change “10px” to perhaps “20px” or a value that suits you best.

  Also, the logo should now be aligned to the left.

• 

  awesomedc · Member · May 21, 2010 at 6:20 am

  • Copy link

  thx. I will give it a try and let you know