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
  • greencolor – makes text green
  • whitecolor – makes text white
  • greycolor – makes text grey
  • whitebg – makes white background
  • darkbg – makes dark background
  • darkhalfopacitybg – makes half transparent dark background
  • lightgreybg – makes background grey
  • lightgreycolor – makes text light grey
  • 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)

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-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
  • 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
  • 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

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

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

or

rh-flex-columns

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

or

rh-flex-center-align

to make it center align (vertical)

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">Hidden text</p>
</div>

Contact block container

<div class="tabledisplay footer-contact">
  <span class="left-f-contact celldisplay"><i class="fa fa-phone" aria-hidden="true"></i></span>
  <div class="fcontact-body celldisplay">
    <span class="call-us-text">Got Questions? Call us 24/7!</span>
    <span class="call-us-number">(800) 5000-8888</span>
    <span class="other-fcontact"><a href="#">test@gmail.com</a></span>
  </div>
</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>

 

Was this article helpful to you? Yes No

How can we help?