Top Navigation Menu

Customize Sidebar Widths & Fonts Canvas Theme

Customize WooCommerce Canvas Theme
Right and Left Sidebar Widths and Fonts

Create an eCommerce Store Part 5

  • We will setup the WooCommerce Canvas Theme to have 2 sidebars and a main content/product area.
  • We will also customize some the fonts and go over how you can customize all the fonts in Canvas.
  • We will introduce a new free plugin WP Editor that will make for better code editing of our Custom Canvas Child Theme

Add Sidebars & Customize the Widths of the Sidebars

We can add 2 sidebars pretty quickly and simply within our Child of Canvas Theme settings. These settings are the exact same as the Canvas Theme settings. However, the Canvas Theme does not provide a way to adjust the widths of our sidebars and content/product area. We will make these changes within our Canvas Child Theme style.css.

If you have been following along, then you have already created a Child Theme for Canvas which we did in part 3 of this series.

Custom Canvas Child Theme

If you are jumping in on this video, then I am providing the CSS code snippets for your Custom Canvas Child Theme style.css file below. I am also providing the entire Custom Canvas Child Theme as it is up to the point at the end of this video, zipped up, so you can simply download and install the Custom Canvas Child Theme on your WordPress site. This will include the functions.php and the style.css, both of which are required. Just install the canvas-child folder with all its contents to wp-content > themes. You can download it here:

Canvas Child Zip

Customizing Fonts

We will customize some of the fonts within our Canvas Child Theme settings. These are the exact same settings as the Canvas Theme.

CSS Code Snippets Used in this Video for the Canvas Child Style.css

@media only screen and (min-width: 980px){  .three-col-left #main-sidebar-container, .three-col-middle #main-sidebar-container, .three-col-right #main-sidebar-container {      width: 77.87%;    }  }  @media only screen and (min-width: 980px){  .three-col-left #main-sidebar-container #main, .three-col-middle #main-sidebar-container #main, .three-col-right #main-sidebar-container #main {      width: 72.36%;    }  }  @media only screen and (min-width: 980px){  .three-col-left #main-sidebar-container #sidebar, .three-col-middle #main-sidebar-container #sidebar, .three-col-right #main-sidebar-container #sidebar {      width: 25%;    }  }  @media only screen and (min-width: 980px){  #sidebar-alt {      width: 20%;    }  }  

Do You Need a Copy of the Canvas Theme so you can follow along?

I am providing the viewers of this series a free copy of the Canvas Theme so you can follow along. Simply use this coupon code at checkout: ecommerce and you will get it for free.

Visit for Free Web & Graphic Design video tutorials.


No comments yet.

Leave a Reply