Skip to content

[Feature request] Custom theming #146

@eddow

Description

@eddow

I would have wished to implement the Semantic UI theme and therefore add semantic classes to the buttons and inputs. I was planning to implement it in a project as a "custom theme" but couldn't as alertify classes are defined negatively ( :not())

I give here an exemple about semantic but, indeed, it could be done "in general" I think.

Note: the first point is of course think it without having to attack alertify._$$alertify

Expected behavior

The button.mytheme-button css-class should be used as the generated button's class

Actual behavior

.alertify .dialog nav button:not(.btn):not(.pure-button):not(.md-button):not(.mdl-button) class is too strong and are used instead of my custom classes - also, all the themings are copy/pasted in each single class of buttons, inputs, etc. as negative classes.

Proposition

Possibility 1: Define classes positively

If the default dialog items (buttons, inputs, etc.) have a specific "default" class, this would be overridden as soon as the template is overridden.

In the template:

this.defaultDialogs = {
    buttons: {
        holder: "<nav class="alertify">{{buttons}}</nav>",
        ok: "<button class='alertify ok' tabindex='1'>{{ok}}</button>",
        cancel: "<button class='alertify cancel' tabindex='2'>{{cancel}}</button>",
    },
    input: "<input class="alertify" type='text'>",
    message: "<p class='alertify msg'>{{message}}</p>",
    log: "<div class='alertify {{class}}'>{{message}}</div>",
};

One exemple in alertify.css:

.alertify .dialog nav button:not(.btn):not(.pure-button):not(.md-button):not(.mdl-button), .alertify .alert nav button:not(.btn):not(.pure-button):not(.md-button):not(.mdl-button) {
  ...
}

becomes

button.alertify {
  ...
}

Possibility 2: Add a custom negative class

One exemple in alertify.css:

.alertify .dialog nav button:not(.btn):not(.pure-button):not(.md-button):not(.mdl-button)

becomes

.alertify .dialog nav button:not(.btn):not(.pure-button):not(.md-button):not(.mdl-button):not(.custom)

This would already allow the programmer to use <button class="mytheme-button custom" ... to avoid alertify default classes

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type
    No fields configured for issues without a type.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions