The Studio has several tools to help you write and manage CSS. So you can edit CSS directly in a widget or in site-wide stylesheets.

Note   Behind the scenes, all CSS is loaded as one stylesheet.

To add CSS for a specific widget:

1. Open a page that has at least one widget on it.
2. Click the widget to open its Settings on the right.
3. Then on the Styles tab, click Advanced Styles in the bottom right.

1. Here, add CSS, and then click Apply to see the change. Whenever you open the same type of widget (e.g., Heading widget) in the future, you’ll see its particular CSS.

Tip   You can see the CSS for all widgets in one place on the Widget Styles page, which is on the left under Theme > Widget Styles.

Note   To see any CSS changes on your live site, you’ll first need to Publish any page or page element.

The Settings is also where you’ll add IDs and classes to widgets, columns, and rows. Next, let’s talk more about that pre-populated CSS selector and the general HTML structure of widgets.

To understand how to write CSS for a widget, you’ll need to understand the basic HTML structure of widgets.

The specific structure of each widget different, but widgets still have common elements:

• Container div
• Column div
• Row div

Container div

Each widget is wrapped in a container div. For example, the Heading widget generates HTML that looks like:

<div class="heading">
  <h2>Build your own jeans</h2>
</div>

The container (<div class="heading">) has a class based on the name of the widget (class="heading" in this case). So to target only one type of widget, use the widget’s class in your selector:

.heading h2 {
  background-color: #ccc;
}

You can add your own classes to that container—for example:

<div class="heading center">

To add a class to the container:

• In the Advanced Styles, in the Classes box, just type your class (e.g., center).

Tip   To add multiple classes, separate them with a space (e.g., center invert-colors section-heading).

You can also add your own ID to the container—for example:

<div id="blog-title" class="heading">

To add an ID to the widget:

1. In the Advanced Styles, in the ID box, just type your ID (e.g., blog-heading).

1. Next, click the By Element ID tab. You’ll see some pre-populated CSS with that ID.

1. Here’s where you can add your CSS. When you’re done, click Apply.

Note   Feel free to change the exact selector (#blog-title.heading h2), but keep the ID part (#blog-title).

Column div

Widgets are also grouped in columns:

<div class="span6">
  <div class="heading">…</div>
  <div class="text">…</div>
</div>

Each column has a class that starts with span and ends with 1 – 12 (e.g., span6). The number (1 – 12) determines the width—with span12 being 100% of the available width and span1 being 1/12th of the available width.

Note   These classes are also responsive. So all columns will shift to take up 100% of the available width on smaller screens.

For example, this HTML:

<div class="row-fluid">
  <div class="span2">2</div>
  <div class="span3">3</div>
  <div class="span3">3</div>
  <div class="span4">4</div>
</div>

Generates these columns:

Keep in mind that the total number in a row (which you’ll learn more about next) must add up to no more than 12. For example, span5 + span7 = span12.

Just like with the container, you can add classes and IDs to a column.

To add an ID or classes to a column:

• In the Advanced Styles of any widget in that column, click the Column tab.

Tip   You can see this column (i.e., the ID, classes, or CSS that you add) by looking in the Advanced Styles of any widget in the same column.

Row div

Columns are then wrapped in a row:

<div class="row-fluid">
  <div class="span6">
    <div class="heading">…</div>
    <div class="text">…</div>
  </div>
  <div class="span6">
    <div class="heading">…</div>
    <div class="text">…</div>
  </div>
</div>

By default each row has the class row-fluid, which allows it adjust for different devices.

The span classes of all columns in a row must add up to no more than 12. For example, span5 + span7 = span12.

Columns are wrapped in rows. And the span classes of all columns in a row must add up to no more than 12. Inspect the following grid to see an example.

To add an ID or classes to a row:

• In the Advanced Styles of any widget in the row, click the Row tab.

Tip   You can see this row (i.e., the ID, classes, or CSS that you add) by looking in the Advanced Styles of any widget in the same row.

If you’re familiar with responsive design techniques and all these rows and columns sound like a fluid grid to you, you’re right!

The Studio is built on a Bootstrap (v2.3.2) framework, which means your sites are built on a grid made up of rows and columns. The grid is based on percentages instead of pixels so your site will look good on any size screen.

Here’s a small snippet of the grid showing one row (row-fluid) with two columns (span4 and span8).

<div class="row-fluid">
  <div class="span4">…</div>
  <div class="span8">…</div>
</div>

While the Studio handles writing the HTML, you have access to a bunch of predefined classes, so you can adjust the formatting of columns and rows.

Here are some of the grid-related classes that you should learn:

• Row-fluid (rows)
• Span (column width)
• Offset (right align)
• Nesting

Row-fluid (rows)

As you learned earlier, all rows have the class row-fluid. And rows surround columns. For example, this HTML:

<div class="row-fluid">
  <div class="span12">Row 1</div>
</div>
<div class="row-fluid">
  <div class="span6">Row 2</div>
  <div class="span6">Row 2</div>
</div>

Creates this grid:

Span (column width)

You’ve already learned about this one (How a widget’s HTML is structured), but here’s a summary.

Each column has a class that starts with span and ends with 1 – 12 (e.g., span6). Your site supports up to 12 columns and the number (1 – 12) determines the width. The spans of all columns in a row should add up to no more than 12 (span1 + span9 + span2 = span12).

This HTML:

<div class="row-fluid">
  <div class="span1">…</div>
  <div class="span9">…</div>
  <div class="span2">…</div>
</div>

Creates this grid:

Offset (right align)

Move columns to the right by adding offset classes. Like with span classes, you can use offset1 – 12. And offset1 moves a column to right by 1 column, offset2 moves a column to the right by 2 columns, and so on.

When you use offset, you must still set the width with a span class. So every span class plus every offset class must be no more than 12 (span4 + span4 + offset4 = 12).

For example, this HTML:

<div class="row-fluid">
  <div class="span4">span4</div>
  <div class="span4 offset4">span4 offset4</div>
</div>
<div class="row-fluid">
  <div class="span3 offset3">span3 offset3</div>
  <div class="span3 offset3">span3 offset3</div>
</div>
<div class="row-fluid">
  <div class="span6 offset6">span6 offset6</div>
</div>

Creates this grid:

So to use the offset classes:

1. First set the width of the column with a span class.

<div class="row-fluid">
  <div class="span4">…</div>
</div>

1. Next, decide how far to the right you want to move the column and add the corresponding offset.

<div class="row-fluid">
  <div class="span4 offset4">…</div>
</div>

You can still add multiple columns to a row.

<div class="row-fluid">
  <div class="span4">span4</div>
  <div class="span4 offset4">span4 offset4</div>
</div>

Nesting

Using containers, you can nest rows and columns. The span and offset classes work essentially the same way when nested.

Because these classes refer to percentages instead of pixels, 12 is still equivalent to 100% of the available width.

<div class="row-fluid">
  <div class="span12">
    12
    <div class="row-fluid">
      <div class="span9">
        9
      </div>
      <div class="span3">
        3
        <div class="row-fluid">
          <div class="span6">
            6
          </div>
          <div class="span6">
            6
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

Earlier, you learned about adding CSS to a widget directly, but you can also add CSS in other places:

• Widget Styles page
• Site Styles page

Widget Styles page

While the various tabs and sections help keep your CSS organized, sometimes you want to see it all in one place. The Widget Styles page combines the CSS from every widget.

To see the Widget Styles:

1. On the left, under Themes, click Widget Styles.

Comments on the page organize the CSS by widget. And any edits that you make on this page will be visible in their proper tab on their proper widget.

/* Widget: Map, CSS ID: office-location */
#office-location.map {
  border: 2px solid @yellow;
}

