Adding additional CSS classes to customise a Moodle HTML Block

Adding additional CSS classes to customise a Moodle HTML Block

by Kristina Schneider -
Number of replies: 13

So I've been searching through forums and all over the internet to see if i can find instructions on how to write the CSS code to add it to my HTML block. I'm not having much luck.

When configuring my HTML Block, the contextual help for Additional CSS classes says: 

The purpose of this configuration is to aid with theming by helping distinguish HTML blocks from each other. Any CSS classes entered here (space delimited) will be appended to the block's default classes.


So I did an Inspect Element with Google Chrome to play with the block and I discovered that the classe I wanted to change was .block {background-color: #d9edf7; border-color: #072D53;}. Naturally, I entered this and nothing happened. 

So then I went looking in the MoodleDocs pertaining to HTML Blocks  where it says:

To aid with styling the block, an administrator can, from Administration > Site administration > Plugins > Blocks > HTML, toggle the ability to allow additional CSS classes to be set in individual block instances. If it is enabled, a field appears at the bottom of HTML block instance's configuration forms:

additionalcssclasses.png

Please note that if additional CSS classes have been added and the administration setting is then disabled, the form settings are saved in the database and will reappear if this is re-enabled.

I confirm that the administration setting is enabled. 


I'm thinking at this time that I'm not using the right CSS syntax for some odd reason (but it worked with Inspect Element). There doesn't seem to be any resources on how to write the syntax. 

Can anyone help please?

Thanks

Kristina



Average of ratings: -
In reply to Kristina Schneider

Re: Adding additional CSS classes to customise a Moodle HTML Block

by Anu Laitakari -

Hi Kristina,

You have probably found out the answer to this already but in case anyone else is looking for the answer.

The additional CSS class you add to the block is just a class and you define the name of it here. The class is a selector that allows you to style the elements within that class. So you could change the colour of the block or add a different header etc.

You then add the actual custom CSS to the Custom CSS in your theme. The custom CSS looks for the class (i.e. the new "name" of the block) and overrides the theme CSS.

Anu


Average of ratings: -
In reply to Anu Laitakari

Re: Adding additional CSS classes to customise a Moodle HTML Block

by Andrew Nokes -

Thanks Anu,

I am trying to achieve the same thing as Kristina.  I want to change the background color of a HTML block.

Are you able to describe this process in more detail step by step / give me an example of how to achieve it?

I am the administrator of my instance of Moodle, but we are supported by a Moodle Partner and so I don't have access to the CSS files.

Thanks,

Andrew

Average of ratings: -
In reply to Andrew Nokes

Re: Adding additional CSS classes to customise a Moodle HTML Block

by Stephen Leonard -
Hi Andrew,


To start, you'll need to put a class name into Additional CSS classes when you're editing the block.




Then you would go into your theme options, Site Administration > Appearance > Themes > Your Theme and there should hopefully be a Custom CSS box somewhere near the bottom of the page. Then it would be just be a case of entering and saving:

.background{

     background-color: #f37521;

}


Hope this helps,

Stephen

Average of ratings: Useful (3)
In reply to Stephen Leonard

Re: Adding additional CSS classes to customise a Moodle HTML Block

by Andrew Nokes -

Thanks Stephen smile

So, I attempted your suggestion.  I added the following CSS to the Custom CSS box for my theme:


.customHTMLBG{

  background-color:#dadbdb;

}


Then, I added the following to the Additional CSS classes field in the HTML block settings:


customHTMLBG


But the background colour still hasn't changed sad

Any ideas why this might be?

Thanks,

Andrew

Average of ratings: -
In reply to Andrew Nokes

Re: Adding additional CSS classes to customise a Moodle HTML Block

by Anu Laitakari -

HI Andrew,

I have just tested your code, and my test block changed colour instantly. Are you adding the code to the right theme?

Also, check that you don't have a spelling mistake anywhere or that you are not missing a bracket.

I usually add this to the end of any previous code in the Custom CSS block. Check that you didn't remove a bracket from a previous entry if you have other added CSS in the box.

Yours,

Anu

Average of ratings: -
In reply to Anu Laitakari

Re: Adding additional CSS classes to customise a Moodle HTML Block

by Andrew Nokes -
Hi Anu, Stephen,


I still can't get this to work.  

I have Purged All Caches and the block's background colour still won't change.

Any ideas where I could be going wrong?

Thanks,

Andrew

Average of ratings: -
In reply to Andrew Nokes

Re: Adding additional CSS classes to customise a Moodle HTML Block

by Stephen Leonard -

Hi Andrew,

The only thing I can think of is that another CSS rule is taking precedence over your new rule. A way of testing it out would be to add !important to your CSS. So it would look something like this:

.customHTMLBG{

  background-color:#dadbdb !important;

}

It wouldn't be good practice to use it like this though, so I advise you just to use it as a test.

Stephen

Average of ratings: -
In reply to Stephen Leonard

Re: Adding additional CSS classes to customise a Moodle HTML Block

by Andrew Nokes -

Thanks Stephen,

Just tried your suggestion and still no change sad

Andrew

Average of ratings: -
In reply to Andrew Nokes

Re: Adding additional CSS classes to customise a Moodle HTML Block

by Derek Chirnside -
Andrew, this will be absolutely no help to you, but I'll post anyway.

I tested this little snippet of CSS from Stephen, and it worked OK.

Moodle 3.0.1, nothing fancy.

So: back to the basics.  Full stops, spaces etc.

Maybe post a screen shot?

-Derek

Average of ratings: -
In reply to Andrew Nokes

Re: Adding additional CSS classes to customise a Moodle HTML Block

by Derek Chirnside -

Any progress Andrew?

Sorted?

Average of ratings: -
In reply to Derek Chirnside

Re: Adding additional CSS classes to customise a Moodle HTML Block

by Andrew Nokes -

Hi Derek,

No, still not been able to get it to work. 

We are on Moodle 2.9 (Build: 20150511) supported by eCreators and our instance has their Learnbook theme, so I can only assume it's something to do with the Learnbook theme that is somehow overriding the custom CSS?

I've attached screenshots.  

Cheers,

Andrew

Attachment customHTMLBG1.png
Attachment customHTMLBG2.png
Average of ratings: -
In reply to Andrew Nokes

Re: Adding additional CSS classes to customise a Moodle HTML Block

by Derek Chirnside -

OK Andrew, next thing to do is check it with Clean theme.

Some themes hack some of the functionality behind the scenes.  You are using a commercial theme, and the snippet you show is not 'standard' Moodle.

And: have you tried putting the CSS in at course level rather than block level?

And: have you asked the guys you bought the theme from?

-Derek

Average of ratings: -
In reply to Andrew Nokes

Re: Adding additional CSS classes to customise a Moodle HTML Block

by Anu Laitakari -

HI Andrew,

Stephen has pipped me to the post and explained it perfectly.

Yours,

Anu

Average of ratings: -