Helper classes and functions

In this articles we will gather all interesting and important classes helpers for formatting of content

Table of Contents

Helper classes

This is classes which you can add to containers and have special representation. It’s very useful to use this classes in page builder or in Text widgets, ads areas, everywhere where you can use html code. Example of usage:

<div class="floatleft">Your content</div>

Formating and styles

font80, font90, font110, font120, font130, font140, font150, font250 – makes size of font as 80%, 90%, 110%, etc
mr5, mr10, mr15, mr20, mr25, mr30 – makes margin from right as 5px, 10px, 15px, etc You can use the same for padding if you use pr5, pr10, etc
ml5, ml10, ml15, ml20, ml25, ml30 – makes margin from left as 5px, 10px, 15px, etc
mt0, mt5, mt10, mt15, mt20, mt25, mt30 – makes margin from top as 5px, 10px, 15px, etc
mb0, mb5, mb10, mb15, mb20, mb25, mb30 – makes margin from bottom as 5px, 10px, 15px, etc
padd20 – makes padding as 20
bg_r_b – set background image position of container to right bottom
bg_r_t – to right top
bg_l_b – to left bottom
text-center – makes text center aligned
redcolor – makes text red
redbrightcolor – makes red bright color
pinkLcolor – makes pink bright color
greencolor – makes text green
whitecolor – makes text white
whitecolorinner – makes all child elements as white
whiteonhover – makes all child elements as white on hover
greycolor – makes text grey
blackcolor – black color
lightgreycolor – light grey
whitebg – makes white background
darkbg – makes dark background
darkhalfopacitybg – makes half transparent dark background
lightgreybg – makes background grey
lightgreenbg – light green background
lightredbg – light red
redbg – red background
violetgradient_bg – gradient with violet background
text-right-align – makes text to be right align
fontbold – makes all text in container as bold
lineheight20 – add line-height as 20
lineheight15 – line height as 15
rh_opacity_7 – set opacity of container as 70%
rh_opacity_5 – opacity as 50%
rh_opacity_3 – opacity as 30%
border-top – adds grey light border in top
border-grey – adds grey light border
roundborder – makes element with smooth round borders
hideontablet – makes element disabled only on mobiles and tablets
padd20 – add padding 20 around element
hideonmobile – hide elements on mobiles only
rhshow – make element as inline-block
fontnormal – disable bold font weight in element, for example, this disables bold formatting in headings
re_loadingafter – add this to element if you want to add rotatingicon before text
re_loadingbefore – add this to element if you want to add rotating icon before text
rh-line – add this to element which you want to show as line divider
rh-line-right – add to element to show right border
rh-line-left – add to element to show left border
rh_table_image – add to container with image if you want to center align image in height and width
rh_centered_image – the same as previous, but works without table behavior
wpsm_pretty_list – add to container with list to make list more interesting styles (add also wpsm_pretty_hover to enable better hover effect and small_gap_list to decrease padding between elements)
roundborder – add rounded borders
roundborder50p – add circle shape border
roundborder8 – add soft borders

Special color and font settings

If you want add dynamic colors (which can be changed from theme option – appearance of theme) to elements, use next classes

color_link – will add main color of theme to link element
rehub-main-color – will add main color of theme to color of element
rehub-main-color-bg – will add main color of theme to background color of element
rehub-sec-color-bg – will add secondary color of theme to background color of element
rehub-main-btn-bg – will add button color of theme to background color of element
rehub-main-color-border – will make color of border as main color of theme
rehub-sec-color – will add secondary color to element
rehub-main-font – will make font of element as main font of theme (can be changed from theme option – font option)
rehub_main_btn – will make styles of element as main button style of theme. Better to use with combination of wpsm-button class

Floating, columns and responsive blocks

