Skip to main content

Changing the footer, background and font colour

Table of contents

In the settings menu you can adapt the text within your footer. To alter the actual style sheet you will need open the cg.css file. There are two footer options within the output, one for where there is a table of content and one for when you do not have one. The table of contents is the first screen you are presented with. Find the footer section at the bottom of the .css file within the editor. It should look something like this -

 
#footer-withtoc {
padding-left: 6px;
padding-right: 6px;
margin-left: 180px;
margin-right: 10px;
margin-top: 10px;
margin-bottom: 10px;
padding-top: 4px;
padding-bottom: 4px;
font-size: 0.8em;
position: static;
text-align: center;}
/* Hides from IE5-mac \*/
* html #footer-withtoc {height: 1%;}
/* End hide from IE5-mac */ 

#footer-notoc {
padding-left: 6px;
padding-right: 6px;
margin-left: 10px;
margin-right: 10px;
margin-top: 10px;
margin-bottom: 10px;
padding-top: 4px;
padding-bottom: 4px;
font-size: 0.8em;
position: static;
text-align: center;
border-top: 1px #cccccc solid;}
/* Hides from IE5-mac \*/
* html #footer-notoc {height: 1%;}
/* End hide from IE5-mac */
 

If we insert the coding previously used on the header beneath the footer with no table of contents, the code will look like this -

 
#footer-withtoc {
background-color: #b01c2e; {Changed}
padding-left: 6px;
padding-right: 6px;
margin-left: 180px;
margin-right: 10px;
margin-top: 10px;
margin-bottom: 10px;
padding-top: 4px;
padding-bottom: 4px;
font-size: 0.8em;
position: static;
text-align: center;}
/* Hides from IE5-mac \*/
* html #footer-withtoc {height: 1%;}
/* End hide from IE5-mac */
 

It would result in an output where there is no table of contents as follows -

Footer Panel

This can be applied to most of the panels within Wimba Create. For example if you thought that the main background colour was too bright you are easily able from this file to make it less bright by changing the colour or differentiating the table at the side. The same can be changed with font colour quite easily by changing or exchanging code beneath the font parameters such -

 
#footer-withtoc {
background-color: #b01c2e;
padding-left: 6px;
padding-right: 6px;
margin-left: 180px;
margin-right: 10px;
margin-top: 10px;
margin-bottom: 10px;
padding-top: 4px;
padding-bottom: 4px;
font-size: 0.8em;
position: static;
text-align: center;}
/* Hides from IE5-mac \*/
* html #footer-withtoc {height: 1%;}
/* End hide from IE5-mac */
 

Changes to -

 
#footer-withtoc {
background-color: #b01c2e;
padding-left: 6px;
padding-right: 6px;
margin-left: 180px;
margin-right: 10px;
margin-top: 10px;
margin-bottom: 10px;
padding-top: 4px;
padding-bottom: 4px;
font-size: 0.8em;
color: #ffffff;  {changed}
position: static;
text-align: center;}
/* Hides from IE5-mac \*/
* html #footer-withtoc {height: 1%;}
/* End hide from IE5-mac */
 

Giving the footer a clearer appearance like so -

When developing it is important to remember that if the content is bright coupled with the brightness of modern computer screens it can lead to headaches or difficulties in prolonged concentration. It is also beneficial to bear in mind DDA compliance, meaning the colours shouldn't disadvantage those who are hard of sight or suffer from colour blindness.