I am sid. Who r u?

This post is in response to Nakul’s question on how to extend the header according to the browser’s width.

Here’s the challenge I gave myself: I want to make my Header stretch it’s background IF the browser width is more than the original width of the header (browser width > header’s width which is 950 px) and I want it to stay at 950 px if the browser’s width is less than 950 px.

So here’s how to do it.

1. Look for this code in your header.php file:

<div id=”top”>
<div id=”topi”></div>
<div id=”headr”>
<h1><a href=”<?php echo get_option(’home’); ?>/”>
<?php bloginfo(’name’); ?>
</a></h1>
<div class=”description”>
<?php bloginfo(’description’); ?>
</div>
<div class=”rss2″>
<a href=”<?php bloginfo(’rss2_url’); ?>” rel=”alternate” type=”application/rss+xml”><img src=”<?php bloginfo(’template_directory’); ?>/images/subscribe1.jpg” alt=”Subscribe” style=”border:0″/></a>
</div>
</div>
</div>

2. Add <div id=”pretop”> before the <div id=”top”>:

<div id=”pretop”>

<div id=”top”>
  <div id=”topi”></div>
  <div id=”headr”>
    <h1><a href=”<?php echo get_option(’home’); ?>/”>
      <?php bloginfo(’name’); ?>
      </a></h1>
    <div class=”description”>
      <?php bloginfo(’description’); ?>
    </div>
    <div class=”rss2″>
    <a href=”<?php bloginfo(’rss2_url’); ?>” rel=”alternate” type=”application/rss+xml”><img src=”<?php bloginfo(’template_directory’); ?>/images/subscribe1.jpg” alt=”Subscribe” style=”border:0″/></a>
    </div>
  </div>
</div>

</div>

3. Open style.css and add this css style:

#pretop {
background-color: #161616; }

4. Upload the files to the remote server.

So there. we just added a fluid background on our header. The pretop div that we added doesn’t contain any fix width so the width is browser dependent. Since it contains top div inside it which has a fix width of 950px, it will stop from shrinking once the browser’s width is less than 950 px.

HTH!

sid
how bad do you want change

Challenge: I want to incorporate the footer design in April 1.0 template to my Prosumer 1.4 WP theme. So how did I do it?

(click the image to enlarge)

(more…)

I found this very nice Wordpress Template created by Nurudin Jauhari. The Wordpress template name is Prosumer 1.4. It’s neat, compatible with WP 2.5, but I want to add more.:) I want to put adsense to it, a list of new post, pages and archives at the bottom and eventually a media player inside it.

So I just want to share some additions that I made to the template.

I. Google Adsense container under the Header. (please see image below, click to see larger image)

Challenge: I want to put a Google Adsense container under the header. It’s more of a leader-board style.
(more…)