Sphere of Code

Following several requests after the publishing Blog Improvement 101 - Adding Functionality to My Header and 3 Answers to Expect From a Good Header, I’m going to explain the way you could add a text container to your header, just like I did, showcasing my Featured Articles.

Disclaimer: Knowing only bits and pieces of html and css, this is going to be a Fools’ guide from a slightly more experienced Fool. I beg pardon of the savvy web developers for my crude adaptations.

It is written for WordPress bloggers, but with a little adaptation it could be used on any platform where you can access the HTML of your theme or template.

 

Identify the type of theme you have

If your theme is fluid width, when resizing the width of the browser window would change the width of your blog’s page, you’d want the container to move with the page. Go to Code for Fluid Width

If you theme is fixed width, where resizing the width of the browser window would not change the width of your blog’s page, you would want the container to be static as well and stay on the same location on the page. Mine is a fixed width theme, so try resizing the browser window to see what I mean. Go to Code for Fixed Width.

 

Code for fluid width

Step 1, adding the CSS

Just before the <body> tag of your header.php add the following code:

<style type=”text/css”>
body {
font-size: 12px;
color: #333;
}

.fixed_container1 {
position:relative;
top: 125px; /*Adjust this to position the container*/
left: 120px; /*Adjust this to position the container*/
width:350px; /*This is the width of my container, could be adjusted if needed*/
height:12px; /*This is the height of my container, could be adjusted if needed*/
}
</style>

If you plan to have more than one floating container like I do, copy .fixed_container1 just under it, rename and adjust the position according to your wishes.

Step 2, add the HTML

After the <body> tag of your header.php, add the following code:

<div class=”fixed_container1″>
<p>Here could be anything you want. /p>
</div>

If you plan to have more than one floating container like I do, add another div with appropriate class right after the closing </div> of the fixed_container1.

 

Code for fixed width

Step 1, adding the CSS

Just before the <body> tag of your header.php add the following code:

<style type=”text/css”>
body {
font-size: 12px;
color: #333;
}

#big_container { /*This is the transparent container where the text container(s) would be “floating”*/
position:absolute;
top: 0%; /*Adjust this if your header not on the top*/
left: 50%;
width:900px; /*This should be the width of your header*/
height:0px;
margin-top: 0px; /*Crucial: set to a negative number, half of your height*/
margin-left: -450px; /*Crucial: set to a negative number, half of your width*/
}

.floating_container1 { /*This is the text container for the Featured Articles*/
position:relative;
top: 125px; /*Adjust this to position the container*/
left: 120px; /*Adjust this to position the container*/
width:350px; /*This is the width of my container, could be adjusted if needed*/
height:12px; /*This is the height of my container, could be adjusted if needed*/
}

</style>

If you plan to have more than one floating container like I do, copy .floating_container1 just under it, rename and adjust the position according to your wishes.

Step 2, add the HTML

After the <body> tag of your header.php, add the following code:

<div id=”big_container”>
<div class=”floating_container1″>
<p>Here could be anything you want. /p>
</div>
</div>

If you plan to have more than one floating container like I do, add another div with appropriate class before the closing </div> of the big_container (the last one).

 

 

This is where I leave you to do your tweaking. Let me know if you need any more help with this.

- Alex

Technorati Tags: , , , , , , , ,

Related Posts

If you enjoyed this post, make sure you subscribe to my RSS feed!