Unleash your creativity using advanced css to style your plugin

For those of you who know programming, see plugins as web pages and fires as divs, so everything makes sense.

To create your css classes, click on the css editor button on the side of the plugins editing screen. A window will open for you to enter the css code. Warning: malformed CSS can break your plugin, use this function only if you already have prior knowledge of the CSS language.

A classe screen

The class responsible for styling the background of the plugin is .screen , so if you want to apply some effect to the plugin just create this class. If any properties are not applied, remember to try with the !important flag. Here's an example of how to style a background:

.screen {
    background:red !important;    
}

Use cases

Animated Background: To animate the background some techniques have to be used. In the background field in the plugins editor just put a dash (-), this way the property is discarded and the code below will work:

.screen {
    background-image: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);
    background-size: 400% 400% !important;
    animation: gradient 2s ease infinite !important;
}
@keyframes gradient {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}    

Some css properties do not accept the !important flag, so we advise you to always run an external test in your css to verify that it is running. Linear-gradient and keyframes don't work well with the !important flag.

Rounded Edges:

.screen {
    border:5px solid green;
    border-radius:30px;
}