[Adaptable] How to modify element on specific page?

[Adaptable] How to modify element on specific page?

by Ruan Viljoen -
Number of replies: 6

Greetings Moodle Community

Moodle: 3.3 (Build: 20170515)
Adaptable:  1.4 (Build: 2017053000)

I'd like to know how I can create custom CSS to target an element on a specific page.  Below is an example.

I used the new "Dashboard Region Block Builder" (fantastic feature, thank you!) to modify the dashboard, however, this element (indicated in the screenshot below and highlighted in red) is still visible.  This wouldn't be a problem if the theme has a white background.

I have identified this element as "#region-main" using Firefox Developer Edition's Inspector.  Upon adding custom CSS such as #region-main { background-color: red}.

However the problem with this is, it modifies the main-regions on all the pages, for instance...

Including of course, the problematic element on the dashboard.

Knowing how to do this would allow me to modify the login page's white background as well:

Thank you!


P.S.  I'd like to see a feature in the future that allows you to modify the login page smile

Average of ratings: Useful (1)
In reply to Ruan Viljoen

Re: [Adaptable] How to modify element on specific page?

by C Behan -

Hi Ruan,


Add the class specifically for the dashboard page as well: 

.pagelayout-mydashboard #region-main {background:red}


The class for the login page is pagelayout-login

Catherine

Average of ratings: -
In reply to C Behan

Re: [Adaptable] How to modify element on specific page?

by Ruan Viljoen -

Thank you Catherine!

How did you go about identifying the parent class?  Using Firefox Developer Edition's Inspector, there's a lot of classes for the body element.

Average of ratings: -
In reply to Ruan Viljoen

Re: [Adaptable] How to modify element on specific page?

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

Each page as it's own unique body ID. Useing that ID is the quickest way to style a page.

The ID is taken from the page title:

#page-mod-forum-post is the ID of this page where I am adding this comment now.

https://moodle.org/mod/forum/post.php?edit=1429265

Hope this helps?

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

Re: [Adaptable] How to modify element on specific page?

by Ruan Viljoen -

Thanks Mary, I believe it will help me.

So just to clarify, if I precede any child element with the designated page's body ID, ex:  #page-body .exampleclass then I should be able to modify it?

I bet you can tell, I'm still learning; but try to go as far as I can on my own before requesting any assistance.

Average of ratings: -
In reply to Ruan Viljoen

Re: [Adaptable] How to modify element on specific page?

by Fernando Acedo -
Picture of Plugin developers Picture of Testers

If you enabled the Region Builder (any of them) and a row then you must add a block. Otherwise Adaptable will display the empty space.

Just disabled the region builder (or the row) or add a block.

About the colour, add this code in the Custom CSS box:

#page-login-index #region-main {
    background-color: YOUR_COLOR;
}

The custom login page is in our To Do list but you can open a request in our site: https://adaptable.ws/overview/requests

If you get more than 5 votes then will be at the top of the list and if you get more 10 votes will be scheduled for next release.

Average of ratings: -