Header for Magazine Theme

• 

  mcastro735 · Member · Jul 2, 2013 at 2:34 am

  • Copy link
  • Add topic to favorites

  I need help customizing my header for the magazine theme. I have a logo that is 922pix by 301pix. What is the css codes for customizing the header so that I can fit the logo into the header?

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

• 

  designsimply · Member · Jul 2, 2013 at 2:46 pm

  • Copy link

  This will take a little work because of how the Magazine theme has been set up with a fixed height header area.

  The first thing you’ll want to do is upload an image with the right dimensions to the image library in your dashboard:
  http://en.support.wordpress.com/images/#upload-images-from-your-computer

  Next, this is the CSS that you can use to replace the header image. I used a WordPress logo in this example, but you can change the url() value to the image you uploaded to your media library.

  #header {
  	background: url(http://s.wordpress.org/about/images/wordpress-logo-notext-bg.png) no-repeat;
  	width: 922px;
  	height: 301px;
  }

  You’ll notice that when you change the height of the header area, a different part background image is revealed. That happens because of the fixed height use for the background image on the wrap element:

  #wrap {
  	background: url("http://s1.wp.com/wp-content/themes/premium/magazine/images/wrap.png?m=1391150246i") repeat-x;
  }

  Here is a direct link to the image:
  http://s1.wp.com/wp-content/themes/premium/magazine/images/wrap.png

  If you wanted to change that so it was 301px tall to match your header image, what you would need to do is download the image change the size to 301px, re-upload the updated image to your media library, and then update the url() value in the CSS example from above with your new image.

  Or if you wanted to get rid of the background image on the wrapped element and use a solid color instead, erase everything from above, and is try this example instead:

  #header {
  	background: #323232;
  	width: 100%;
  	height: 301px;
  }
  
  #header .wrap {
  	background: url(http://s.wordpress.org/about/images/wordpress-logo-notext-bg.png) no-repeat;
  	width: 922px;
  	height: 301px;
  	display: block;
  	margin: 0 auto;
  }

  Replace the urlI() value with your own image, just as before.