Uno: Canvas Child Theme

Important: This theme was retired in October 2015 and is not for sale. Documentation is no longer being updated.

A WordPress child theme is a theme that inherits the functionality of another theme, called the parent theme. Child themes allow you to modify, or add to the functionality of that parent theme. —WordPress Codex: Child Themes

Welcome to Uno, our very first Canvas child theme! When customers want to customize the look of their site we always recommend starting with a child theme to preserve customizations and make updating easier, as you do not need to worry about your customizations being lost when you update your parent theme.

In this case, we’ve taken Canvas one step further for you, updating the design and utilizing the child theme, Uno, to it’s fullest extent! To help set this up follow the documentation below and be sure to reference the Canvas theme documentation if you are not familiar with the main features/setup of Canvas.

You can read more documentation on WordPress child themes in the WordPress Codex.

Uno Theme Demo: demo.woothemes.com/uno

Installation ↑ Back to top

To get started you will need to first purchase, download and install the Canvas theme. To learn how to install your theme please reference our documentation here: Installing a Theme.

Once you’ve installed the Canvas parent theme you can then follow the same steps to download, install and activate Uno, the Canvas child theme. After you’ve activated Uno you will notice a new style on your site, compared to the Canvas style you might be used to.

Checking your theme version ↑ Back to top

You can confirm your theme and WooFramework version by going to: Uno > Framework.

Activate your Theme Key ↑ Back to top

After you install your theme, be sure to activate your theme key by downloading and installing the WooCommerce Helper plugin. This will verify your site when contacting support and will enable 2-click updates for quick theme upgrades down the road.

Updating your theme

It is very important to ensure you have the latest version of your theme at all times. This is the best way to proactively troubleshoot issues on your site.

Please reference the WooCommerce Helper Documentation to learn more.

Theme Settings ↑ Back to top

After you’ve installed and activated Uno, you will notice that the side menu says Uno:

Uno-Welcome

This is where you will go to configure your theme settings, you will also see an option to ‘Configure Uno’ on the welcome page.

Go to Uno > Settings to configure your theme.

Uno-Theme-Settings

Take note of the links in the top right corner of the settings where you can quickly access:

  • Documentationfor the theme.
  • Changelogthis is where you see the changes/updates to the theme.
  • Helpthis is a link to our Help Desk where you can search for answers, post in the Community or open a new ticket for assistance with setup or troubleshooting your WooThemes products.
To learn more about theme settings please see the Canvas theme documentation.

To edit settings specific to Uno go to: Uno > Settings > Uno.

Uno-Theme-Settings

If you would like to customize your homepage past the homepage settings, you will want to download and install the Homepage Control plugin.

Disable Child Theme Custom Overrides ↑ Back to top

The first option you will see here will enable/disable the custom child theme styling that comes with Uno. If you’d like to customize the theme design yourself, uncheck this option.

When you install Uno the custom styling for the child theme will automatically override the Canvas theme styling. This includes:

  • Typography Settings
  • Navigation bar styling
  • Background color

To name a few. If you want to use the typography and color settings found on the Canvas Settings pages, you’ll need to disable the Child Theme Custom Overrides first.  This will enable you to use most of the Settings inherited from Canvas, but some of the layout settings from Canvas are not compatible with Uno, and some of the color settings, such as the Navigation colors may require the use of Custom CSS to modify.

Uno also comes with custom homepage features, let’s review those next!

Hero Settings ↑ Back to top

Here is an example from the Uno demo of what the Hero featured area can look like:

Uno-Hero-Product

Here you can set:

  • Hero Background Image
  • Hero Title & Font Style
  • Hero Message & Font Style
  • Hero Button Text & Link

Hero background image

We recommend a minimum width of 1920px for the background image which is set to scale the height based on the browser width in combination with the padding applied to the element via CSS.

If you would like to adjust the height visible with this image you will need to add the following to the custom CSS adjusting the padding as needed:

.full-width .hero {padding: 9.505em 5.874em;}
To help with this type of customization we recommend using Firebug (a Firefox browser extension) or the Chrome/Safari > Inspect Element tool. Tuts+ also has a great tutorial that we recommend called 30 days to learn HTML and CSS

You can quickly add custom CSS to your theme by going to: Uno > Settings > General Settings > scroll down to Display Options > Custom CSS.

Hero Title, Message & Button Styling

To learn more about how to change the Hero title and message background color please see our Knowledgebase article here: Uno – Customize Hero styling.

To change the button color, go to: Uno > Settings > Styling & Layout > General Styling. The Hero button will inherit the button color styles set there.

Uno Homepage Template ↑ Back to top

If you’d like the same Featured Products, Most Recent Products, Latest Blog Posts and Most Recent Comments on the homepage as you see in the Uno theme demo, you will need to setup a new page with the ‘Homepage’ page template. To do this:

  1. Go to: Pages > Add New.
  2. Add a page title (ex. ‘Homepage’)
  3. Go to: Page Attributes > Template just below the publish module to select the Homepage page template.
  4. Publish the page.
  5. Next, go to: Settings > Reading > Front Page Displays and select the Static Page > Front Page as your newly created homepage (instead of the recent posts setting).
  6. Save changes.

To learn more about Page Templates please see our documentation here: Page Templates.

Next Steps ↑ Back to top

Now that you have set your Homepage template you will need to setup your WooCommerce shop to see products on your homepage. Please see our WooCommerce Documentation to help you get started.

Please be sure review the Canvas theme documentation to learn more about how to set up the rest of your site!

WooCommerce - the most customizable eCommerce platform for building your online business.

Back to the top