I have limited experience of CSS3 and would like some guidance on how to replicate the Header and Footer on this site i.e. for the footer what's the best method of achieving the columns, changing the text colour, changing the background colour, adding a coloured separating bar etc - for the header how is the different coloured buttons achieved and the associated coloured separating bar
I am using Moodle 2.7 and the More theme
Thanks
Bill
Hi,
If you use something like FireBug which is a FireFox Add-on, and inspect the Footer area of Moodle.org you will see how it is set out.
Basically it using the following simple layout...
<div id="footer-inner" class="container-fluid">
<div class="row-fluid">
<div class="span2"></div>
<div class="span2"></div>
<div class="span2"></div>
<div class="span2"></div>
<div class="span2"></div>
<div class="span2"></div>
</div>
</div>
You can learn all about Bootstrap 2.3.2 layouts and scaffolding HERE
The good news is that you can add the above code to the HTML editor in the Footnote section in More's own Custom settings page found in the side block Administration menu under ...
Site Administration > Appearance > Themes > More.
It is at this point you will see the names of those themes that have customisation setting.
Try this out and if you need more help just ask here.
The header you can set in More's settings page by clicking on the Inverse setting which makes the header background black.
You can probably make some changes to the header using CSS2 & CSS3 to make it look like Moodles header. Here again you can add the CSS to the Custom CSS box provided in the More settings page.
To Add a menu in the header you need to add the menu items in the area provided in Site
Administration > Appearance > Themes > Theme settings
It's in 'Theme setting' that you can set Theme Designer Mode which is useful for when you are making changes to your theme.
I hope this helps?
Mary