UPDATE: We have now updated this list to work with the latest version of WooThemes Canvas. Check out our new 65 tips, tricks and CSS tweaks for WooThemes Canvas post.
The WooThemes 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.
Share on Facebook, Twitter and Google+
[twitter style=”horizontal” float=”left”][fblike style=”standard” showfaces=”false” width=”450″ verb=”like” font=”arial float=”left”][google_plusone size=”standard” annotation=”none” language=”English (UK)”]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;
}
We have now updated this list to work with the latest version of Canvas. Check out our new 65 tips, tricks and CSS tweaks for WooThemes Canvas post.
#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;
}
[hr]
#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;
}
[hr]
#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; }
[hr]
If you want more tutorials check out our Woothemes Canvas Masterclass on the Pootlepress Academy.
We have now updated this list to work with the latest version of Canvas. Check out our new 65 tips, tricks and CSS tweaks for WooThemes Canvas post.
Comments
108 responses to “30 simple (but useful) WooThemes Canvas CSS tweaks”
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”
Hello, I have a featured image but when I share a url on Facebook it shows the logo and not the featured image.
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?
I have the same problem too. I’ve been using this theme for over a year now and never been able to get rid of “Comments are closed”. I’ve tried this tweak and made sure that all the comments sections at canvas>generalsettings>display options are correct, but it still doesn’t work.
I’ve even just tried to insert this snippet into the Custom CSS box at Canvas>General Settings>Display Options, but still no joy. Has anyone got any ideas?
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;}
Hi Jamie,
Came on one of your WP training seminars – it was great! I see you are pretty much a celebrity in the WP community now!
Anyway… I am really struggling to hide the site title and description on my homepage using this CSS code you have provided. Any idea why this might be? I have also tried using the mayne design code instead but still no joy.
anyone know how to round the corners of each link in the main nav bar? none of what i’ve tried has worked
Fantastic post! 1 request… I need custom CSS for full size header. Please help… Forums still down!
[…] There’s not too much out there for Canvas in the wild. WooThemes’ Canvas Showcase will give you ideas for your next Canvas design. I also frequently referenced 30 simple (but useful) Woothemes Canvas CSS tweaks. […]
I come back to this page m,ore often than any other when working on WordPress themes.
Thanks for a wonderful list of helpfulness 🙂
Thank you so much for the list! I agree with the others- Woothemes should post these on their site. Great job!
Thanks! This is the single most useful post I’ve come across in a long time. Ironic that I found this information on YOUR site and not on Woo’s but that’s another issue… 😀
Thanks Todd 🙂
Hi.
I am struggling with a WordPress site with a Canvas on it. It’s a institutional site to-be, and I’ve received it already half-done and with no access to the Woo Support.
My problem is that while Tweak #4 is my current problem and this page offers a solution (Yes!), I haven’t been able to find the access the CSS code. Where do I find it?
Thank you,
Iza.
Hi,
You need to go to Appearance / Editor / custom.css. However if you don’t have admin rights you won’t see this option.
Jamie
Thanks for responding.
I do have admin rights, my Appearance options though are 3: Themes, Widgets, Menus. No trace of CSS. What am I doing wrong?
In case you have not solved this, there is a very small (+) to the left of the “SAVE ALL CHANGES” button at the top of the control panel. When you click the + you will be able to see Custom CSS.
Great notes to find here! Thanks
May i ask how to show the slider in the blog format or homepage of wootheme canvass?
Any idea how I remove the arrow from the drop down menu on the top menu on Canvas? Thanks.
Hi Jamie,
You are a life saver. Seriously, I honestly don’t see why this post is not in the woo tutorials. As a matter of fact I am going to forward this post to them and hopefully they will include you.
Anyway, I have a question for you Jamie. I normally do not publish pages, and I remember on my one site I had an issue with images on pages. As it did not matter I published them as posts.
Now I really need to publish pages and I am finding that after I upload my images, I can adjust them in the editor but when I view the page the pics are large. I am thinking that I am not able to override the Dynamic images. (I need to have it set up as I use a lot of images in my posts)
Is it possible to specifically disable this function on my pages? Or can you think of another trick?
Hope can help,
Regards,
Dita
I too am having trouble getting the first one to work — remove page title. I have added the code to the custom css file and nothing happens. Also tried the alternative code that themaynedesign suggested and that made no difference either. i am just copying and pasting this code at the bottom of the custom css file. Is that right or am I missing something basic?
very helpful code here! Does anyone know how I can center my logo in the header?
Britany, to centre logo try:
#logo {width: 100%;}
#logo a img {margin-left: auto;margin-right: auto;}
Very helpful. I was trying to figure out how to eliminate or reduce the top/bottom padding around my menu items. Is that something you can post?
Many thanks
how can i remove tags below the posts, i think u did 🙂
thanks
Hi,
Great list!
I am wondering how to center the logo in the header. By default it is alligned left, but I would like it centered. This especially looks better on a mobile screen.
Thanks,
Dave
Oh, I missed Matt’s reply to Britany:
Britany, to centre logo try:
#logo {width: 100%;}
#logo a img {margin-left: auto;margin-right: auto;}
I tried it now, but no effect. I added it to the Custom CSS box in the general settings of Canvas.
Is this the correct place Matt?
Somehow I got it working by adding
#logo {width: 60%;}
#logo a img {margin-left: auto;margin-right: auto;}
to the end of custom.css
BUT …. it does not effect the logo when in responsive mode.
Anyone have an idea?
Hi, does anyone have a solution for my logo not centering in responsive mode as described above?
Hey Jamie, wonderful stuff and thanks for all the info, I have a question about scrolling background image, I have tried this but have failed any ideas would be greatly appreciated.
body {
background-color:#bf906d !important;
background-attachment:fixed !important
}
Will Tweak #1 remove the SITE title or the PAGE title?
How can I remove the Site Title and the Site Description from my header? My logo should take the entire space, and I simply don’t want the those items showing over it.
Looking forward to trying some of these out, as I just installed Canvas on my site and am very much liking it so far.
Other question: is there a place to change the width of the Sidebars?
Hi Jamie,
#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;
}
This is ok – it works.
But
#24: Change the background colour of Main Content + padding any content
#main {
background: #fff;
padding:20px;
}
#25: Change Sidebar Background Colour + padding any content
#sidebar {
background: #FFFFFF;
padding:20px;
}
destroys the layout.
I search for hours but do not find any solution.
Perhaps you know an answer.
Merry Christmas and kind regards
Harry
Hi Jamie,
I found a solution that works for me. I give a margin to every element within the #main and the #sidebar section.
Looks like
.category-misc, .entry, .widget,.breadcrumb-trail { margin:5px 20px 5px 20px; }
For headlines I choose
.title { padding: 5px 20px 5px 20px; }
Merry Christmas once again
Harry
Thanks Harry 🙂
Merry Christmas!
Jamie
Wow. Terrific article and thread! Thanks, Jamie and everyone contributing tweaks.
If I may ask: Where does one edit the “Leave a Reply” text ffound on single posts? I didn’t see anything in comments.php and can’t seem to find it anywhere else.
Thank you,
Chris
And happy holidays to you all!
Great tweaks.
I’d like to display an optin form below the header that is only shown on the homepage.
I tried it with hooks but it did not work.
Any tips how this can be done?
Hi,
How can I remove post-meta from blog’s home page, but not from posts? At the home page I only have excerpts.
Best regards,
Jussi
Just wanted to say that this article was fantastic. I wasn’t even looking for this, but fifteen minutes after finding this I’ve already implemented 3 of these and will probably be using a few more. Thanks for this!
Hi bro,
Just wondering if you (or someone here) can add some css to create a nice looking blockquote?
I know Woo has a very nice ‘testimonial blockquote’ and that is the type of thing I need.
This would be good for people who are quoting bits of content from other sites.
Anyone have some css suggestions for this?
Thanks 🙂
martin
#20 doesn’t work for me either. I added it to my custom.css. Should I be putting it somewhere else?
How do you force the menu in woo canvas to use the css class in the menu section. This will be great so that each menu can be styled differently.
Happy New Year.
First of all… Thank you so much for all of these great customizations!!!
I am helping a friend with her site, http://www.ellie-events.com... and we changed the percentages in the Layout Manager to be 80% content and 20% sidebar…and it is working just fine on all the pages BUT the blog page.
The sidebar is still huge on the blog page.
Any ideas??
Individual blog posts are appropriately structured… but the blog roll isn’t.
#Annoying
Jamie,
Apologies if I missed this, but don’t think it’s been asked; is there a way to change the popular posts under the woo tabs so that it’s ranked by views and not by comments? Thanks in advance!
Michael
Hey there, I used the code you posted above to remove “You are here” from the breadcrumbs but it didn’t work. Please advise. Thanks.
How do I remove the space between the bottom of the slider and the page content?
Thanks
Thanks for these tips, I have used a few of them and they have really helped.
Where you have the way to show a different header image depending upon the page, is there a way to do the same thing with posts/categories, and also, is there a way to change the background image or colour depending upon the page, post, category, etc?
This is an awesome resource on Canvas. Canvas is my favorite theme to work with to date. It’s really flexible. Thanks for publishing this.
Some great tweaks here, that I’ve found very useful.
However, I have found a problem.
When using this one:
.page .title {
display: none;
}
It also removes the edit links for the address in WooCommerce.
Great tweaks! I’ve used tweak #25 to change the background of the sidebar. How would I give the sidebar rounded corners?
Thanks for this great list! #16 was exactly what I was looking for and, with a few customization tweaks, it was perfect.
Hi Author,
Your 30 Tricks has really changed my fortunes 🙂 I have proudly finished over 50 websites with Canvas and all Credit goes to your tricks! I owe my success to you Sir.
I have a question, how can I use a different background for homepage and different for inner pages
I see on meta manager is only for blog page(front)/ home page, not for single post. On the section “Read more” area below posts, that’s it – only for front part, not for single post.
My programmer is trying to persuade me to move to .
net from PHP. I have always disliked the idea because of the
costs. But he’s tryiong none the less. I’ve been using WordPress on several websites for about
a year and am worried about switching to another platform.
I have heard excellent things about blogengine.
net. Is there a way I can import all my wordpress posts
into it? Any help would be greatly appreciated!
Hi
i have a woothemes theme but am having issues moving the menu to under the logo. On the org wootheme they use a text logo which is thin meaning the menu sits on the same level to the write. However the logo i need to add is more potrait size and so expands the header down which is fine. But the stupid nav sits in a locked position at the top. I have tried to edit the style.css sheet but cant seem to shift it down. Has anyone any tips that could help?
thanks
Hi
Thanks for shearing the tips
i use these tips and get awesome results
please any body tell me how to verify “SUBSCRIBE / CONNECT” in canvas theme.
Thanks
It’s a pity you don’t have a donate button! I’d most certainly donate to this excellent blog! I suppose for now i’ll settle for bookmarking and adding your RSS feed to my Google account.
I look forward to brand new updates and will share this site with
my Facebook group. Chat soon!
Is there any way to remove the border around tables?
Extremely useful…Thank You!
You can now also get the list of Google Fonts to update dynamically as new fonts are added, with this free plugin: http://wordpress.org/extend/plugins/google-fonts-for-woo-framework/
This works for all Woothemes themes that use the woothemes framewwork
Thanks for sharing Dan 🙂
I realize this was probably written with a previous incarnation of the them in mind, but I am trying to use #10 (remove space between header image and primary nav) and I cannot get it to work. Does anyone know the correct way to do this?
Could you update CSS tweaks for Canvas 5.2.3?
Hi,
Yes I’m working on it 🙂
Jamie
Update please custom canvas css tweaks for Canvas 5.2.4 🙂
Will do soon John 🙂
I really need these tweaks updated for Canvas 5.2.4, I just subscribed hoping that I’d get everything I need to move forward with my website but I’m disappointed to find that some of these tweaks are out of date, and not being very technical, I’m worried about trying them and then messing up my site, so I’m back to square one. Please update soon.
Hi Lauren,
An big update is coming this weekend 🙂
Jamie
Fantastic list. I implemented 4 of these right away. Thanks!
I want to remove the facebook icon from the top of my website and I am using wordpress canvas theme. the problem is that the facebook icon is display from page 1 to page 32 on the top of website and then from page 32 it doesn’t display. please anyone guide me that what should i do? Thank You.
How to add post title above thumbnail on Homepage, categorie page?
Removing the page titles does NOT work for me. I have tired everything.
#logo .site-title {display: none !important;} did not work either.
Some please let me know if you got this to work.
Thanks!
how to change the background of the “index”?
[…] 30 simple (but useful) Woothemes Canvas CSS tweaks by Pootlepress – I use the Canvas Theme from Woo Themes for many of my websites. I think Canvas is quite possibly the very best WordPress Theme currently available. But – it’s not perfect! Although it’s very powerful, I also find customizing it can be very frustrating. So this is a great and useful list of stuff that really should be much easier to find in the Canvas documentation! […]
Hello,
Do you know how to disable the Posts Grid (Magazine Grid) function completely? I like the options the Magazine template offers but want to remove the grid format. I’d simply like all of the posts from the home page to look like the Featured posts.
Would appreciate any help!
Thanks
Thank You, Thank You, Thank You… you have the tweaks I needed!
I think this is the best post of canvas, always fix my problems 🙂
very nice post
Thanks Daniel!
Hi
When I add the line:
.post-meta { display:none; }
to my custom.css nothing happens. Is there something I am doing wrong?
Regards
Wayne
Hey guys, again, great info.
I used:
.page .title {display: none;}
to remove page titles, but it removes the titles of each blog post from the blog feed page as well.
Is there a way to remove page titles everywhere, but keep the titles of the blog posts on the blog roll?
Thanks!