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!
Check out more Woothemes Tutorials on the Pootlepress Academy
ALSO…
Check out our brand new Menu Pack for Woothemes Canvas
Create beautiful menus with 1 click
Just add the following bits of CSS to your custom.css file (dashboard/appearance/editor) and sit back and marvel at your work.
Share on Facebook, Twitter and Google+
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
.entry img, img.thumbnail { background: none; border: medium none; padding: 5px;} |
#4: Change colour of drop down menus
/* Changes the default background color of the drop down menus */.nav li a:hover, .nav li.current_page_item a, .nav li.current_page_parent a, .nav li.current-menu-ancestor a, .nav li.current-menu-item a, .nav li.current_page_item li a, .nav li.current_page_parent li a, .nav li.current-menu-ancestor li a, .nav li.current-menu-item li a, .nav li.sfHover a { background:#D0D9E0; }/* Changes the hover background, text and text shadow color */.nav li ul li a:hover, .nav li.sfHover ul li a.sf-with-ul:hover { background:#316594; color:#FFFFFF; text-shadow:0 1px 0 #000;}/* Changes the default background color of a drop down menu with a child */.nav li ul li, .nav li.sfHover ul li a.sf-with-ul { background: none repeat scroll 0 0 #D0D9E0; } |
#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;
}
#23: Centre Navigation
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; }
If you want more tutorials check out our Woothemes Canvas Masterclass on the Pootlepress Academy.
"The Academy is a great way to learn Wordpress without trawling through pages and pages of information. Key points delivered in a logical and easy to access way that will get you up and running with wordpress in no time."
“Thank you SOOO much for making the Whitelight videos…they totally solved every question I had. I followed along step by step, and after a little while I had gotten my entire site set up! You saved me so much time and made things so easy…I don’t know how to thank you enough. I think it’s quite safe to say that I would never ever figured out how to get all those Woo-Component steps done unless you walked me through it and showed me exactly what to do.
"I have recently joined the Pootlepress Academy and worked my way through the 15 videos for tutorial 1
"Within a few hours I managed to create the site. Now–for anyone else unsure on joining the Academy I am aged 54 with a little knowledge of WordPress. The video tutorials are easy to follow and understand. Ideal for who wants to work at their own pace!
This list should be added on to the WooThemes website under the Tutorials section!
Quick question: how change you change the background image on a particular page?
One other quick question: how do you choose a featured image for a blog (for the sake of Facebook) but not have it display on the blog post itself? I’m assuming there’s a display: none command but I’m not sure what to prefix it with.
You dont need any specific code. If you you dont want your featured image to display into your single post, just go to Canvas > Theme Options > Dynamic Images…. Untick “Single Post – Show Thumbnail”
Some really code there Jamie, I may use some of them as well.
nice one
deano
Hi thanks for this it’s really helpful but (and this maybe a stupid question but I’m new to wordpress) – where in the custom.css file to you put the code? Thanks!
You may want to go to Appearence > Editor. Look at the very bottom on your right, there you’ll find the custom.css file
Great Post Jamie!
Hi Jamie,
I went to your custom.css file (dashboard/appearance/editor) as recommended but only the canvas.css file is there and it says DO NO EDIT.
So where is the custom.css editor? Regards Brian
Hmmm, Found the custom.css selection at the end of the list of sections to edit.
Went to custom.css, pasted in tweak #3, then saved the edit. It has no visible effect, could this be because its not a thumbnail, Its a bigger image embedded in the main page ( using your upload to post technique to get the image uploaded and get the html snippet).
Regards
Brian
Thank you for posting these tweaks. I am a beginner and just downloaded the canvas theme. I wanted to get rid of the page titles and had an “interesting” experience. I copied and pasted the code in #1 as directed and updated. Nothing changed. Then I deleted your code, updated again, and the page titles were gone! That was great, but, unfortunately a few other things were gone as well. My static home page is fine, but my blog page opens to an error message saying the page is gone….Not a big deal because it’s a brand new website, still in maintenance mode. I have no idea how all this happened, but maybe my experience can be helpful to someone else.
I have an update. I moved the error page out of the menu and made a new blog page. Now all the page titles are back.
Very useful, it helped me with “the remove titles from the pages’.
Good job.
Cheers.
Great post Jamie, some very useful tips there.
I wonder – as a variation of #4, is it possible to style the menu tab backgrounds in *different* colours? (The main backgrounds rather than the drop down elements)
Thanks,
Thea
Remove title from pages also removes the title from the slider and the post grid. Is that supposed to happen?
With all the new styling changes in the new Canvas version 5; some of these tweaks are outdated or no longer necessary.
Recommend an update if time permits.
Thank you.
This is gold!
Nice one mate!
Agreed – great post thanks so much! Canvas is a great framework your css above is very helpful.
YR
Awesome tips!!
I’ll be booking a course in next few weeks to brush up my woo canvas :)
Just a quickie – how can I remove the padding at the top of the content area for a specific page (so the slider sits at the top of page).
Ken :)
I have tried doing #4 and it doesn’t work – i don;t’ know anything about code so i changed the colour in the snippet to one i wanted – that’s all i did and then i copied it to custom css but it doesn’t do anything – i managed to move my bottom nag to right of logo using this method but i’m wondering if i’m not putting something at beginning or end or if i’m supposed to extract something? i want all my top nag drop downs to be white – and as posted by thea above, i’d quite like my nav tabs background colour to change too – can anyone help?
for nag read Nav sorry
Wonderful tweaks! I’m working with #5: Change the header image per page
I was able to get it to work on one page, but not any others. I’ve rechecked the image URL and page ID multiple times. Any ideas for troubleshooting? Thanks!
is there a code to remove the navbar completely? I thought
.page .title {
display: none;
}
would work but it does not.
Get rid of borders in the nav:
#navigation ul.nav > li {
border-right: 0px;
}
Hello there,
May I know how to remove site title and description in Canvas Wootheme?
Thanks and Appreciate your help =)
Regards,
Dennis.
Great ideas. Thank you.
#20 doesn’t seem to work for me. Any idea why?
Can anyone tell me how to change the text in the ‘submit comment’ button under each comments section of a post? Tnx!
All you need is to edit file “comments.php” which is in the root of your theme. Check out rows 18-19. To avoid any possible problems with functionality, never edit text if it has no
‘woothemes’
after it. When you see something like “” then you can edit that text. Otherwise you can easily cause some problems if you translate or change text which is not meant to be changed…
Hi,
Thanks for this awesome WooTheme, it can be highly customized, lots of great options, but I have a small problem that I cant fix.
I want to change text “You are here” from breadcrumbs to something else, not to remove it. I searched through code but after few hours it ended with no results… Which file contain the code for breadcrumbs? Or is it somewhere in language settings?
Thanks a lot.
Hi,
Do you happen to know how I could remove the admin area in Canvas? So I’m talking about the Canvas link in the admin area. Hope you can help me out.
Best regards.
Nice list of tweaks for Canvas. You might want to tweak the first one as the code you have didn’t work for us, so try this:
1: Remove Page Titles
#logo .site-title {display: none !important;}
1a: Remove Page Description
#logo .site-description {display: none !important;}