Priority : Custom Classes

Custom Classes

To increase the flexiblility of theme, we have introduced some custom classes. You can make use of these class while customizing your site.

  • text-alignleft – this class is used to align the content left side.
  • text-alignright – this class is used to align the content right side.
  • small-text – custom class to achive the font size of 12px.
  • small-title – custom class to achive the font size of 16px.
  • medium-title – custom class to achive the font size of 23px.
  • large-title – custom class to achive the font size of 40px.
  • extra-large-title – custom class to achive the font size of 50px.
  • grey-text – applies grey color for the text.
  • italic-text – changes the text to italic.
  • bottom-image-overlap – applies bottom margin -70px to that section.
  • filled-white – use this class to fill background with white color for button.
  • fade-image – this class is used to switch between 2 images on mouse over.
    Html Format:
    <div class=”fade-image”>
    <img src=”#” alt=”Primary Image” title=”Primary Image”>
    <img src=”#” alt=”Secondary Image” title=”Secondary Image”>
    </div>
  • fullwidth-button – use this class for button so that it will cover whole area of outer section.
  • custom-white-bg – use this class to fill background with white color for any section.
  • dt-sc-shadow – used to apply box shadow for any section.
  • align-carousel-arrows – this class is used to align carousel arrows when different heading is used.
  • rounded-image – used to create rounded section with border radius of 50%. can be used for any image or sections.
  • contact-type2 – used to show contact form type 2 design.
  • alternate – will apply background color for tables.
  • play-animations – this class allows animated section to do animation once again when it is clicked. Note, this class has to be placed outside that animate section.
  • hold-animations – this class prevents animate section from animating on page loads and this section will be animated only when it is clicked. Note, this class has to be placed outside that animate section.
  • bg-text – used to create highlighted text.
  • origin-bottom-image – this class will make that image to start from bottom of that section. Note, this class has to be placed outside that image section.
  • origin-top-image – this class will make that image to start from top of that section. Note, this class has to be placed outside that image section.
  • light-text – which has font wight of 300.

Related Articles