Add Custom JS - Essential Theme

Add Custom JS - Essential Theme

by Avata Tadeo -
Number of replies: 7

Hi, 

i'm trying to add some custom JS to load specific CSS on different courses, specially to add different color backgrounds to the header depending on what course i'm in (for example in "/index.php?categoryid=2" i would like to add a custom header background color, and for the different "?categoryid=" i would like to have different header background colors). I found where to add custom CSS but I can't figure out where to add custom Javascript/Jquery in order for me to add specific id names to the different header depending on the URL. 

Any help will be appreciated.

Thanks


I'm using Moodle 3.0

Using Essential Theme V.2.5


Average of ratings: -
In reply to Avata Tadeo

Re: Add Custom JS - Essential Theme

by Mary Evans -
Picture of Core developers Picture of Documentation writers Picture of Peer reviewers Picture of Plugin developers Picture of Testers

Hi,

You do not need JS or any extra code to make these changes other than adding the following:

.course-25 #page-header { background-color: #abc; }

.category-3 #page-header { background-color: #890; )

The CSS above is just an example, but it is just enough to show that you can list all the course and category ids as CSS selectors.

This can be added into the Essential Custom CSS settings.

Hope this helps?

Mary

Average of ratings: Useful (1)
In reply to Mary Evans

Re: Add Custom JS - Essential Theme

by Avata Tadeo -

Hi Mary, thanks a lot for your quick reply!

I'm kinda new to Moodle, so this may sound silly, but what you're saying is that if the URL is "index.php?categoryid=5" I can target only this URL in CSS by adding ".category-5"?? I just gave it a try but it changed the background color of all the site's #page-header. Thats why I thought of using custom JS.

Average of ratings: -
In reply to Mary Evans

Re: Add Custom JS - Essential Theme

by Avata Tadeo -

OK, sorry I got your point, the system adds a CLASS name to the body depending on the category ID, it works fine :D. 

Now I have another issue, hopefully you can also help me. The idea to give each main course a different color is that every subcategory of that main one has the same color in the page-header. So, i tried adding subcategories but those subcategories have a new categoryID. Is there a way to have all subcategories have the same #page-header background color as the main category they belong to?


thanks

Average of ratings: -
In reply to Avata Tadeo

Re: Add Custom JS - Essential Theme

by Mary Evans -
Picture of Core developers Picture of Documentation writers Picture of Peer reviewers Picture of Plugin developers Picture of Testers

Hi,

Yes you can join the body classes together, for example like this:

.category-1.course-23 {background-color: #123;}
.category-1.course-30 { background-color: #abc;}
Average of ratings: Useful (1)
In reply to Mary Evans

Re: Add Custom JS - Essential Theme

by Avata Tadeo -

Yes, that works perfectly for courses, but not for subcategories. I mean, when I create a Category it has, for example, categoryid=4, and if i create a course in that category it has the same categoryid and only the course number changes. But, if i create a subcategory inside this category with ID of 4, this new subcategory has a totally new categoryid, so I can't keep the same color of the page-header.

I don't know how to style a category and keep all SUBcategories with the same style. Is there a way around this? Thanks a lot, i really appreciate it 

Average of ratings: -
In reply to Avata Tadeo

Re: Add Custom JS - Essential Theme

by Mary Evans -
Picture of Core developers Picture of Documentation writers Picture of Peer reviewers Picture of Plugin developers Picture of Testers

Hi,

As you already know,, every Moodle course, category and sub-category are issued with a unique ID number

These ID numbers are converted into body classes which only appear in body section of the page source when that page is viewed in the users browser window.

Top level category body class is listed before the course body class

so the CSS needs to be category first course last

For Example: category > course

.category-2.course-5

However the sub level category body class is listed after the course body class

so the CSS needs to be course first sub-category last

For example: course -> sub-category

.course-3.category-3

I hope this helps?

Mary

Average of ratings: Useful (1)
In reply to Mary Evans

Re: Add Custom JS - Essential Theme

by Avata Tadeo -

Hi Mary,

thanks a lot for your help and quick replies! It did work how you said, but only for parent categories. In order to make this CSS work for every subcategory, i had to use custom Javascript. Managed to do so, editing the config.php and adding a new .js file. 

Again, thanks for your help!

best regards

Average of ratings: -