Customize Footer Columns

4 posts from 2 voices

• Started 4 months ago by arock216
• Latest reply from arock216
• This topic is not resolved

Tags:

No tags yet.

1. 

   arock216
   Member

   Hi - I'm trying to customize my footer columns to only include 2 columns. Currently I'm using 2 widets for the footer, the Pages widget and a twitter widget. Ideally I would like the Pages to show in the first column and then show my last 3 tweets horizontally in columns 2,3,4. Or just concatenate columns 2,3,4 into one column and apply the twitter widget to that column and have it run horizontally.

   Hope that makes sense. Site is http://www.elliesmission.com/blog2 - by looking at it I'm sure you'll see what I'd like to do.

   Thanks for your help!

   Posted 4 months ago #
2. 

   Chris Beard
   Moderator

   Hey,

   this requires quite some editing.
   In your footer.php you can remove two or three of the boxes you'd want to use, there are four by standard
   

   <div class='box box_mini'>
   				<h4>Pages</h4>
   				<ul>
   		        <?php wp_list_pages('title_li=' ); ?>
   		        </ul>
       		</div>
   
   			<div class='box box_mini'>
   	            <h4>Archive</h4>
   				<ul>
   	            <?php wp_get_archives('type=monthly'); ?>
   	            </ul>
               </div>
   
   			<div class='box box_mini'>
   	            <h4>Categories</h4>
   				<ul>
   	            <?php wp_list_cats('sort_column=name&optioncount=0&hierarchical=0'.$exclude); ?>
   	            </ul>
               </div>
   
   			<div class='box box_mini'>
   	            <h4>Blogroll</h4>
   				<ul>
   	            <?php wp_list_bookmarks('title_li=&categorize=0'); ?>
   	            </ul>
               </div>

   Then, you need to remove the width of the small boxes.
   This can be changed in your style.css under
   

   .wrapper .box_mini {
       margin-right: 20px;
       width: 160px;
   }

   Then, in your tweets.css found in your plugin folder you'll need to find
   div.tb_tweet

   Here, you have to set a width for how wide you want each tweet to be and you need to add a left float.
   So it looks somewhat like this
   

   div.tb_tweet {
        background: none repeat scroll 0% 0% transparent;
        border-top: 1px dotted #CCCCCC;
        float: left;
        list-style: none outside none;
        min-height: 60px;
        overflow: hidden;
        padding: 2px;
        width: 100px;
   }

   Posted 4 months ago #
3. 

   arock216
   Member

   Thanks Chris! If I copy your code and directions it does work. However after looking at the results, I would like to extend the third column to provide more room for my tweets instead of all three columns being equal width.

   For example I want the first 2 columns to be 160px and the third column to be 320px.

   I tried to create a new .wrapper box_mini_2 in Style.css for the third column and set it for 320px but that did not work. Any thoughts on how I would accomplish this?

   Thanks again for all your help!

   Posted 4 months ago #
4. 

   arock216
   Member

   So I can get this to work fine in FireBug using the .wrapper .box_mini_2 class that I created (expanding the width to 320px for the 3rd footer column).

   The question I can't figure out is what page to apply the class? I tried in the footer.php page like this the code below, but it doesn't work and when I 'view source' on the page it's still using the .wrapper .box_mini class. Since I'm using custom footer widgets, where would change the third column to use the new class? I don't see any other place to update on the footer.php page.

   Thanks again for your help!

   Current footer.php:

   <div class='box box_mini'>
   <h4>Pages</h4>

   <?php wp_list_pages('title_li=' ); ?>

   </div>

   <div class='box box_mini'>
   <h4>Archive</h4>

   <?php wp_get_archives('type=monthly'); ?>

   </div>

   <div class='box box_mini_2'>
   <h4>Categories</h4>

   <?php wp_list_cats('sort_column=name&optioncount=0&hierarchical=0'.$exclude); ?>

   </div>

   Posted 3 months ago #

RSS feed for this topic

Reply

You must log in to post.