WordPress.com

1. burnerprep
   Member
   Dec 4, 2012, 5:12 AM

   I have two questions. I got the CSS upgrade for MistyLook.

   1. My main site is http://www.burnerprep.com. Can I edit the header and footer css of my WordPress blog theme, MistyLook, to give it the appearance of my main website (the categories on the sides and the menu on top).

   2. How can I make my header linkable? Thank you.

   The blog I need help with is blog.burnerprep.com.

2. designsimply
   Staff
   Dec 27, 2012, 3:53 AM

   1. My main site is http://www.burnerprep.com. Can I edit the header and footer css of my WordPress blog theme, MistyLook, to give it the appearance of my main website (the categories on the sides and the menu on top).

   What you'll want to do is look at the CSS in the main site for inspiration. In order to edit and work with the CSS, I would also recommend starting out with a tutorial such as http://www.htmldog.com/guides/cssbeginner/ so that you can learn the basics. You should also learn how to use your browser's web inspector tool. Most modern browsers have one and it let's you right-click on an element and select "Inspect Element" to see the corresponding HTML and all of the CSS that apply to it.

   I will start you out with an example. I used my browser's web inspector and looked at http://www.burnerprep.com/ and found that this image is used for the ".content-holder" background:
   http://www.burnerprep.com/00224-1/design/images/content-holder.png

   Then I looked at

   #container {
   	background: url('http://www.burnerprep.com/00224-1/design/images/content-holder.png') repeat-y;
   	border: 0;
   }

   That image is 958 pixels wide though, so you could either adjust the image and upload a smaller version of it or you can expand the width of the blog. To expand the container for the MistyLook theme, you might start with something like this and adjust the numbers until you like how it looks:

   #container {
   	width: 958px;
   }
   
   #content-main {
   	width: 73%;
   }
   
   #sidebar {
   	width: 24%;
   }

3. designsimply
   Staff
   Dec 27, 2012, 3:54 AM

   2. How can I make my header linkable? Thank you.

   You can't add links directly using CSS, but often you can set a background to a link element that's already clickable and use that to make what you add with CSS appear clickable. In your current setup, you might start by hiding the current header image like this:

   #headerimage {
   	background: none;
   	height: 0;
   }

   Then you could make space inside the site title area used by the MistyLook theme to add a new header image as a background for the site title link:

   #header {
   	width: 938px;
   	padding-bottom: 0;
   }
   
   #header h1 a {
   	display: block;
   	width: 958px;
   	height: 116px;
   	background: url('http://www.burnerprep.com/00224-1/design/images/header-bg.png') no-repeat;
   }

   For a final touch, you can hide the tagline area (the "h2" in the header) to get rid of the space it's using up and you can remove some padding from the feeds to tighten up the space below the header image:

   #header h2 {
   	display: none;
   }
   
   html #feedarea {
   	padding-top: 0;
   }

Topic Closed

This topic has been closed to new replies.