CSS Helper Classes
Latest update: September 9, 2019 | Reading time: 3 to 4 minutesAll of Plethora’s Themes are using Bootstrap v3 front-end CSS Framework. That means that when building you site with one of our themes, you may use any Bootstrap class to help you design what you want. For example if you are having trouble centering an element you may use the .text-center class or if you want to manually add a button you may use the .btn class and its modifiers such as .btn-primary, .btn-secondary etc. The colors, font-sizes, spacers etc are set by the Theme Options and apply to all those classes.
Extending on that philosophy, we also created our own list of CSS helper classes that are used in our themes and will help you do more things easily. You can use them in many cases such as in Theme Options special fields, in Page Options, in shortcodes etc. You can find & study most of them in the theme folder under assets/less/includes/helpers.less
.transparent
Overrides the background color of an element and sets it to transparent.
Themes: All | Dependencies: None | Responsive States: All | Applied on: Block Elements
.transparent_film
Adds a semi-transparent film on top of a block element’s background. The color of the film depends on the color-set of the element.
Themes: All | Dependencies: *_section | Responsive States: All | Applied on: Block Elements
.*_section [*= primary, secondary, black, white, dark, light]
When assigned on an element it applies the corresponding color-set (background, text and link colors) in accordance to the settings found on Theme Options > General > Basic Colors & Sets.
Themes: All | Dependencies: None | Responsive States: All | Applied on: Block Elements
.alternative_logo
It switches the logo to the alternative version.
Themes: Fabershop | Dependencies: Only for “Displaced Logo” header layouts | Responsive States: ≥ 1200px | Applied on: body, .header
.transparent
Overrides the background color of an element and sets it to transparent.
Themes: All | Dependencies: None | Responsive States: All | Applied on: Block Elements
.invert_menu
It inverts the text & link color of the header menu. It can be used when you have a transparent background menu on top of an image.
Themes: Fabershop | Dependencies: None | Responsive States: ≥ mobile | Applied on: .header
.invert_menu_and_tools
It inverts the background, text & link color of the header & the minitools.
Themes: Fabershop | Dependencies: None | Responsive States: ≥ 1200px | Applied on: body, .header
.boxed | .boxed_plus | .boxed_special
Adds padding and other styling according to theme’s design
Themes: All | Dependencies: None | Responsive States: All | Applied on: Block Elements
.no_margin | .no_margin_top | .no_margin_bottom
Eliminates the margin on Y axis
Themes: All | Dependencies: None | Responsive States: All | Applied on: All Elements
.no_padding | .no_padding_top | .no_padding_bottom
Eliminates the padding on Y axis
Themes: All | Dependencies: None | Responsive States: All | Applied on: All Elements
.padding_top | .padding_bottom | .padding_top_half | .padding_bottom_half | .padding_top_third | .padding_bottom_third
Applies padding on Y axis according to the default @section-vertical-padding variable
Themes: All | Dependencies: None | Responsive States: All | Applied on: All Elements
.neutralize_links
Turns a:link color to the body’s or section’s text color
Themes: All | Dependencies: None | Responsive States: All | Applied on: All Elements that contain links
Last updated: September 9th, 2019. This article will be regularly updated with more Classes.