≡ Menu

Customizing the Canvas Theme

img

WooThemes Canvas Tutorial Part 1 – How to Customize the Canvas Theme

Welcome to the first tutorial in our series on how to build a professional magazine style site with the Canvas theme.  Canvas is a premium theme for WordPress created by WooThemes.  To date, it’s probably their most flexible, easy to customize theme.  As you’ll see, with Canvas it’s possible to shape and customize your WordPress site in just about any way imaginable.  No need to modify PHP files or tweak CSS.  Huge levels of customization can be achieved all through the Canvas Theme Options control panel in the WordPress admin.canvas theme custom logo Customizing the Canvas Theme

Throughout this Canvas theme tutorial series we’ll build our demo site, OhCecelia.com, from start to finish into a magazine style blog.  We’ll try to record all of the important steps in building and customizing the site as we go.  Hopefully you’ll follow along with us and feel free to ask questions by leaving Comments on any of the Canvas theme tutorials.

Getting Started with the Canvas Theme

After you’ve installed and activated Canvas you’ll want to take a few minutes to familiarize yourself with the Theme Options settings.  You’ll also want to make sure that you’ve installed all of the essential plugins that go along with any WordPress site.  After doing that, you’re ready to begin customizing the Canvas theme and you should start by uploading a custom logo.

Uploading a Custom Logo with the Canvas Theme

Canvas makes it easy to upload a custom logo as you’ll soon see.  The logo on our demo site is 308px x 95px in size.  However, your logo dimensions can be whatever you’d like.  Go ahead and play around with different sizes until you find the right fit for your site.

Here’s how to upload your custom logo…

In your WordPress admin go to Canvas Theme Options > General Settings > Quick Start > Custom Logo > click Upload and select your logo > click Save All Changes

On the same page (General Settings > Quick Start) you can also upload a custom favicon.  The dimensions of your favicon should be exactly 16px x 16px.  Finally, you also have the option of pasting your Google Analytics tracking code in the “Tracking Code” box which you should definitely take advantage of.

How to get Quality Custom Logos Made on a Budget

As you can see by the logo on our demo site, OhCecelia.com, I’m definitely not a graphic designer.   I almost always rely on freelance designers for logo creation.  The best place that I’ve found for quality custom logos is Fiverr.com.  For as little as $5 you can get a professional logo created for your Canvas site.  For more tips on logo creation check out our article on “The Importance of a Great Looking Logo“.

Ideas on how to Choose an Overall Color Scheme for your Site

When deciding on an overall color scheme for a new site I like to stick with 3 or 4 colors.  Usually, I use the colors in my logo throughout the site to make everything look uniform.  If you have a hard time deciding on a color scheme, look at other sites that you visit often to get ideas.  Or, think of your favorite sports team and use the colors in their logo as the color scheme for your site.  Baseball, Football, Soccer and basketball teams typically have good looking uniforms so copy their colors.

Canvas Theme Typography and Google Fonts Integration

The Canvas theme makes it possible to control the typography throughout every section of your site.  For example, your H1 font can differ from your widget title font.  Or your primary navigation font can differ from your Post/Page font.  More importantly, Google Fonts is integrated with Canvas which gives you a whole new level of typography customization not found in other WordPress themes.

Google fonts are open source non-traditional fonts that add a new level of beauty and originality to your WordPress site.  You no longer have to use boring traditional fonts such as Arial, Verdana, Georgia or Courier to name just a few.  With Google Fonts you have hundreds of fresh fonts at your disposal.

Canvas Theme Boxed Layout

The Canvas theme makes it easy to create a boxed layout for your WordPress site.  Putting a box around the perimeter of the site is as easy as checking a few boxes in the Canvas Theme Options settings.  More specifically, here’s how to enable the boxed layout for your Canvas site…

In your WordPress admin go to Canvas > Theme Options > Layout > click on “Boxed Layout” > at the top of the page check the box that says “Enable the boxed layout style” > scroll down to the bottom of the page and check the box that says “Enable box shadow” > click Save All Changes

Play around with the thickness of the box by adjusting the “Box Border Top/Bottom” and “Box Border Left/Right” settings.  The boxed layout can be any color and thickness that you desire.  You also have the ability to change the background color of the boxed in portion of your site.

Teddy Triton

I'm a blogger and the founder of UploadWP.com. Upload WP was originally created as a training tool for my Flippa.com clients. Having bought and sold a large number of WordPress sites on Flippa, I needed an effective and efficient way to teach people how to make updates to their new sites. Upload WP was the answer and the site has since grown into a leading WordPress Tutorials destination. I enjoy helping people solve their WordPress related issues. If you have any questions or a WP issues that you need help with, please leave a comment below and we'll do our best to help.

View all contributions by

{ 8 comments… add one }

  • Cheap North Face December 3, 2012, 3:07 am

    I love what you guys are up too. Such clever work and exposure! Keep up the awesome works guys I’ve added you guys to blogroll.

    Reply
  • Mark Phillips February 6, 2013, 10:21 am

    Hi,

    I am working on a clients website, using Wordpress/Canvas theme.

    My client is keen to add some new google fonts to the existing list supplied within Canvas. To be exact, he wants to use a certain font for the primary navigation bar.

    Do you have any tutorials on this or could you point me in the correct direction to install and select the chosen font?

    Much appreciated
    Mark

    Reply
    • Teddy Triton

      Teddy Triton February 6, 2013, 11:11 pm

      Hi Mark,

      Thanks for your question. We do have a tutorial on WordPress and Google Fonts. Here’s the link to our Google Fonts tutorial…

      Google Fonts Tutorial

      Please let me know if this helps answer your question.

      Thanks,

      Adam

      Reply
  • Michael November 17, 2013, 1:51 pm

    Hello Adam,
    Have been looking for a Theme and going nuts. Most look good till you try to customize something and I hit the wall. Got used to Thesis then they upgraded and its like learning all over.
    Is Canvas your top choice ?
    Thanks

    Reply
    • Teddy Triton

      Teddy Triton November 18, 2013, 8:09 am

      Hi Michael,

      The type of theme you choose really depends on what you're trying to accomplish. For example, if you're planning on adding on a store to your current site, TheSnorelessPillow.com, then you should look at a woocommerce integrated site like WooStore, Mystile, Coquette or Wootique. All of them can be customized to an extent via the Theme Options panel. If you're starting new, then Canvas is a good option because its probably the most flexible of all the woocommerce integrated themes. I know I didn't give you a specific answer and that's because it really just comes down to choosing a theme that looks closest to what you're going for and then figuring out how to customize it from there.

      Reply
  • melino November 26, 2013, 1:13 pm

    I bought wootheme canvas and wanted to use Magazine format but having problem with configure the home and magazine into primary navigation. Do you have tutorial on how to configure existent website?

    Reply
    • Teddy Triton

      Teddy Triton November 26, 2013, 4:28 pm

      Hi Melino,

      Make sure your Reading setting are set to a Static page. To double check that do the following… In the WordPress admin go to Settings > Reading > for "Front Page Displays" select the "A Static Page" radio button > front page select Magazine.

      Also, check your Menus setup. To do that go to Appearance > Menus > there you can control the display of your Primary Navigation

      Reply
      • melino November 28, 2013, 6:57 pm

        Thanks Teddy, all sorted but having trouble with displaying latest articles published through Post and the images are not even. Do I need certain dimension for image?
        Anyway, your videos are very helpful.

        Kind regards
        Melino

        Reply

Leave a Comment