Contents
[ hide ]
The footer of a WordPress based site can have many more functions than just to serve as the sport for copyright notices. It’s a place where widgets can add content or where we display additional information pertaining to the site, such as Feed links.
The Semiomantics XO RC footer is kept simple but ready to host additional content.
The footer is defined in the style-sheet at about line 322 under #footer as follows:
#footer {
clear: both;
float: left;
width: 100%;
padding: 10px 0;
text-align: center;
font-size: 11px;
border-top: 0px solid #FFFFFF;
/*border-left: 2px solid #FFFFFF;
border-right: 2px solid #FFFFFF;
border-bottom: 2px solid #FFFFFF; */
background: #FFFFFF;
}
For your convenience we have added side border calls you may activate by un-commenting the two concerned lines; if you edit the side borders, make sure you also edit side borders in the main wrapper and header for clean alignment of your design.
The default footer looks as follows:
Footer default
Note:
The red horizontal line is the border-bottom of the main wrapper and is to be edited under the #mainwrapper as from line 227 in your style-sheet.
If we want to add another horizontal line, we can edit the border-top from the footer:
Example: change
border-top: 0px solid #FFFFFF;
to
border-top: 1px solid #000000;
The new look is:
Footer Top Border 1px black
Not very effective, is it?
We can now add a little margin between the two lines by adding:
margin-top: 2px;
above the border-top call.
The result looks better:
Footer Top Margin 2 px
Having set the top, let’s have a look at the bottom; for the time being the site looks unfinished.
A simple solution consists in editing the bottom border, for example by coloring the border and giving it some strength, for example 24 pixels black:
border-bottom: 24px solid #000000;
Result:
Footer Bottom Border 24 px black
Another solution consists in coloring the footer background: I choose the same background color as in the sidebar, #eaeaea, then I add a black bottom border of 12 px and I add a bottom margin of 12 px as the bottom border is glued to the bottom of my browser window:
#footer {
clear: both;
float: left;
width: 100%;
padding: 10px 0;
text-align: center;
font-size: 11px;
margin-top: 2px;
margin-bottom: 12px;
border-top: 1px solid #000000;
/*border-left: 2px solid #FFFFFF;
border-right: 2px solid #FFFFFF;*/
border-bottom: 10px solid #000000;
background: #eaeaea;
}
The result:
Footer
The standard footer text consists of normal text and links; we have coded the style-sheet to edit text and links separately.
You find the code on lines 557 – 563 (about) under .red a and .red, .entry a
.red a {
color: #000080;
}
.red, .entry a {
color: #B30000;
}
The example shows as:
Footer Font Color
In as much as the demo site is concerned I will keep text in black (#000) and links in very dark gray (#222)
Semiomantics XO RC Demo Footer
More about this Topic
| Author: Yorgo Nestoridis, Media Marketing & Publishing, Founder of YORGOO Publishing, YORGOO Press and Semiomantics.
If you enjoyed reading the above, please consider following future tips and strategies by RSS reader, Email delivery, or Kindle subscription. |
This page is wiki editable click here to edit this page.