Adaptable: Styling self-registration message card on login page

Adaptable: Styling self-registration message card on login page

door Craig Theunissen -
Aantal antwoorden: 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?

Gemiddelde van de beoordelingen:  -
Als antwoord op Craig Theunissen

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

door Gareth J Barnard -
Foto van Core developers Foto van Particularly helpful Moodlers Foto van Plugin developers

pagelayout-login body class.

Gemiddelde van de beoordelingen:  -
Als antwoord op Gareth J Barnard

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

door 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?
Gemiddelde van de beoordelingen:  -
Als antwoord op Craig Theunissen

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

door Gareth J Barnard -
Foto van Core developers Foto van Particularly helpful Moodlers Foto van 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 {
Gemiddelde van de beoordelingen: Useful (1)
Als antwoord op Gareth J Barnard

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

door 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
Gemiddelde van de beoordelingen:  -
Als antwoord op Craig Theunissen

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

door Gareth J Barnard -
Foto van Core developers Foto van Particularly helpful Moodlers Foto van 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;
}

?


Gemiddelde van de beoordelingen: Useful (1)
Als antwoord op Gareth J Barnard

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

door Craig Theunissen -
Of course, that seems pretty obvious to me now :D
Thanks for all your help, much appreciated!
Gemiddelde van de beoordelingen:  -