1. Home
  2. ReHub Theme
  3. Advanced tips and customizations
  4. Helper classes and functions

Helper classes and functions

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

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>

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>


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


to make inner container equal height



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



to make it center align (vertical)

Additional helpers for flexbox


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


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>
Your content

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>
<div class="rh-tabletext-block-wrapper">                          

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>

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>

 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>													
  <span class="togglegreedybtn rhhidden floatright ml5">More</span>
  <ul class='hidden-links rhhidden'></ul>						


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>