The Canvas theme framework from Woothemes is in my view, the most flexible and powerful WordPress theme available.

You can do so many cool things with Canvas without having to dive into any code. However, there are times when you’ll want to tweak Canvas and with that in mind, I’ve put together the following list of 30 useful CSS tweaks.

Note: many of these CSS customisations have been sourced by trawling through the woothemes forums in an attempt to include the most popular and useful requests. If you have your own useful Canvas CSS tweak, please let me know and I will add it to the list!

Just add the following bits of CSS to your custom.css file (dashboard/appearance/editor) and sit back and marvel at your work.

30 Canvas CSS tweaks

#1: Remove Page Titles

.page .title {
display: none;
}

#2: Remove page title from a specific page
Change the page id 200 for this one to work

.page-id-200 .title {
display: none;
}

#3: Remove image border

#4: Change colour of drop down menus

#5: Change the header image per page

To change the header background image per page use the following. xxxx is whatever the page id number is for the page.

.page-id-xxxx #header {
    background: url("imageurl") no-repeat scroll 0 0 transparent; }

#6: Remove next/previous buttons on Magazine slider

  .magazine #loopedSlider a.previous, .magazine #loopedSlider a.next {
  display: none;
}

#7: To change the colour and transparency of block text on sliders

#loopedSlider .content p, #loopedSlider .content h2 {
background:rgba(255, 255, 255, 0.7);
}

#8: Remove white space above the slider

#navigation {
margin-bottom: 0px;
}
.home .breadcrumbs {
margin-bottom: 0;
}

#9: Remove breadcrumbs from your homepage

.home .breadcrumb {
    display: none;
}

#10: Remove space between Header and Primary Navigation

#logo a img {
    display: block;
}

#11: Align top menu to the right

#top-nav {
    float: right;
}

#12: Change the background colour of Sliders

#loopedSlider .slides { background: #EEE;}

#13: Add padding to Wootabs

#woo_tabs-3.widget {
    padding: 0;
}

#14: Remove the footer on the homepage

.home #footer-widgets {
    display: none;
}

#15: Add underline hover to navigation items

.nav a:hover {
    text-decoration: underline;
}

#16: Customise caption style

.entry .wp-caption-text {
    -moz-font-feature-settings: normal;
    -moz-font-language-override: normal;
    -x-system-font: none;
    font-family: Arial,Helvetica,sans-serif;
    font-size: 11px;
    font-size-adjust: none;
    font-stretch: normal;
    font-style: normal;
    font-variant: normal;
    font-weight: normal;
    line-height: 22px;
    margin-bottom: 0;
    margin-left: 0;
    margin-right: 0;
    margin-top: 0;
    padding-bottom: 0;
    padding-left: 0;
    padding-right: 0;
    padding-top: 0;
    text-align: center;
}

#17: Delete Author and Post date

.post-meta { display:none; }

#18: Add rounded corners to Portfolios

#portfolio img {
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
}

#19: Add an image to the footer area

#footer {
background:url(<a href="http://link-to-your-image.com/image.jpg" rel="nofollow">

http://link-to-your-image.com/image.jpg</a>);

}

#20: Remove ‘comments are closed’ message

.nocomments {
display: none;
}

#21: Remove the words ‘You are here’ in breadcrumbs

.breadcrumb-title {
    display: none;
}

#22: Centre ‘Comments and Continue reading’

a.more-link {
    display: block;
    text-align: center;
}

.post-more {
    text-align: center;
}

Change the value 400 to center

#main-nav {
float: none;
margin: 0 auto;
width: 400px;
}

#24: Change the background colour of Main Content

#main {
   background: #fff;
}

#25: Change Sidebar Background Colour

#sidebar {
    background: url("imageurl") repeat scroll 0 0 #FFFFFF;
}

#26: Remove the Header (completely!)

#header {
    display: none;
}

#27: Remove Space between Header and Navigation

#header {
    background-position: center bottom;
}

#28: Change the default height of the Magazine Grid

.magazine .block { min-height: 400px; }

#29: Change font for a single post

1066 is the id of the post in question

.postid-1066 .entry, .postid-1066 .entry p {
font: normal 16px/1.5em Antic;
color: #555;
}

#30: Change Category link colours

