I am sid. Who r u?

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)

This is the original code of Prosumer 1.4’s footer.php

<br class=”clear” />
 </div>
 <div id=”out-foot”>
 <div id=”footer”>
 
<hr />
   <p>
   <strong>
     <?php bloginfo(’name’);?>
     </strong>© 2007 All Rights Reserved. Using <a href=”http://wordpress.org/”>WordPress <?php bloginfo(’version’); ?></a> Engine
     <br /><span class=”rss”><a href=”<?php bloginfo(’rss2_url’); ?>”>Entries</a></span> and <span class=”rss”><a href=”<?php bloginfo(’comments_rss2_url’); ?>”>Comments</a><span>.
     <!–<?php echo get_num_queries(); ?> queries. <?php timer_stop(1); ?> seconds. –>
   </p>
   <p class=”right”> <span><a href=”http://www.jauhari.net/themes/prosumer” title=”Prosumer 1.4″>Prosumer 1.4</a> made by <a href=”http://www.jauhari.net/”>Nurudin Jauhari</a></span> </p>
   <br class=”clear” />
 
</div>
 </div>
 <?php wp_footer(); ?>
 </body></html>

And this is the output.

(click the image to enlarge)

Then comes the change. Check what I did to my footer.
(click the image to enlarge)

Let me share how I did it, here’s the new code for the footer.php
Here are the steps. (open footer.php in any text editor or use any HTML editor like Dreamweaver OR use WP Theme Editor)

1. Delete this part of the code inside footer.php

   <hr />
       <p>
       <strong>
   <?php bloginfo(’name’);?>
         </strong>© 2007 All Rights Reserved. Using <a href=”http://wordpress.org/”>WordPress <?php bloginfo(’version’); ?></a> Engine
         <br /><span class=”rss”><a href=”<?php bloginfo(’rss2_url’); ?>”>Entries</a></span> and <span class=”rss”><a href=”<?php bloginfo(’comments_rss2_url’); ?>”>Comments</a><span>. 
         <!–<?php echo get_num_queries(); ?> queries. <?php timer_stop(1); ?> seconds. –>
       </p>
       <p class=”right”> <span><a href=”http://www.jauhari.net/themes/prosumer” title=”Prosumer 1.4″>Prosumer 1.4</a> made by <a href=”http://www.jauhari.net/”>Nurudin Jauhari</a></span> </p>
       <br class=”clear” />
     </div>
     </div>
     <?php wp_footer(); ?>
     </body></html>

2. Copy this code just below <div id=”footer”>
   

   <!– START: my_new_footer –>
   
   <div id=”my_new_footer”>
   
   <div class=”box”><div class=”title”>Pages</div><ul>
   <?php wp_list_pages(’title_li=&depth=1&’.$page_sort.’&’.$pages_to_exclude)?>
   </ul>
   </div>
   
   <div class=”box2″><div class=”title”>Recent Posts</div>
   <ul>
   <?php global $post; $posts = get_posts(’numberposts=5′); foreach($posts as $post) : ?>
   <li><a href= “<?php the_permalink(); ?>”><?php the_title(); ?> </a><br />
   <small class=”font_filler”><?php the_time(’l, F jS, Y’) ?></small></li>
   <?php endforeach; ?>
   </ul>
   </div>
   
   <div class=”box”><div class=”title”>Archives</div>
   <ul>
   <?php wp_get_archives(’type=monthly’ ); ?>
   </ul>
   
   <br class=”clear” />
   </div>
   </div>
   
   </div>
   </div>
   
   

3. Copy this styles to your style.css

   /*————-my new footer style——————*/
   #my_new_footer {
   width: 900px;
   padding:0px 20px 10px 20px;
   margin:0 auto;
   background-color:#062104;
   overflow:hidden;
   }
   
   #my_new_footer .title {
   border-bottom:3px solid #666;
   font-size:12px;
   font-weight:bold;
   padding:3px;
   margin:0px;
   color:#ffc600;
   }
   
   #my_new_footer .box {
   font-size:11px;
   width:200px;
   float:left;
   padding:0px;
   margin:10px 10px 10px 10px;
   }
   
   #my_new_footer .box ul {
   padding:5px 0px 0px 20px;
   margin:0px;
   }
   
   #my_new_footer .box li {
   list-style-type:square;
   padding:3px 0px 3px 0px;
   border-bottom:1px dashed #666;
   margin:0px;
   color:#666;
   }
   
   #my_new_footer .box li a{
   color:#FFF59D;
   text-decoration:none;
   }
   
   #my_new_footer .box li a:hover{
   color:#fff;
   text-decoration:underline;
   }
   
   #my_new_footer .box2 {
   font-size:11px;
   width:400px;
   float:left;
   padding:0px;
   margin:10px;
   }
   
   #my_new_footer .box2 ul {
   padding:5px 0px 0px 20px;
   margin:0px;
   }
   
   #my_new_footer .box2 li {
   list-style-type:square;
   padding:3px 0px 3px 0px;
   border-bottom:1px dashed #666;
   margin:0px;
   color:#FFFFFF;
   }
   
   #my_new_footer .box2 li a{
   color:#FFF59D;
   text-decoration:none;
   }
   
   #my_new_footer .box2 li a:hover{
   color:#fff;
   text-decoration:underline;
   }
   
   

4. Steps 2 and 3 will produce this result.
   
   (click image to enlarge)
   
   
   
5. Now, to add the copyright area at the bottom, add this code just down of the last </div> tag of step 2.
   

   <div id=”added_sid”> <!– comment: you can use any id for this div –>
   <p><?php bloginfo(’name’);?>
   </strong>© 2007 All Rights Reserved. Using <a href=”http://wordpress.org/”>WordPress <?php bloginfo(’version’); ?></a> Engine
   
   <br /><span class=”rss”><a href=”<?php bloginfo(’rss2_url’); ?>”>Entries</a></span> and <span class=”rss”><a href=”<?php bloginfo(’comments_rss2_url’); ?>”>Comments</a><span>.
   <!–<?php echo get_num_queries(); ?> queries. <?php timer_stop(1); ?> seconds. –>
   </p>
   <p class=”right”><span><a href=”http://www.jauhari.net/themes/prosumer” title=”Prosumer 1.4″>Prosumer 1.4</a> made by <a href=”http://www.jauhari.net/”>Nurudin Jauhari</a></span></p>
   <br class=”clear” />
   </div>
   
   

6. Copy this to your style.css file
   

    /*-use the id name that you assign to your own div tag-*/
    #added_sid {
        background-color: #FFFFFF;
    }

7. This is the result.
   
8. Upload the files to your remote server using your FTP program or click update file if you’re using the Theme Editor of wp.

So there. If you want to change the background color, the css styles responsible for the background color are:

#out-foot {
background: #062104;
}

AND

#my_new_footer {
width: 900px;
padding:0px 20px 10px 20px;
margin:0 auto;
background-color:#062104;
overflow:hidden;
}

just locate these codes inside your style.css file.

I hoe this helps. Leave me a response if yor have questions.
sid
how bad do you want change