Customizing the graphical rendering of customlabels

Back to index

As course elements are high level semantic and edition objets, they usually collide also high level theming and look and feel concerns.

A deep effort in thinking the architecture was made during years of maturation to provide easy means to take over the graphical aspect and theming of the elements. Here comes some tracks to alter the elements design, as long as element structure copes to the instegrator's needs.

Using theme administrator level overrides

Most Moodle 2 themes allow now adding some custom CSS rules in theme administration. This is an easy way to override some previous raphic attributes assignation to elements. The framework documentation gives exhaustive description of standard templates with element naming that can be altered by late CSS rules.

Plugin a customlabel override CSS in the active theme

This way will allow having a unique CSS to centralize all alterations and overrides made to the customlabels look and feel:

First you just will add a dedicated stylesheet into the "style" directroy of the active theme, say it is called (what i usually do) "customlabel_styles.css".

Than you add this stylesheet registration into the config.php file of the theme, in the "sheets" array:

  $THEME->sheets = array(
   'afterburner_pagelayout',   /** Must come first: page layout **/
   'afterburner_styles',   /** Must come second: default styles **/
   'afterburner_menu',
   'afterburner_blocks',
   'afterburner_mod',
   'afterburner_calendar',
   'afterburner_dock',
   'afterburner_rtl',
   'afterburner_settings',
   'customlabel_styles',

 );

The above sample completes the "afterburner" style sheetset.

The last thing to prepare is a new icon set that will replace the standard icons located into element types in the component distribution. I ususally create the

  <theme>/pix/customlabel_icons

directory to put them all in.

In the "customlabel_styles.css" file, now you can override elements rules changing colors and even icons.

As a sample, let change the local icon and look and feel of the "important" course element, and even add support to "page" format. So here what's added to the css file:

  /* Important */
  
  #page-region-main td.custombox-header-thumb.important,
  #region-main td.custombox-header-thumb.important{
       background-image: url("/theme/afterburner/pix/customlabel_icons/icon_important.png") !important; 
       background-repeat: no-repeat;
       height:73px !important;
       width:80px !important;
       min-width:80px !important;
       border-right:1px solid #A0A0A0 !important;
  }
  
  #page-region-pre td.custombox-header-thumb.important,
  #region-pre td.custombox-header-thumb.important,
  #region-post td.custombox-header-thumb.important,
  #page-region-post  td.custombox-header-thumb.important{
  	background-image: url("/theme/afterburner/pix/customlabel_icons/icon_important_small.png") !important; 
  	background-repeat: no-repeat; 
       height:73px !important;
       width:35px !important;
       min-width:35px !important;
       border-right:1px solid #A0A0A0 !important;
  }
  
  td.custombox-content.important{
       background-color: #ffffff !important;
       background-image: none !important;
       color: #990000 !important;
  }

This way the icon location has changed to the theme located icon. Note that the !important rule is essential to get the override working, as module located stylesheets (giving default rules) are appended after the theme sheet set.