Skip to content

styling.md

Latest commit

 

History

History
51 lines (38 loc) · 1.68 KB

styling.md

File metadata and controls

51 lines (38 loc) · 1.68 KB

Styling

{.toc}

{#overview}

Overview

Every plugin has its own css file with namespaced classes. So every style can be overwritten.

For example lets look at Floating button plugin. It has 2 scss styles:

Lets imagine we want default subscribing button be white with black bell in it. So we need to overwrite some default classes:

/* Button itself */
.notimatica-plugin-button-subscribe {
  background-color: #fff !important;
}

.notimatica-plugin-button-subscribe:hover {
  background-color: #fff !important;
}

/* Bell and its waves */
.notimatica-plugin-button-bell,
.notimatica-plugin-button-wave-1,
.notimatica-plugin-button-wave-2 {
  fill: #000 !important;
}

Here we use !important modifier since we know that plugin styles will be loaded after our own css files and this modifier will force browser to use our styles instead of plugin's ones.

{#common-classes}

Common Classes

Since every plugin must be independent from the page it runs on and don't affect it either, plugins are provided with some common classes they can use.

{.table .table-bordered .table-striped .table-info}

Class Description
.notimatica-reset Reset styles to default values
.notimatica-clearfix Simple clearfix
.notimatica-fade Fade element. With .in class makes it appear
.notimatica-pull-left Makes element float left
.notimatica-pull-right Makes element float right