What is the new body CSS class?

With the recent interface updates, you may have noticed that we added a feature that creates a body CSS class. You’ll find it located under "page settings" under the "advanced" tab. While it may seem like a small addition to the system, proper use of it will guarantee you big results. The primary result being reduction. This new feature allows you to:

  • minimize the number of templates you create
  • reduce IDs and classes on content
  • eliminate clutter within your CSS
  • dispense with extra JavaScript files
  • and avoid the sometimes-necessary evil of inline styles

This means that you’ll be managing less code. Furthermore, you’ll reap the benefits of caching as you simplify your CSS and JavaScript files.

Why classes?

Our main guideline in creating this feature was to keep you in control. We didn’t want to create some system-generated string of confusing numbers--that is, we didn’t want you to have to recite pi to the twentieth or thirtieth place every time you want to change your code. We chose a body class instead of an ID because some developers might already be using IDs on the body tag. And the last thing we want to do is to tell them how they should code.

One of the great benefits of the body class is that there can be any number of classes on an element, and it shouldn’t interfere with custom JavaScript or styling. If you want to add multiple classes to the body, simply insert a space between the class names. For example, inserting “you rock” into the body CSS class text field will apply the body classes “you” and “rock.” Easy, right?

For example

In this scenario, we’re going to specify style and behavior differences based on context. Suppose you have a media page. It’s based on the regular “inside” template, but it has a lot of custom stuff. The background image for the site changes, all the headings are a different font or color, the blog element needs to be styled differently, and the main and sub column widths are slightly different. A lot of LightCMS designers currently create separate templates for this sort of thing, which means they create extra CSS and JavaScript files too. This is the problem we wanted to address.

Now you can go into Page Settings for the media page, click the Advanced tab, and add the body CSS class “media-page.” From here you can add the new CSS and or JavaScript to your existing files.

Code - CSS

Change background Image

body.media-page #container { background: url(img/media-bg.jpg) no-repeat center top; }

Style Headings

body.media-page h1.title,
body.media-page h1,
body.media-page h2,
body.media-page h3,
body.media-page h4,
body.media-page h5 {
font-family: "Droid Sans", Helvetica, Arial, sans-serif;
color: #f31c77;

Style Blog

body.media-page .blogList ul li {
background: url(img/li-dot.gif) no-repeat 0 13px;
list-style: none;
padding: 6px 0 6px 19px;

Adjust column widths

body.media-page #main-content {
float: left;
width: 560px;

body.media-page #sub-content {
float: right;
width: 330px;

Code - Javascript (using jQuery)

Run a block of code only on the Media Page

var mediaPage $('body.media-page').length;

if (mediaPage) {
//run code on pages with the media-page class only

Target elements on the Media Page

$('body.media-page #page-title')