Adaptable: Styling self-registration message card on login page

Adaptable: Styling self-registration message card on login page

by Craig Theunissen -
Number of replies: 6

Hi everybody

We've enabled the self-registration with admin approval plugin for our Moodle 3.7 / Adaptable 2.2 site. When a student tries to log in with an un-approved account, a message is shown as follows:

Screenshot

I need to fix the styling of the message that is shown. CSS below.

Screenshot

role="main" and the card/card-block classes are used in other cards in the id="region-main" section, so how do I target that particular message for CSS styling?

Average of ratings: -
In reply to Craig Theunissen

Re: Adaptable: Styling self-registration message card on login page

by Gareth J Barnard -
Picture of Core developers Picture of Particularly helpful Moodlers Picture of Plugin developers

pagelayout-login body class.

Average of ratings: -
In reply to Gareth J Barnard

Re: Adaptable: Styling self-registration message card on login page

by Craig Theunissen -
Hi Gareth , thanks for your quick response.

So if I do this...

body.pagelayout-login #region-main [role="main"] {
background-color: cyan !important;
}

I can get the message:
Screenshot

But it also applies to content on the login page:

Screenshot

Sorry, I'm still finding my way around CSS, am I doing it wrong?
Average of ratings: -
In reply to Craig Theunissen

Re: Adaptable: Styling self-registration message card on login page

by Gareth J Barnard -
Picture of Core developers Picture of Particularly helpful Moodlers Picture of Plugin developers

Tricky, try:

body.pagelayout-login #region-main [role="main"] > h2,
body.pagelayout-login #region-main [role="main"] > div.box,
body.pagelayout-login #region-main [role="main"] > div.singlebutton {
Average of ratings: Useful (1)
In reply to Gareth J Barnard

Re: Adaptable: Styling self-registration message card on login page

by Craig Theunissen -
Hi Gareth

I would have preferred being able to target the whole div so that the title and paragraph aren't separated, but this was a great help, thank you!


Screenshot
Average of ratings: -
In reply to Craig Theunissen

Re: Adaptable: Styling self-registration message card on login page

by Gareth J Barnard -
Picture of Core developers Picture of Particularly helpful Moodlers Picture of Plugin developers

Ok, what about the additional:

body.pagelayout-login #region-main [role="main"] > h2 {
    margin-bottom: 0;
    padding-bottom: .5rem;
}
body.pagelayout-login #region-main [role="main"] > div.box {
    margin-top: 0;
    padding-top: 15px;
}

?


Average of ratings: Useful (1)
In reply to Gareth J Barnard

Re: Adaptable: Styling self-registration message card on login page

by Craig Theunissen -
Of course, that seems pretty obvious to me now :D
Thanks for all your help, much appreciated!
Average of ratings: -