Adapt Learning Community: How to add CSS to notify buttons

Hi there

I am having a go at my first plugin and would like to display a notify message with a button. I have managed to make this happen but the button is left aligned. If I inspect the button in Chrome I can see that if I add the following it will center my button:

.notify__btn-container {
text-align: center;
}

Can you advise me how best to implement this in my plugin. Do I add a less file with this CSS in it and if so do I need to add !important? I want to check I am doing this correctly.

Thanks

Paul

Hi Paul,

If you are happy to target all prompt style notify pop ups you can target the generic notify class of `notify__popup` or if you need to be more specific `notify__popup-type-prompt` and apply your CSS. I would highly recommend this be applied in the notify Less file in your theme as it impacts more than one notify instance.

If you want to target only your specific plugins instance of notify I would recommend adding a plugin specific unique class to the notify element, a class similar to `is-pluginName` and target the `notify__btn-container` using the custom class in your plugins specific Less file.

`!important` is a useful addition to CSS but should be used sparingly given how it breaks the usual inheritance chain of CSS. It's recommended use is as a utility, for example if you know something definitely needs to be hidden, or as a means of last resort in case third party plugins are overwriting key styling.

Guy

Show parent | Reply

Hi Guy

Thank you for your reply to my question. What you say makes perfect sense and I hadn't thought about the fact it would affect all instances of the notify element.

With regards your suggestion to target onlly my specific plugins instance of notify, here is the basic code:

var promptObject = {
    title: "Leaving so soon?",
    body: "Looks like you're trying to leave this page, yet you haven't completed all the learning. Would you like to stay on this page and complete it?",
    _prompts:[
        {
            promptText: "Yes",
            _callbackEvent: "pageLevelProgress:stayOnPage",
        },
        {
            promptText: "No",
            _callbackEvent: "pageLevelProgress:leavePage"
        }
    ],
    _showIcon: true

}

Adapt.trigger('notify:close');
Adapt.trigger('notify:prompt', this.promptObject);


How would I add a plugin specific unique class to this? I am not sure where I can add a class to this code.

Thanks

Paul

Show parent | Reply

Oh I found the answer here: https://github.com/adaptlearning/adapt_framework/issues/1957

var promptObject = {
    title: "Leaving so soon?",
    body: "Looks like you're trying to leave this page, yet you haven't completed all the learning. Would you like to stay on this page and complete it?",
    _prompts:[
        {
            promptText: "Yes",
            _callbackEvent: "pageLevelProgress:stayOnPage",
        },
        {
            promptText: "No",
            _callbackEvent: "pageLevelProgress:leavePage"
        }
    ],
    _showIcon: true,
    _classes: 'notify-button-centered'


}

Show parent | Reply