Essential theme tips

Essential is a three column Responsive theme for Moodle written by Julian (Moodleman) Ridden based on Bootstrap for Moodle 2.5. It is designed to provide a more professional and clean website focused look and feel.

This page outlines some advanced tricks you can use to customise the theme to meet your needs.

For more information on this theme be sure to visit the main theme documentation

Changing the Icons on HTML Blocks

Enable custom classname's for blocks

You will need to enable this feature first in your Moodle install. Log in as an administrator and go to:

SITE ADMINISTRATION > PLUGINS > BLOCKS > HTML

Here you will need to enable the option to:

Allow additional CSS classes

Once enabled you can now add a custom classname to your HTML Blocks. This is needed so that we can identify them individually and place a custom icon.

Create HTML Block with a custom classname

When creating your HTML block (or any in fact that you want to change the icon of) you now give it a classname of your choice. For this example I am using the name "customtest"

Find the Unicode of your desired icon

Use the cheat sheet located at http://fortawesome.github.io/Font-Awesome/cheatsheet/. This will be needed to insert into our CSS to generate your desired icon. I keep this printed next to my monitor these days smile.

Add custom CSS in your Essential Settings

Now under the "General Settings" for the Essential theme you can add the following custom css. Please note that I have highlighted in green the custom class name we are using and in red the unicode of the globe icon.

Please ensure it is formatted exactly like below. Copy and paste if you like.

.customtest .header .title h2:before { content:"\f0ac"; }

If you have followed these steps correctly, when you hit save you should see your block now has a new icon displayed.