Styling the Activity/Resource Chooser

Styling the Activity/Resource Chooser

by Ross Lovell -
Number of replies: 7

I'm attempting to style Moodle's activity/resource chooser with limited success. I'd like to:

  1. Change the style for the Add an activity or resource text at the top of the window.
  2. Change the background and text colour in the Activities/Resources area.
  3. Change the background and text colour in the instructions area.
  4. Change the background colour in where the Add and Cancel buttons are.

I've been looking through the SCSS for /moodle/theme/boost/scss/moodle/core.scss but I'm having trouble finding the exact styles I need to override.


Moodle chooser

Average of ratings: -
In reply to Ross Lovell

Re: Styling the Activity/Resource Chooser

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

Hi,

I will skip the question that requires you to tell us which Moodle version and Moodle theme/version you are using as the question is not theme or version specific as it has alwasy been a pain to change. I recall it well in Afterburner theme a few years ago!.

OK...can you answer these questions instead. It would also be useful to know the Version of Moodle and the name of your theme?

1. What CSS changes have you tried so far?

2. How and where are you adding these changes if any?

Thanks

Mary

Average of ratings: -
In reply to Mary Evans

Re: Styling the Activity/Resource Chooser

by Ross Lovell -

Gosh, darn it. Sorry Mary I did actually put the version of Moodle and theme details I'm using in the first draft of my post. My browser crashed and I forgot to add it in again.

I'm using Moodle 3.2.3 (Build: 20170508) and working on a child theme of Boost with Bootstrap v4.0.0-alpha.4, which I made following these instructions: Creating a theme based on Boost.

  1. I had some success with the .options class which allowed me to the text colour of everything aside from the window title.
    I've been experimenting with these classes: .choosercontainer #chooseform .options .alloptions .instructions

    I'm attempting to change the background to: background: rgba(0,0,0,0); so that it appears transparent but I always seem to get a white or grey background.

  2. I'm adding these changes to post.scss

Average of ratings: -
In reply to Ross Lovell

Re: Styling the Activity/Resource Chooser

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

Hi,

Don't worry about it...I'm having a similar day...my mouse seems to have a mind of its own and scrambles all that I copy...and try to paste!!!

Take my advice and don't add anything to the post.scss as it takes longer to process.

Just add it to the Raw SCSS/CSS (second box area) of the Advanced settings tab for your theme.

Here are two lots I found using the Web Developer tool in Firefox.

.jschooser .choosercontainer #chooseform .alloptions {
    overflow-x: hidden;
    overflow-y: auto;
    max-width: 240px;
    background-color: #ff0000;

}

.jschooser .choosercontainer #chooseform .instruction,
.jschooser .choosercontainer #chooseform .typesummary {
    display: none;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 240px;
    margin: 0;
    padding: 1.6em;
    background-color: #00ff00;
    overflow-x: hidden;
    overflow-y: auto;
    line-height: 2em;
}

Hope these help.

I'll look for the one you asked about and see if I can locate them.

Cheers

Mary

Average of ratings: Useful (1)
In reply to Ross Lovell

Re: Styling the Activity/Resource Chooser

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

The bulk of the SCSS can be seen here,,,

https://github.com/lazydaisy/moodle/blob/MOODLE_32_STABLE/theme/boost/scss/moodle/core.scss#L1435-L1567

Just go through it and look for background-color and color as well as font-family which should give you something to go on.

Hope this helps?

Cheers

Mary

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

Re: Styling the Activity/Resource Chooser

by Ross Lovell -

Thank you so much Mary. With your help I've managed to style the Activity/Resource chooser.

The last part of the puzzle now is how to remove the border that appears just below the Add an activity or resource title.

I've been experimenting with the following classes/id's:

#moodle-dialouge-yui_3_17_2_1_1495527385166_233-header-text, 
.moodle-dialouge-hd, 
.yui3-widget-hd, 
.moduletypetitle, 
.options {
   border: 0px;
}

You can only see part of the border on the left as the righthand side is obscured by a white background

activity chooser border

 

Average of ratings: -
In reply to Ross Lovell

Re: Styling the Activity/Resource Chooser

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

I think you will find that this will fix that.

.moodle-dialogue-base .moodle-dialogue-wrap .moodle-dialogue-hd {
    border-bottom: 0 none;
}

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

Re: Styling the Activity/Resource Chooser

by Ross Lovell -

Thank you so much Mary. That was just the trick.

I have to admit I'm finding navigating all of Moodle and Bootstrap's classes and IDs to be something of a rabbit warren.

Average of ratings: -