The Footer
The Footer
In a default install, the footer will stretch across the entire screen. Now footers are a good thing, but as it is, it’s more of a ‘catch all’ than a footer. So it needs moving.
Edit ‘index.php’ and scroll to the bottom. You should see this:
</div>
</div>
<p class=”credit”><!–<?php echo $wpdb->num_queries; ?> queries. <?php timer_stop(1); ?> seconds. –> <cite><?php echo sprintf(__(”Powered by <a href=’http://wordpress.org’ title=’%s’><strong>WordPress</strong></a>”), __(”Powered by WordPress, state-of-the-art semantic personal publishing platform”)); ?></cite></p>
</body>
</html>
All you need to do is move a closing div to below the footer code. Like this:
</div>
<p class=”credit”><!–<?php echo $wpdb->num_queries; ?> queries. <?php timer_stop(1); ?> seconds. –> <cite><?php echo sprintf(__(”Powered by <a href=’http://wordpress.org’ title=’%s’><strong>WordPress</strong></a>”), __(”Powered by WordPress, state-of-the-art semantic personal publishing platform”)); ?></cite></p>
</div></body>
</html>
Now, if your footer still goes all the way across the screen, it’s because you have not defined the rap div. Define that, and your footer will sit nicely where it is meant to.
1
The CSS that sorts this bar out is;
.credit {
background: #90a090;
border-top: double 3px #aba;
color: #fff;
font-size: 11px;
margin: 10px 0 0 0;
padding: 3px;
text-align: center;
}
Change the background colour at the top.
If you would like the double border at the bottom too, add this line below the ‘border-top’
border-bottom: double 3px #aba;
Don’t like the double border ? Want a dotted one ? Replace ‘double’ with ‘dotted’
Change the border colour by altering the ‘#aba’ to whatever you want.
The Margin will set the bar 10px below content on the page, the padding will make the bar 3px thicker than the height of the text, and the text will be centre aligned.
If you want the text in that bar to be on the left, put ‘left’ where ‘center’ is.
(That bar actually passes behind the menu, so if your menu is covering part of the bar, although the text will not be centred according to your content, it is still centred according to the page size).
If you don’t want a full bar across the screen, you can alter that too.
Add this line to the above;
width: 20em;
This will shorten the bar.
Now look at the line
margin: 10px 0 0 0;
The numbers refer to the margin that should be allowed in each of the four directions, but in this order - top, right, bottom, left (think of it as clockwise).
Alter the last zero to read ‘100px’ and see what happens. It moves away from the side. Try 150px or 200px and just fiddle with it until it is exactly the place that you want it to be. You can also alter the ‘12em’ and the ‘padding’ if you want.
2
The CSS in the above box still controls this.
The font will be 11 pixels tall.
‘color: #fff’ means that text will be white.
If you want to add extra links in the bar, you will need to edit your ‘index.php’.
3
The ‘WordPress’ link is affected by these two elements;
If you want to alter the colour of the word ‘WordPress’ in the bar, add the following to your css;
.credit cite a {
color: #00ff00;
}.credit cite a:hover {
color: #ffff00;
}
That will make the word bright green, and yellow when hovered.
Note:If you have removed the link to WordPress from your links, please leave the link to WP in this bar. It’s only polite to do so, after all, if someone used your work and didn’t at least let their viewers know where they had got it from, it would annoy you, right ?
You may want to show the amount of database queries that it took to create your page, and the amount of time it took to render your page. This is the code to do that:
<p class=”credit”><?php echo $wpdb->num_queries; ?> queries. <?php timer_stop(1); ?> seconds. <cite><?php echo sprintf(__(”Powered by <a href=’http://wordpress.org’ title=’%s’><strong>WordPress</strong></a>”), __(”Powered by WordPress, state-of-the-art semantic personal publishing platform.”)); ?></cite></p>
