b2evolution b2evolution

  • Sign in
  • Sign up
  • About
  • Downloads
  • Hosting
  • Docs
  • Support
  • Sign in
  • Sign up
  • Manuals Home
  • Latest Updates
 
  1. b2evolution CMS User Manual
  2. Developer Reference
  3. Technical Reference
  4. Common Helper CSS Classes

Common Helper CSS Classes

b2evolution includes some default CSS classes that can be applied to various Widgets and/or Short Tags in order to easily control some display aspects.

If these are not sufficient, you can also add your own classes.

For widgets

  • children-widgets-inline can be used on an "Embed Sub-Container" widget so that embedded widgets <div>s display inline instead of blocks.
  • widget-no-border can be used on an individual widget in order to hide border, for example, in the sidebar containers.
  • alternate-left-right see: https://skins.b2evolution.net/tabs-bootstrap-home#alternating-images-in-the-secondary-area

For images

  • raised will add a drop shadow on the image to make it look raised.
  • noshadow remove the shadow in case there is one by default.
  • border will add a 1 pixel dark grey border around the image.
  • noborder will remove the border in case there is one by default.
  • squared will make the corners square in case they were rounded by default.
  • rounded will round the corners (4px radius)
  • round will make the image round instead of square (radius 50%). Can be useful for logos, portraits, etc…

For [div:.class]

  • alternate-left-right can be used to alternate teaser images of content blocks left & right like this:

    [div:.alternate-left-right]
    [include:block1:.clearfix]
    [include:block2:.clearfix]
    [include:block3:.clearfix]
    [include:block4:.clearfix]
    [/div]

Bootstrap CSS classes

Most b2evolution skins are based on Bootstrap and therefore make the default Bootstrap CSS classes and components available.

The following may be especially useful:

Buttons

  • btn
  • btn-default, btn-primary, btn-success, btn-info, btn-warning, btn-danger, btn-link
  • btn-lg, btn-sm, btn-xs
  • btn-block
  • active, disabled

Images

  • img-rounded, img-circle, img-thumbnail
  • pull-left, pull-right (and clearfix on the parent)

Text

  • text-muted, text-primary, text-success, text-info, text-warning, text-danger
  • center-block
  • label
  • label-default, label-primary, label-success, label-info, label-warning, label-danger
  • badge

For divs / [div:.class] ; can also apply to [include:...]

  • clearfix to avoid that floating images go beyond the end of the div
  • bg-primary, bg-success, bg-info, bg-warning, bg-danger
  • jumbotron
  • alert
    • alert-success, alert-info, alert-warning, alert-danger
  • panel
    • panel-primary, panel-success, panel-info, panel-warning, panel-danger
    • panel-heading, panel-title, panel-body, panel-footer
  • well
    • well-lg, well-sm
Tags: 7.0.3
Created by fplanque • Last edit by fplanque on 2020-01-16 22:35 • •

No feedback yet

On this page

  • For widgets
  • For images
  • For
  • Bootstrap CSS classes
  • Buttons
  • Images
  • Text
  • For divs / ; can also apply to

Search the Manual

Content Hierarchy

  • b2evolution CMS User Manual
  • User's Guide
  • Installation / Upgrade
  • Front-office Reference
  • Back-office Reference
  • Developer Reference
    • Website Skins/Themes
    • Email Skins/Themes
    • b2evolution Files
    • Website Integration
    • Plugins
    • Debugging
    • Technical Reference
      • Plugin API for item settings
      • URL Parameters
      • Roadmap & Unified Process
      • Charset Handling
      • Date Format
      • Technical Documentation
      • Image Sizes
      • Database Diagram
      • Username Autocomplete
      • Helper CSS Classes
      • Responsive images
    • Hacks
    • Credits
    • Development
    • How to... (Customize)
    • Scheduled Tasks Reference
  • Operations Reference
  • Advanced Topics
  • Glossary
  • Archives
Advanced CMS

This online manual is powered by b2evolution CMS – A complete engine for your website.

About b2evolution

  • What is it?
  • Features
  • Getting Started
  • Screenshots
  • Online demo
  • Testimonials
  • Design philosophy
  • Free & open source
  • Terms of service

Downloads

  • Latest releases
  • Skins
  • Plugins
  • Language packs

About us

  • About us
  • Contact

Webhosting Guide

  • Web hosting blog
  • Best web hosting
  • Cheap web hosting
  • Green web hosting
  • Hosting with SSH
  • VPS hosting
  • Dedicated servers
  • Reseller hosting
  • Int'l: UK / France

Docs & Support

  • Online manual
  • Forums
  • Hire a pro !

Other

  • Adsense
  • Press room
  • Privacy policy

Stay in touch

  • GitHub
  • Twitter
  • Facebook
  • LinkedIn
  • News blog
  • RSS feed
  • Atom feed

Founded & Maintained by François Planque