Still need help? Submit a support ticket.

Using Custom CSS with Canvas Page Builder to style rows and columns

Introduction

Canvas Page Builder allows you to give rows (and only rows) a defined CSS class. This gives you a huge amount of flexibility (as you will see below) to create the site you want as everything within a row (columns, widgets etc) can be styled using custom CSS. 

Please note: that custom CSS is advanced and should only be used by those users who know CSS. While we can support you with how to use custom CSS with Page Builder, we cannot support you on individual custom CSS requests through our support tickets. This is above and beyond the support that your Canvas Page Builder purchase has come with. For further help there is a CSS for beginners video course on the PootlePress Academy.

Step 1 - setting up a CSS class in a Canvas Page Builder row


Create a page in Canvas Page Builder and add a row. Then look for the paintbrush icon to the top right of the row. This is the Row Styling Settings panel. In there there is an option towards the bottom called 'Class'. Think of an appropriate name for your custom CSS class and enter it here. For the sake of this tutorial I will call my class 'orange-row'.

Click 'Done' and update the page. This has now given your row the following CSS class:

.panel-row-style-NameOfClass

so in this case:

.panel-row-style-orange-row

Step 2 - using the new CSS class for your row


Now that a class has been assigned to your row, it opens up a world of possibility.

All you need to do is add some CSS to the class. There are a number of ways Canvas users edit the CSS for their theme:

1. In Canvas > Settings > General Settings you will find a ‘Custom CSS’ option where you can write your CSS. This is the easiest way for novice users.
2. If you use the JetPack plugin it comes with a CSS module which when activated gives you a nice CSS editor under Appearance > CSS
3. If you use a Child Theme like our free Blank Canvas Child Theme, you can add it to the custom.css file there.

Once you have decided where to write your CSS you can simply start adding CSS properties to your row class. So for example if I wanted the row to have a background color I would add the following CSS:

.panel-row-style-orange-row {  
background-color: Orange; 
}

A useful resource CSS properties is  http://www.w3schools.com/cssref/

Please note: While we can support you with how to use custom CSS with Page Builder, we cannot support you on individual custom CSS requests through our support tickets. This is above and beyond the support that your Canvas Page Builder purchase has come with. 

Step 3 - using a row class to style all columns (cells) inside a row

In Canvas Page Builder there are a number of elements that are inside a row. For example columns (sometimes called 'cells') and widgets (where multiple widgets can reside within a cell). First we will look at using CSS to style a cell.

All cells in Canvas Page Builder are defined by the following CSS class:

.panel-grid-cell

Therefore to style all cells in Canvas Page Builder you would simply write some CSS for this class, as follows:

.panel-grid-cell {
background-color: blue;
}

Therefore to apply CSS to all the cells inside a row, you would use:

.panel-row-style-NameOfClass .panel-grid-cell { 
background-color: blue; 
}

Or in this case:

.panel-row-style-orange-row .panel-grid-cell { 
background-color: blue;  
}

Please note - sometimes depending on other CSS in your theme, you may need to use the '!important;' property. So in this case it would be:

.panel-row-style-orange-row .panel-grid-cell { 
background-color: blue !important;  
}

Step 4 - using a row class to style an individual columns (cell) inside a row


Each individual cell (remember: a cell is where widgets reside) is giving a unique CSS id. It looks something like this:

#pgc-9-0-0

To locate the CSS id for the cell you want you will need to use something like the  Inspector in Google Chrome or Firebug for Firefox.

Once you have found the CSS id for your column you can simply use it straight away:

#pgc-9-0-0 { 
background-color: blue;  
}

Please note - sometimes depending on other CSS in your theme, you may need to use the '!important;' property. So in this case it would be:

#pgc-9-0-0 { 
background-color: blue !important;  
}

Step 4 - using a row class to style widgets inside a row

Now we will look at how you can use CSS to style widgets inside a row. 

Without Canvas Page Builder, if you were to use custom CSS to style a widget you would use the following CSS:

.widget {   
margin: 0px;  
}

The CSS above would remove the margins around widgets. However the above CSS would style ALL widgets on your site. Therefore to apply CSS to just the widgets inside a row, you would use:

.panel-row-style-NameOfClass .widget {
margin: 0px;
}

Or in this case:

.panel-row-style-orange-row .widget  {
margin: 0px;
}

Please note - sometimes depending on other CSS in your theme, you may need to use the '!important;' property. So in this case it would be:

.panel-row-style-orange-row .widget  {
margin: 0px !important;
}

Please note: that custom CSS is advanced and should only be used by those users who know CSS. While we can support you with how to use custom CSS with Page Builder, we cannot support you on individual custom CSS requests through our support tickets. This is above and beyond the support that your Canvas Page Builder purchase has come with. For further help there is a CSS for beginners video course on the PootlePress Academy.