Moodle 2 Theme Engine

Custom Tab



The custom tab lets you do all the things that you can't do via the forms in the other tabs.

The Custom Tab has 4 components we will cover below:
  1. Custom CSS entry - for inputting CSS code directly.
  2. Header HTML/script entry - for inputting analytics code, etc.
  3. Header HTML - here you can enter/input HTML for your header
  4. Footer HTML - here you can enter/input HTML for your footer.
Custom CSS:
The Custom CSS field in the Custom tab enables you to input CSS to format items that do not have controls in the system currently. For example below we've set CSS that expands the block header when editing is turned on.
Custom CSS
For example, depending on controls settings, the Block headings might conflict with the block Title when editing is turned on. So we can adjust this, by adding some CSS. This CSS only increases the block height when editing is turned on (which is the only time the editing icons are printed).

Without the CSS above:
With the CSS above
Controls witout taller block header
Controls higher

In another example, lets change the color of the highlight in the custom menu.

Menu example
A great tool for setting these colors is Google Chrome's Developer tools - which will tell you the current CSS being used to generate the blue color. To use Developer Tools to see the actual CSS for this color, right click (or Command-Click on the Mac), and select "Inspect Element". This will open up the developer tools window which will show the CSS being used to render your site.

In Google Chome's Developer Tools you can see the current color that is being used to color the menu highlight.
selecting color

In this case, we will put in the CSS tag and over ride the default blue color of the theme with an orange color.

Save changes are refresh your page, to see the new menu color.

Setting color
Tip: in some cases you may need to put in the CSS tag "!important" as shown above -this tells the browser to use your value even if some other value is over-riding it lower in the CSS cascade.

Head HTML:
Code placed in this text field will be rendered just after the closing </head> tag. This is a good place to put scripts you want to use, such as analytics scripts. In the example below, we have placed the tracking code from GoogleAnalytics.
Adding analytics code

Header HTML:
This is a place where you can put in a completely custom header.
Header

Footer HTML:
This is a place where you can put in a completely custom footer, or add content to the existing footer.

Custom footer

As always, Save changes before you leave the page.