It’s a common story.
You create a website that you’re proud of and fill it with great content, but the design vision in your head doesn’t match what’s on the screen. You launched the site using a free theme and decide you need a premium theme and stand out from the crowd. You install such a theme and for a little while you’re happy.
But a few weeks go by and you begin to notice that other websites are of course using that exact same theme. This isn’t what you wanted — you wanted to be truly unique. So you go and find a new premium theme. You’re happy until once again you start finding websites using that theme and the cycle repeats itself.
Then you find Canvas and everything changes.
Canvas is our flagship premium theme, but more importantly, it can be made to look completely unrecognizable from its default design without losing any of its functionality. You can make a huge number of design changes with the inbuilt theme options, but with simple CSS hacks and additions to the functions.php file added to your arsenal, you can make make this theme truly unique.
With that said, let’s take a look at some of the best customization hacks you can use in Canvas!
Simple but Effective CSS Hacks
The easiest way to customize Canvas is by adding CSS code to the custom.css area. This lets you manipulate almost every aspect of the site design and goes a long way to creating the unique theme that you want.
In order to make these changes, simply copy the code below and add it to the Custom CSS area in the Canvas Theme Options.
1. Move the Top Navigation
The top navigation is easily missed if left in its default state because it positions that menu above the site logo. To make it more visible you can move it over to the right hand side.
2. Change the Header Image Per Page
This CSS hack lets you change the header image of individual pages — so if for example you have a product page that needs its own special header, or if you want to give each page its own header image, you can use this code.
To use the code you need to replace .xxxx with the specific ID number of the page you want to change.
3. Center the Header Logo
By default your logo sits on the left hand side of the header. That’s fine for most people but if you want to move it to the center of the page, doing so is a piece of cake.
4. Center the Navigation Menu
If you’ve chosen to move your logo to the center of the header you may also want to move the navigation menu to match that style.
If you find that this introduces a sideways scroll on your page use this css instead:
This is not a one size fits all approach as depending on the number of items in your menu and the space it takes you should adjust the 87% accordingly.
5. Remove the Header Completely
It would be an unusual design choice to completely remove the header but it’s your site and you can do whatever you want. If you just want the navigation menus followed by the main body of the page, Canvas can easily oblige with this simple line of code.
6. Remove the Title from All Pages
At the very top of each page of your site in large header tags you’ll see the name of the page. That can be an unnecessary distraction when you are looking for a smooth transition from the header to the body text. So let’s remove them.
7. Remove the Title from Specific Pages
You may not want to remove the title from every page on your site. If you only need to remove the title from a specific page use the following code.
Replace the xxxx with the page ID number. You can use this code multiple times by changing the page ID number with each use.
8. Remove the «Comments are Closed» Text
Comments are a great way to interact with your readers and help build a community, but not every page or post needs to have them enabled. When you close the comments on a post the “Comments are Closed” text is shown instead. This draws attention to the fact that you’ve disabled them and that might not be something you want. Let’s remove it.
9. Change User Avatar Images to Squares
The Canvas theme changes the author profile image and comment images to circular avatars. This looks great in my opinion, but isn’t for everyone. Thankfully, converting them back to the standard square images is simple.
10. Remove the Image Border
While we’re looking at the images in Canvas, you’ll have noticed that every image inserted into a post has a fine gray border. Some people like this, some don’t. If you’re one of the latter then use this code to remove it.
Intermediate Hacks With functions.php
With the above 10 simple CSS hacks you can make the site look completely different from its default design. but if you want to dig a little deeper and customize your theme even further, you need to start using the functions.php file. By adding code here you can make fundamental changes to the structure and functionality of Canvas.
If you plan on adding code to the functions.php file then you should create a child theme. Child themes allow you to make all of these changes without editing the original Canvas files. It also ensures that updates to the framework won’t overwrite all of your hard work. You can use the WooThemes tutorial to help you create a child theme.
11. Widgetize the Header
The header in Canvas has an Advertising section that can be utilized, but if you want to have more control of that that area you should widgetize it. This will let you add almost anything into the right hand side of your header, giving you greater flexibility. You can do so by adding the following code to functions.php:
You then need to add the following code into the Custom CSS area (you will also need to adjust the width and margins to suit your own design choices).
12. Remove the Primary or Top Navigation
Canvas comes with two navigation bars by default. You have the Top Navigation that is above your header and the Primary Navigation below the header. Not everyone needs (or wants) to use both.
You can just add an empty custom menu into that navigation slot, but that still leaves a block of space where a menu should be. Rather than leave that obvious space in the design, let’s remove the navigation bar completely.
You can remove the Primary Navigation with this code:
You can remove the Top Navigation with this code:
13. Adding a Related Posts Area With Thumbnails to a Post
There are plugins that allow you to create an area after each post with related posts from your site. Canvas includes a rudimentary ‘related posts’ feature, if you require a simple solution. To create this area add this code to functions.php:
Then add this code to the Custom CSS Area:
14. Create a Search Box in the Primary Navigation Bar
You can easily add a search box to your sidebar in Canvas but doing so takes up valuable space. Instead, let’s make use of the empty space on the right side of your navigation bar.
Before you add any code to make this change, you need to remove the RSS icon that’s currently there. Do this by going to Canvas > Theme Options > Style & Layout > Primary Navigation and unchecking the «Show Subscribe Link» box at the top of the page.
Once the RSS icon is removed, add the following code into functions.php:
Then add the following code to the Custom CSS area:
15. Show the Full Post for Single Item Search Results
This is a very subtle tweak but is useful for your readers.
When the search box on your site is used the results are presented as a list of post excerpts. With this tweak, if there is only one result from that search, the reader will be taken directly into the post rather than being shown the excerpt.
This cuts down on unnecessary clicks for the reader and makes for a smoother experience.
This is Only the Beginning
Using the built in styling options and these hacks is a tremendous first step in making your site completely unique. We’ve barely scratched the surface of the design hacks available to make Canvas a theme that is exactly what you want it to be.
With that in mind, if you have your own design hacks for Canvas we’d love to read about them in the comments, so fire away!