Totara Learn Open Discussions

Customising blocks

Welcome to this forum!

Hi Guys,

I was wondering about customising blocks e.g. adding a colour behind the block title. Is this something that I could do myself through themes or would I need to get our Totara partner to do it? If that is the only way, is it something that I would be able to change later e.g. change the colour myself or would I need to get our partner to do it every time that I decide that the site could do with a change? Would it also be possible to decide which block type the colour applies to? Maybe I don't want it to apply to the blocks in the middle of the page for instance but only the blocks on the left and right of the page or would it have to apply across the entire site and to all block types?

Hopefully my question makes sense. Any input would be greatly appreciated.

Example of what I would like to be able to do

Permalink | Reply

Hi Clive

There are a few theme settings that can be changed through the user interface under Theme settings This doesn't go to the level of details as specific Block background header colours.

It is possible to add custom CSS in the Theme settings to give more control over the screen elements - a Partner would be able to add the additional CSS initially and you could then edit the CSS colour values when required if they explain where to change this in the CSS.

regards

Permalink | Show parent | Reply

Thanks Craig, I will touch base with our partner and see what they can do

Permalink | Show parent | Reply

Hi Clive,

If you would like change the color , text or any thing for the blocks,

You should go into

Site admin >Appearance > Themeing > choose theme that you using (basis) > custom css and write block id or block class such as

#inst39472.block_calendar_month .header{background-color: #008aaf;}

Regards

Rahul

Permalink | Show parent | Reply

Thanks so much Rahul!

I tried adding the code to the custom CSS but it didn't do anything? I just copied what you gave me to try, added a calendar block to a course page but nothing happened - is that all I need to do or is there a step that I am missing?

Where would I find the block id/classes that they use on the site? Am I correct in thinking that any other blocks would work the same e.g. #inst.block_my_learning.header{background-color:hex code; color:hex} etc?

I tested it in our Sandpit if that makes a difference (I would imagine not but thought I best mention that).

Permalink | Show parent | Reply

Hi Clive

Thanks Rahul for helping Clive in the right direction - you also need to include the id number of the block that you added to the course page in the code.

#instblock idnumber.block_my_learning.header{background-color:hex code; color:#008aaf;}

To find out what the block id number is if you go to the course page and then click the configure block icon - the block id is shown at the end of the url as editid=

Also make sure you tick the box in the theme that says Enable style overrides.

Regards

Permalink | Show parent | Reply

Thanks Craig, so I tested it out in the Totara sandpit (don't think themes functionality works in my sandpit) but nothing happened.

this was in the URL

Is this what the code would look like or are there other parts from the URL that would need to be added?

Regards

Clive

Permalink | Show parent | Reply

Hi Clive

Can you include the inst before the 218 - this is required. Also the second color isn't required resulting in the following

#inst218.block_calendar_month .header{background-color: #8dc63f;}

Sorry about the confusing instructions

regards

Permalink | Show parent | Reply

Hi Craig,

It was my fault I just forgot to add #inst. But even adding it, it hasn't changed the block?

Permalink | Show parent | Reply

Hi Clive

This looks right - are you using Totara 12 - you may also need to delete caches as there is data is stored on server cache for a while. This can be done through purge caches menu in Totara.

regards

Permalink | Show parent | Reply

Thanks Craig - I'll give that a try. One thing that I have noticed is that I cannot change any theme settings even when enabling override theme settings e.g. I can't change background colors etc. Is it possible that the functionality is somehow not enabled? We are on V12

Permalink | Show parent | Reply

Hi Clive

It is possible that your partner has restricted this from being changed by setting this in the config file. Any setting that has their setting controlled by the config.db file should show defined in config against the setting.

Regards

Permalink | Show parent | Reply