/* Widget: Map */
.map {
  border-radius:2px;
}

.cool-map {
  float:right;
}

.lonely-map {
  padding:3em;
}

/* Widget: Text */
.text {
  font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
  font-weight: 300;
}

Site Styles page

If you have general CSS (e.g., you want to import a font), add it under your page styles.

To see your page styles:

1. In the upper right, click Page Settings.
2. On the Styles tab, click Advanced Styles.
3. Add CSS here, and then click Save.

Note   To see the changes on your live site, Publish a page or page element.

You can also see a full screen view of these styles on the Site Styles page, which is under Theme > Site Styles.

When you write CSS in the Studio, you can use LESS syntax. LESS extends the functionality of CSS with features that simplify CSS.

When writing CSS in the Studio, you can use LESS CSS syntax. Here’s an example of what that looks like.

.heading {
  a {
    color: @linkColor;
    &:hover { color: @hoverColor; }
    &:visited { color: @visitedColor; }
  }
}

With LESS, you can still write CSS in the standard way. So if you don’t want to use LESS, you don't have to.

An easy way to start using LESS is with variables.

Use LESS variables to easily manage common values in your CSS—like colors, spacing, and font size.

With LESS, you can create and manage variables to use throughout your CSS.

/* First create a variable */
@favcolor: #0981b6;

/* Then use it */
.section { background-color: @favcolor; }

All sites are built on a Bootstrap framework, which means that your site has predefined CSS with LESS variables.

On the LESS Variables page, you can edit these variables. So without digging into the CSS, you can quickly change default colors, fonts, spacing and so on.

Access the page on the left under Theme > LESS Variables.

Quickly change colors, fonts, and spacing on the LESS Variables page—access the page on the left under Theme > LESS Variables.

For example, to change the size of all text on your site:

• Just change @baseFontSize (e.g., 16px), and then click Save.

Custom LESS variables

While you can define variables in CSS as you need them, you can also define and manage them on the LESS Variables page.

Custom variables are available site wide, so you can use them on the Site Styles page and when adding styles to a widget.

To create a custom variable:

1. Scroll to the bottom of the LESS Variables page, and click Add New LESS Variable.
2. Enter a LESS Variable Name (e.g., @favcolor) and a Value (e.g., #427eff), and then at the top of the page, click Save.

You can create custom variables at the bottom of the LESS Variables page.

If you want to compare multiple versions of your site (e.g., with different font sizes or different colors), you can save variables as a theme preset.

Using the LESS Variables page, you can create multiple presets for your site—with different colors, fonts, and custom variables. Then using the Theme Presets page, you can preview and apply the presets.

The Theme Presets page is located under Theme > Theme Presets.

To create a preset:

1. On the LESS Variables page, edit the variables, and then click Save As.
2. On the window that appears, enter a name, and then click OK to create a preset.

To switch between presets:

1. On the Theme Presets page, use the drop-down menu to preview and select a preset.
2. Once you choose a preset, click Save, and then Publish to see the change on your live site.