.post-meta a:link, .post-meta a:visited, .post p.tags a:link, .post p.tags a:visited
{ text-decoration: underline; color:#888; }

Zoe Maxwell

Zoe Maxwell is a free-lance photographer in London. This site features Zoe’s photography with a beautiful full screen slider for the home page and individual galleries for each of her projects.

“After putting off getting someone else to build a website for years, mainly because I couldn’t get my head around not being able to manage the content myself, learning how to use WordPress seemed like the answer. I feel very fortunate that I came across Pootlepress, followed my intuition and booked a one-day website building course with Jamie. Jamie’s approach, support, knowledge and personality have made the whole process a joy. Leading up to the day he was on email to answer all my questions and recommend possible themes, the day was really fun not to mention productive – in a few hours I had a website I really liked and actually understood, and the follow-up support has been fantastic. I would recommend the course 100%. Thank you Jamie!”
Zoe Maxwell

www.zoemaxwell.com

Popsy and Peanut

Popsy and Peanut is an online shop built with woocommerce from woothemes. It features a beautiful product slider on the home page and full integration into paypal for online payment. It has full shopping cart functionality and over 200 products.

“I am absolutely delighted with the very professional-looking website that Jamie managed to produce in one day! I also had the opportunity to develop my own skill set to enable me to maintain the website myself. The perfect solution if you are a start-up business looking for an efficient and cost-effective e-commerce solution. Would highly recommend!”
Jo Potter – Owner

Launching soon at www.popsyandpeanut.com

Princess and the Pram

The Princess and the Pram is a great new blog that has just launched in London. We’re really proud of it’s lovely clean design that really lets the great content shine out.

“Feeling baffled after reading some WordPress guides I knew it would take me an age to get my blog to a state I would be happy with it. Instead after googling WordPress training I came across Pootlepress and booked Jamie. In less than 5 hours of arriving at my door my blog was up and running and looking fantastic. Super patient and clear Jamie is a great teacher who has instilled confidence in me to be able to manage my own site competently and on my own. Not being massively technically minded no question seemed too small or ignorant and Jamie has been a support ever since. Would highly recommend if you want your website up and running and don’t want to get lost on the way!”

www.princessandthepram.co.uk

Course contents
Featuring: 6 videos
Running time: 31 mins

• Google Search results explained
• How Google ranks your site
• A great way to do your keyword research
• How to check on your competitors
• How to optimise your WordPress website
• How to use the ‘Yoast SEO plugin’ for WordPress
• How to track your ranking
• How to check your site for SEO problems
• An SEO checklist

For existing Academy members click here to get started.

For those of you interested in joining, click here to join the Academy. It costs just £49.95 per year and gives you access to all our online training tutorials, plus support through our members only support forum.

Current tutorials include:

1. WordPress Essentials
2. How to add a Forum to your WordPress website
3. How to build an Online Shop with WordPress
4. Woothemes Canvas Masterclass
5. Whitelight theme tutorial
6. How to build a Business Directory with WordPress
7. SEO and WordPress

The tutorial is free for all Pootlepress Academy members. The Academy costs £49.95 per year to join, and this give you access to all our online training courses, plus access to our ‘members only’ support forums. Click here for more information on the Academy.

• Introduction to the theme
• Installation and configuration
• A look at Listing options
• How to create your directory
• How to organise listings
• How to configure your home page
• How to add a featured slider
• How to customise the design
• How to customise your menu
• How to customise search options
• How to create an image gallery for each business listing
• How to create an ‘upload your listings page’

Example WordPress Essentials video tutorial

Here is a sample video from the WordPress Essentials tutorial. This video is best watched full screen by clicking this icon once the video is playing.

The Woothemes Whitelight theme tutorial includes everything you need to know to build a great looking site for your business or organisation.

The Whitelight theme features a clean design, a customized modular homepage, an image slider, and integrated e-commerce with WooCommerce. Whitelight is a responsive theme – this means it will flex to fit the device it is being viewed on (automatically). Check out the website that I built to put together this tutorial www.pootlepress-sailing.co.uk. Also be sure to check it out on your mobile phone or ipad!

Woothemes Whitelight theme course contents

• Introduction to the theme
• Installation and configuration
• How theme options work
• Setting up components
• How to set up your homepage
• How to add widgets to your homepage
• How to set up features and blog posts on your homepage
• How to insert a slider
• How to personalise the design
• How to upload your own logo
• How to set up menus
• How to set up your own shop

If you would like to join the Pootlepress Academy click here to join. It costs just £49.95 per year and gives you access to all our online training tutorials, plus support through our members only support forum.

Whitelight is one of our favourite WordPress themes and includes a fully responsive design, featured slider, custom homepage, optional integrated Woocommerce, custom typography, custom widgets and styling options so that you can personalise your website.

For more information on joining our Academy visit our Pootlepress Academy page.

We have also just announced new dates for our next Cheltenham, Manchester, Edinburgh and London WordPress training courses and these can be found below. If you would like to book place please visit here Learn WordPress in 1 day.