floatleft – this makes element float:left
floatright – this makes element float:right
position-relative – this makes element as relative position
flowhidden – this makes element as overflow:hidden
inlinestyle – use it if you want to make some elements on the same line. For example, some icons and text
rhhidden – makes element as hidden
margincenter – makes element as center align with margin
hideonmobile – will hide block only on mobiles (including tablets in vertical mode)
hideonsmobile – will hide block only on mobiles (excluding tablets in vertical mode)
showonmobile – will show block only on mobiles (including tablets in vertical mode). If you want to show some element on mobiles and hide it on all other resolutions, add also rhhidden class
showonsmobile – will show block only on mobiles (excluding tablets in vertical mode)
mobilecenterdisplay – makes text as center aligned only on mobiles
tabletcenterdisplay – the same as above, but will work also on tablets
mobileblockdisplay – will make block as 100% on mobiles. Useful if you want to change 2 columns on desktop on 1 full width column on mobiles
tabletblockdisplay – the same as above, but will work also on tablets
tabletsblockdisplay – the same as above, but will work only on tablets in vertical mode (excluding horizontal mode)
disablefloatmobile – if you will use this class with floatleft or floatright class, this will delete floating on mobiles
mobilepadding – will add padding 20px from left and right side only on mobiles
tabletpadding – the same as above, but will work also on tablets
col_wrap_two, col_wrap_three, col_wrap_fourth, col_wrap_fifth, col_wrap_six – special classes for columned content in theme. Add this classes to blocks which you want to show as columns. Much better if you place such blocks inside container with class rh-flex-eq-height which will make them as equal height
.wpsm-one-half, .wpsm-one-third, .wpsm-two-third, .wpsm-three-fourth, .wpsm-one-fourth, .wpsm-one-fifth, .wpsm-two-fifth, .wpsm-three-fifth, .wpsm-four-fifth, .wpsm-one-sixth, .wpsm-five-sixth – use for text content columns. Last column must have class wpsm-column-last
no_padding_wrap – if you place blocks with col_wrap classes inside container with this class – this will delete padding between columns
scroll-on-mobile – add this class if you want to make scrollable block on mobiles from left to right. Useful for long containers which you want to show in one line on mobiles
col_wrap_two, col_wrap_three, col_wrap_fourth, col_wrap_fifth, col_wrap_six – wrapper for post columns. Post item must have class col_item. If you want to make items as two columns on mobiles, add class two_column_mobile to col_item

Responsive options

If you want to show something only on desktop and hide on mobiles, wrap your content with next container

<div class="hideonmobile">Content for desktop</div>

hideontablet class will disable content also on tablets (so, both tablets and mobiles will not be visible)

hideonsmobile will hide only on small mobile sizes (<479px)

If you need to make something opposite and hide on desktop, but show on mobiles, use next

<div class="rhhidden showonmobile">Content for mobile</div>

Instead showonmobile you can use mobileblockdisplay which will make element as 100% width block style or mobilesblockdisplay which will work only for width of screen under 479px. Or tabletblockdisplay which will work also for tablets

Inputs and forms

To add basic theme styles of forms, use next classes

re-form-input – add this for text inputs, textboxes
re-form-group – use this class for form wrapper
re-form-input-small – the same as first class, but will add more small padding in elements, so, they will be compact
def_btn – add this to any elements to make it look like basic button
wpsm-button – add this to element to make it as colored button. Use this class with combination of classes (small, medium, big, giant) to control button size and (black, white, orange, red, orange, brown, gold, blue, rosy, pink, purple, teal, navy) to control color
padforbuttonsmall, padforbuttonmiddle, padforbuttonbig, padforbuttonmini – add different padding for buttons (or any other button like elements)

Special classes for content blocks and for responsive containers

rh-container – main container element of theme. This makes block to be as 1200 width with correct padding, formating and all responsive width
rh-cartbox – beautiful formatting of container with shadows and padding

You can also use next structure to divide content on content block and sidebar block

<div class="rh-container"> 
<div class="rh-content-wrap clearfix">
<div class="main-side clearfix">Content</div>
<aside class="sidebar">Sidebar</aside>
</div>
</div>

Sidebar width will be 336 in this case. You can also use Content structure with narrow sidebar, so, you will have more space for content width. Here is structure

