While you can edit styles with the Studio’s design tools, you might prefer to edit the CSS directly. The Studio has a variety of tools to help you write and manage CSS.
Note This course assumes that you’re already familiar with CSS. If you’re not, check out the tutorials available from W3Schools.
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:
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:
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:
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:
blog-heading
).
Note Feel free to change the exact selector (#blog-title.heading h2
), but keep the ID part (#blog-title
).
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:
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.
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:
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:
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:
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:
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:
span
class.<div class="row-fluid"> <div class="span4">…</div> </div>
<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>
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:
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:
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; }
If you have general CSS (e.g., you want to import a font), add it under your page styles.
To see your page styles:
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:
@baseFontSize
(e.g., 16px
), and then click Save.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:
@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:
To switch between presets: