Your Customers are Mobile, you will be too …

In this tutorial we will show you how to make changes to the header of your Moodle 2.1 custom theme using Dreamweaver CS5.5. We will concentrate on changing the background of our header and the text contained within it. If you wish to change the logo or add one I have already done a tutorial on this so I won’t be covering that in this article.

To add a Logo to your header see this tutorial:

Moodle 2.1: Adding a Logo to Your Custom Moodle Theme Method 2

Moodle 2.1: Making Changes to the Header of Your Moodle Theme

Adding a Header Background

First thing we need to decide before we make changes to our header background is do we want our header background to go full width of the screen or just the width of our content. We need to know this first as this will dictate what part of our CSS we need to make changes to.

Open your Moodle site in Dreamweaver and in the files palette we need to open our index.php file and load it up in live view. Remember you will need to hit discover first then once Dreamweaver has located all the files it needs to load then hit the live view button.

We then need to navigate to the folder that contains our custom theme in the files palette in Dreamweaver and open up the styles folder. As some designers use different techniques to work out which CSS file they make their changes in you will need to go through each of the CSS files in this folder to work out which one handles the CSS for these 2 divs

  • #page-header-wrapper
  • #page-header

If we want to have our header go full width we will be making our changes to #page-header-wrapper but if only want our header to go the width of our content we need to make our changes to #page-header. Double click on the rule in the CSS panel in Dreamweaver that applies to you. Select the background tab and make your background changes.

If you are using a background image select the image as you would normally in Dreamweaver for now. We will change the code to suit Moodle in a second. Once you have made your changes hit apply and OK.

Now if we leave the CSS code as it is Moodle won’t be able to find our background image. This is because it is buried with heaps of PHP within moodle. So we need to make a change to the URL of our image.

Currently the CSS code for our background image should look something like this:

background-image: url(../pix/bgslice.png);

We need to change the bit inside the brackets to this:

[[pix:theme|bgslice]]

Do not put the file extension on your file name. Moodle will work this out for itself. However the file must be a PNG or GIF when working with Moodle. So our new code should look like this:

background-image: url([[pix:theme|bgslice]]);

Now save your CSS file and refresh your moodle website in your browser. You header should now have a background image.

For these changes to also show in the admin side of our Moodle website we need to locate the same CSS rules inside Admin.css and repeat our changes.

Now that we have a Moodle Header background it is time to move onto adding a bit of spice to our header title.

Changing the Typography of your Moodle Header

The next thing most of us want to do is change the look and feel of our headers text. The first thing we need to do is open up all our CSS files in our themes style folder again and search them for the CSS rules relating to h1.headermain . This rule covers our header title text. So open it up and make any changes you wish to make to your header and hit save. Refresh your web browser page again and your changes should now have been made.

If you wish to use an @font-face kit however you will need to do this manually as Dreamweaver does not yet support it. However any other CSS changes can be made directly from here.

For these changes to also show in the admin side of our Moodle website we need to locate the same CSS rules inside Admin.css and repeat our changes.

Hope you all found this helpful and see you again soon.

Leave a Reply

Please buy me a Coffee

Help a starving student to drink more coffee

Follow us on: