Олег Давидович: 1 версия импортирована

2024-10-18T06:37:53Z

1 версия импортирована

← Предыдущая версия	Версия от 06:37, 18 октября 2024
(нет различий)

1>Trogdor: /* Add custom CSS in your Essential Settings */

2013-08-29T23:53:38Z

Add custom CSS in your Essential Settings

Новая страница

[[Essential_theme|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 [[Essential_theme|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.

<center>[[File:step1.jpg]]</center>

===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"

<center>[[File:essential_customblock_step2.jpg]]</center>

===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.

<code>
.<span style="color: green;">customtest</span> .header .title h2:before {
content:"\<span style="color: red;">f0ac</span>";
}
</code>

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

<center>[[File:essential_customblock_step3.jpg]]</center>

[[Category:Contributed code]]

Essential theme tips - История изменений

Олег Давидович: 1 версия импортирована

1>Trogdor: /* Add custom CSS in your Essential Settings */