<div class="rh-container">
<div class="rh-mini-sidebar-content-area floatright clearfix tabletblockdisplay">Content</div>
<aside class="rh-mini-sidebar floatleft tabletblockdisplay">Sidebar</aside>
</div>

Flexboxes

Flex boxes are another great feature which has now support of most browsers. It will give you ability, for example, to have equal height blocks without using of scripts. Or, automatically calculate padding between columns and delete left and right padding on first and last columns.

To use flexboxes in theme, add class

rh-flex-eq-height

to make inner container equal height

rh-flex-columns

to make inner containers to work as columns with paddings between them

rh-flex-center-align

to make it center align (vertical)

Additional helpers for flexbox

rh-flex-space-between

will make objects inside to work as space between if they have available space

rh-flex-right-align – moves object to right in flexbox container

rh-flex-justify-center, rh-flex-justify-btw, rh-flex-justify-start, rh-flex-justify-end – adds justify behaviour: center, between, start, end

rh-flex-align-stretch – stretches element inside container to fit the width

rh-flex-align-end – aligns item in end (vertical position)

Horizontal scrollable blocks for mobiles

Today is very popular to use scrollable horizontal items instead of javascript carousels. They are working fast and cross-browser. You can add scrollable behavior for mobile if you place next class to container with your items

smart-scroll-mobile

All items which must be scrollable must have special class col_item

There are additional classes which you can add to scrollable container

By default, tablets will show 3 visible items in row, you can change this with additional classes: two-col-tablet which will make visible only 2 items or two-col-tablet

Mobiles show 1 visible item in row, you can change this via next classes: two-col-mob will show 2 items, three-col-mob will show 3 items

All of these classes can be added to Elementor or other page builders. All post, product modules have proper col_item class, so, smart scroll classes will work on them

Interactive and special blocks

You can also use next constructions for formatting tabled blocks with borders

<div class="rh-tabletext-block">
<div class="rh-tabletext-block-heading no-border">
<span class="toggle-this-table"></span>
<h4>Heading</h4>
</div>
Your content
</div>

This will create bordered box with toggled heading. Inner container of block will not have padding. If you need to add padding to inner container, use

<div class="rh-tabletext-block">
<div class="rh-tabletext-block-heading">
<span class="toggle-this-table"></span>
<h4>Heading</h4>
</div>  
<div class="rh-tabletext-block-wrapper">                          
Content
</div>                               
</div>

You can also make toggled hidden text with next code

<div class="r_offer_details">
<span class="r_show_hide">Trigger for toggle</span>
<p class="open_dls_onclk flowhidden">Hidden text</p>
</div>

Table behavior for containers

To make container works as tables, use classes tabledisplay for wrapper, rowdisplay for containers which will work as rows and celldisplay for inner cells. This will make columns to be aligned as in tables.

Responsive link sets

if you have list of links, for example, navigation links or tabs, you can make them work as special navigation select on mobiles

Use next construction

<div class="rh_tab_links">
<a href="#" class="active">Dashboard</a>
<a href="#">Add product</a>
<div>

Tabbed navigation with auto toggle of overflow elements

This is very useful construction for tabbed navigation. See example

To make such logic, use next construction

<div class="responsive-nav-greedy rh-flex-eq-height clearfix">
  <ul class="rhgreedylinks">
    <li class="current selected"><a href="">Profile</a></li>
    <li><a href="">My offers</a></li>
    <li><a href="">My products</a></li>													
  </ul>
  <span class="togglegreedybtn rhhidden floatright ml5">More</span>
  <ul class='hidden-links rhhidden'></ul>						
</div>

Popups

You can use also popups with triggers which will work with any content (including dynamic content). For this, use next code for trigger

<span class="csspopuptrigger" data-popup="customid1"><i class="fa fa-bar-chart" aria-hidden="true"></i> Trigger</span>

csspopuptrigger is class for trigger. You can add this class to any element. data-popup=”customid1″ is pointing on ID of container with popup, code of such container is next

<div class="csspopup" id="customid1">
     <div class="csspopupinner">
           <span class="cpopupclose" href="#">×</span>
            Content
     </div>
</div>