Picture of Shabana Akhtar
styling/customising sideblocks

Hi, Is it possible to customise the moodle blocks. For example I would ideally like to make each block header a different colour to start with but not sure if it possible as currently I can customise them all or none using .block{.......}


Any Suggestions would be appreicted



Average of ratings: -
It's only an avatar...
Re: styling/customising sideblocks
Group DevelopersGroup Documentation writersGroup Particularly helpful MoodlersGroup Testers

H Shabana,

The block header is easy to style once you know the structure of how it is put together.

It is built like this...


So to style the block header you need

.block .header {  }

to style the block title you need

.block .header .title {  }

to style the block h2 you need

.block .header .title h2 { }

to style the block content you need

.block .content { }

Most of which you will find HERE

Average of ratings: -
Picture of Shabana Akhtar
Re: styling/customising sideblocks

Thanks for your reply it was useful but I still cant find out whether you cane style each block differntly each setting block green, calendar red etc. Is there a complete lists of all moodle block names and their associated classes/id's.


Thansk again

Average of ratings: -
Picture of Richard Oelmann
Re: styling/customising sideblocks
Group Particularly helpful MoodlersGroup Testers

There's not a complete list as it will vary from site to site depending on what plugins they have, but if you download and take a look at the krystle theme, you will find a css file called blockheaders.css. This contains quite a lot of the common blocks and is used to add an icon alongside the block headers.

You could use that as a starting point, changing the css rules in there to modify the colours rather than the icons, and then use a tool such as firebug to identify the class names for any other blocks you may have installed on your site.


Average of ratings: -
Picture of Shabana Akhtar
Re: styling/customising sideblocks

thanks thats been a great starting point for me. smile



Average of ratings: -