Below are 65 tips, tricks and CSS Tweaks to help you customise the Canvas Theme from WooThemes.
We will add further tweaks and tips to this post as we find them. If you have your own tweaks please let us know and we will add yours to the list. We’ve done our best to test these, but if you find any problems, please post them in the comments box.
Tweaks listings
- Header
- Add social media icons to header
- Add phone number and email to header
- Add Search Box to Header
- Change the header image per page
- Centre logo
- Remove the Header (completely)
- Move the top Ad position in Header
- Change the header image per page
- Menus / Navigation
- Add Login / Logout to Primary Navigation
- Add Login / Logout to Top Menu
- Center menus
- Centre top menu
- Make menu transparent
- Move menu to the right of logo
- Make navigation fit box layout width
- Change drop down menu font color
- Change drop down menu font size
- Add a search box to the primary navigation
- Align top menu to the right
- Pages / Posts
- Remove Page titles
- Remove Home page title
- Add a background color to your posts (and some padding)
- Remove Page title from a specific page
- Remove ‘comments are closed’ message
- Remove the words ‘You are here’ in breadcrumbs
- Change the font for a single post
- Change category link colors
- Remove image border
- Remove breadcrumbs from your home page
- Change sidebar background color
- Make box layout transparent
- Sliders
- Remove arrows on sliders
- Move slider text from top left
- Change transparency on sliders
- Reduce space between Menu and Slider
- Increase the width of the text on Sliders
- Change the color of slider text
- Change the color and size of slider arrows
- Customising Wooframework Shortcode
- Add boxes around your columns
- Add background color to your columns
- Fix the size of your boxes
- Add rounded corners to your boxes
- Set minimum and maximum height to boxes
- Create gradients for your Info boxes
- Customise the color of Info Boxes
- Change the color and size of Blockquotes
- Add a closing Blockquote
- Footer
- Add a background color to entire footer widgets
- Add terms and conditions to footer
- Add an image to the footer area
- Misc
- Fix for BBPress and Canvas (5.2 and higher)
- Stretch background image to fit entire screen
- Enable Pinch and Zoom in Iphone / Ipad
- Make Avatar images square
- WooCommerce: Remove product buttons from Shop page
- Change the default number of columns in the Product Page
And here are the tweaks…
Header
Add Search Box to Header
Follow this link and paste code in functions.php Click to get code
Then place the following code in custom.css
.header-search {
position: relative; top: 20px;
}
.header-search .icon-search {
position: absolute;
top: 8px;
right: 9px;
}
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.
Place the following code in custom.css
.page-id-xxxx #header { background: url(“imageurl”) no-repeat scroll 0 0 transparent; }
Centre logo
Place the following code in custom.css
#logo { float: none; margin: 0 auto; width: 300px; }
Remove the Header (completely)
Place the following code in custom.css
Move the Top Ad position in Header
Place the following code in custom.css
#topad { margin-top: 1.8em; }
Change the header image per page
Place the following code in custom.css
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; }
Add phone number and email to header
Enable top ad space and simply put text in. Style according.
Add social media icons to header
Use the Canvas Advanced plugin written by Stuart Duff (WooThemes Ninja)
Menus / Navigation
Add Login / Logout to Primary Navigation
Follow this link and the place the code in functions.php Click to get code
Add Login / Logout to Top Menu
Follow this link and the place the code in functions.php Click to get code
Centre primary navigation menu
Place in custom.css
#navigation {
position: relative;
}
#main-nav {
clear: left;
float: left;
list-style: none;
margin: 0;
padding: 0;
position: relative;
left: 50%;
text-align: center;
}
.nav li {
display: block;
float: left;
list-style: none;
margin: 0;
padding: 0;
position: relative;
right: 50%;
}
.nav li:hover, .nav li.hover {
position: relative;
}
.nav li ul li {
left: 0;
}
Centre top menu
Place in custom.css
ul.nav { left: 20%; }
Make menus transparent
To choose and create your transparent colors go to http://hex2rgba.devoth.com
Put directly in Primary Navigation background color in WooThemes Canvas Theme Options
Move menu to the right of logo
Place the code below to functions.php
add_action( 'init', 'woo_custom_move_navigation', 10 );
function woo_custom_move_navigation () {
// Remove main nav from the woo_header_after hook
remove_action( 'woo_header_after','woo_nav', 10 );
// Add main nav to the woo_header_inside hook
add_action( 'woo_header_inside','woo_nav', 10 );
} // End woo_custom_move_navigation()
Then add the following code to custom.css
@media only screen and (min-width: 768px) {
#navigation {
float: right;
width: auto;
clear:none;
max-width: 600px; // This can be changed
}
}
Make navigation fit box layout width
#navigation {
margin-left:-30px;
width:978px;
}
Change drop down menu font color
/* Changes the default background color of the nav menus */
#navigation ul.nav > li a:hover {
background: #316594;
color: #FFFFFF;
}
/* Changes the default background color of the drop down menus */
#navigation ul.nav ul {
background: #D0D9E0;
}
/* Changes the default background color of a drop down menu with a child */
ul.nav li ul li a:hover {
text-decoration: none;
background: #316594 !important;
color: #FFFFFF !important;
}
Change drop down menu font size
ul.nav li ul li a {
font-size:20px;
}
Add a search box to the primary navigation
Add to code found in this link to functions.php Click to get code
Add to Custom.css
#nav-search .icon-search {
position: absolute;
right: 9px;
}
#nav-search {
margin-right: 9px;
top: 10px;
padding-top:5px;
}
Align top menu to the right
#top-nav {
float: right;
}
Pages / Posts
Remove Page titles
.page .title {
display: none;
}
Remove Home page title
.home .title {
display:none;
}
Add a background color to your posts
.post {
background: none repeat scroll 0 0 white;
padding: 10px;
position: relative;
}
Remove Page title from a specific page
Change the page id 200 for this one to work
.page-id-200 .title {
display: none;
}
Remove ‘comments are closed’ message
.nocomments {
display: none;
}
Remove the words ‘You are here’ in breadcrumbs
.breadcrumb-title {
display: none;
}
Remove image border
.entry img, img.thumbnail {
background: none;
border: medium none;
padding: 5px;
}
Remove breadcrumbs from your home page
.home .breadcrumb {
display: none;
}
Change sidebar background color
#sidebar {
background: url(“imageurl”) repeat scroll 0 0 #FFFFFF;
}
Make box layout transparent
#wrapper {background: #fff; background: rgba(255,255,255,0.5) !important;}
Change the color of the box background
#wrapper {background: #000; background: rgba(0,0,0,0.7) !important;}
Sliders
Remove arrows on sliders
a.flex-prev, a.flex-next {
display: none;
}
Move slider text from top left
Change left and top values to suit
.business #loopedSlider .content p {
max-width: 980px;
}
#loopedSlider .content {
background: none repeat scroll 0 0 transparent;
left: 300px;
position: absolute;
top: 300px;
}
Change transparency on sliders
.business #loopedSlider .content h2 {
background: none repeat scroll 0 0 rgba(0, 0, 0, 0.1);
}
Reduce space between Primary Navigation Menu and Slider
#navigation {
margin-bottom: 1em;
}
Increase the width of the text on Sliders
#loopedSlider .content h2 {
max-width: 980px;
}
Change the color of slider text background
Change the rgba values to suit
#loopedSlider .content p, #loopedSlider .content h2 {
background: none repeat scroll 0 0 rgba(0, 100, 0, 0.7);
}
Change the color and size of slider arrows
Change values in color: rgba(0, 0, 0, 0.6); to suit, also change font size to suit
a.flex-prev:before, a.flex-next:before, #post-gallery .pagination .jcarousel-prev:before, #post-gallery .pagination .jcarousel-next:after {
color: rgba(0, 0, 0, 0.6);
font-size: 24px;
left: 0;
position: absolute;
top: 2px;
}
Customising Wooframework Shortcodes
Add boxes around your columns
.twocol-one {
width: 43%;
border: 1px solid #D5D7D9;
border-radius: 3px 3px 3px 3px;
padding: 10px;
background-color: white;
}
Fix the size of your boxes
. twocol-one {
height:600px;
}
Add rounded corners to your boxes
. twocol-one {
border-radius: 22px;
}
Set minimum and maximum height to boxes
. twocol-one {
min-height:200px;
max-height:400px;
}
Create gradients for your Info boxes
The CSS for the background graduation has been created at www.colorzilla.com. This CSS needs to be pasted in your custom.css file. Once you have updated your custom.css, then all you have to do is create a new info box and you will see the results.
.woo-sc-box.normal {
padding: 9px 15px;
border-width: 1px 1px;
border-style: solid;
border-color: silver silver -moz-use-text-color;
border-style: solid solid solid;
background: -moz-linear-gradient(top, rgba(0,0,0,0.03) 0%, rgba(0,0,0,0) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,0,0,0.03)), color-stop(100%,rgba(0,0,0,0))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(0,0,0,0.03) 0%,rgba(0,0,0,0) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(0,0,0,0.03) 0%,rgba(0,0,0,0) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, rgba(0,0,0,0.03) 0%,rgba(0,0,0,0) 100%); /* IE10+ */
background: linear-gradient(to bottom, rgba(0,0,0,0.03) 0%,rgba(0,0,0,0) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr=’#08000000′, endColorstr=’#00000000′,GradientType=0 ); /* IE6-9 */
}
Customise the color of Info Boxes
.woo-sc-box.normal {
background: none repeat scroll 0 0 red;
border-color: #CCCCCC;
padding: 9px 15px;
}
Change the color and size of Blockquotes
.entry blockquote:before {
color: red;
font-size: 3em;
left: 0;
position: absolute;
top: 0.5em;
}
How to add a closing Blockquote quotation mark
.entry blockquote:after {
color: #999999;
content: “”;
font-family: “FontAwesome”;
font-size: 2em;
right: 0;
position: absolute;
bottom: 0.5em;
float:right;
/* Safari */
-webkit-transform: rotate(-180deg);
/* Firefox */
-moz-transform: rotate(-180deg);
/* IE */
-ms-transform: rotate(-180deg);
/* Opera */
-o-transform: rotate(-180deg);
/* Internet Explorer */
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
}
Footer customisation
Add a background color to entire footer widgets
change background color to suit
#footer-widgets {
background:black;
padding:20px;
margin-left:-30px;
margin-right:-30px;
}
#footer {
background:black;
color:white;
padding:20px;
margin-left:-30px;
margin-right:-30px;
}
Add terms and conditions to footer
To create your html, first create in a post or a page. Then click on the text tab, copy your html and paste in Canvas Theme Options, Styling and Layout, Footer customisation.
Add a background image to the footer area
#footer {
background:url(
http://link-to-your-image.com/image.jpg);
}
Misc
Fix for BBPress and Canvas (5.2 and higher)
Matty Cohen from WooThemes provided the fix for this one 🙂
Add a file called “bbpress.php” into your child theme. This file can be downloaded here: https://gist.github.com/mattyza/1b01583441b11c8d04d0
Add the following code in the designated area of your “functions.php” file: https://gist.github.com/mattyza/f210cadb7f70188d513d
Stretch background image to fit entire screen
body {
background-repeat: no-repeat !important;
background-position: center center !important;
background-attachment: fixed !important;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
Make Box Layout transparent
#wrapper {background: #fff; background: rgba(255,255,255,0.5) !important;}
Enable Pinch and Zoom in Iphone / Ipad
Put this code into functions.php
Make Avatar images square
#post-author .profile-image img, #comments .avatar img {border-radius: 0; -moz-border-radius: 0; -webkit-border-radius: 0;}
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;
WooCommerce: Remove product buttons from Shop Pages
.archive #wrapper #content ul.products li a.button {display: none;}
WooCommerce: Change the default number of columns in the WooCommerce Product Page
Place the following to functions.php Click to get code
Custom css
ul.products li.product { clear: none; width: 30%; }
Comments
112 responses to “65 tips, tricks and CSS tweaks for WooThemes Canvas”
[…] 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 […]
Wonderful list of some very useful tweaks. I for one will certainly be using many of them. Thank you!
I often used your previous post, and it’s great to see even more shown here.
I’m having a problem with the ‘Change the header image per page’ though, as it doesn’t show anything on the page. I checked the image URL and it is correct, but I don’t see anything.
This is the page:
http://writer-site.com/book-tour
This is the image:
http://www.writer-site.com/wp-content/uploads/header-virtual-book-tour.png
And this is the code I used:
.page-id-206 #header {
background: url(“http://www.writer-site.com/wp-content/uploads/header-virtual-book-tour.png”) no-repeat scroll 0 0 transparent;
}
Thanks 🙂
Hi Jamie,
Thanks for this wonderfull tips… Really helpful!!!
I just had an issue when pasting code into functions.php
Anytime I try to paste your code I get the HTTP 505 and have to restore the backup of the file.
Any hint?
Thanks
Mark
Hi Mark,
I’ve just updated the way the code is handled in pastebin so this should be fixed now 🙂
I’ve tested this end and it works, but let me know if you are still having problems,
Thanks,
Jamie
In the code given within pastie.org link given for tip 60: enable pinch to zoom, the viewport values must be comma separated (NOT semicolon).
Chrome will show a warning if you use semicolon.
Hi Jamie, thank you so much for these useful tweaks!
I need a bit of help though. I used the Center Primary Navigation tweak and noticed that the first menu item doesn’t have a border to the left. It looks a bit awkward. Here’s a screenshot of what I’m referring to: http://cl.ly/image/1W0I1V3U2T2l
Hope you can help me figure out how to add border-left in this scenario. Thanks!
Stef
HI Jamie,
Thanks for that. I’ve got the same problem as Joe. ‘Change the header image per page’ doesn’t work for me. Any tips?
I ended up using the code below because I couldn’t get the code in the tweak to work in Safari (worked great in Chrome though!):
.page-id-xxxx #head-img {
display: block;
-moz-box-sizing: border-box;
box-sizing: border-box;
background: url(image.jpg) no-repeat;
width: 940px;
height: 219px;
padding-left: 9400px;
}
Thanks Meg 🙂
Jamie
Thanks for posting these. It’s a great reference I’ve used many times.
Here’s one that I had to use today for embedding a YouTube video within a post. The Layout Manager I think was causing my YouTube videos from not resizing within the new Canvas responsive container. I was able to simply add the following style to the a Canvas Child Theme style sheet file (Many thanks to John Surdakowski’s information here: http://avexdesigns.com/responsive-youtube-embed/ )
/*STYLE TO MAKE YOUTUBE EMBED VIDEOS RESPONSIVE */
.post-embed .video {position: relative;
padding-bottom: 56.25%;
padding-top: 30px; height: 0; overflow: hidden;
}
.post-embed .video iframe {position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
Cheers!
I really enjoyed your previous Canvas Tweaks post and this one had just want I’ve been looking for, Adding a Blockquote Closing Quotation Mark.
But, I can’t get the code to work. Anyone have a solution?
Thanks!
Thanks so very much. I could not for the life figure out how to remove Meta tags!
I still can’t figure out your quotation code – but that’s cause I am a dope. Thanks!!
Hi, thanks for this great list of tips, really helpful in customising Canvas even further!
Thanks Paul 🙂
I’m working on a website on localhost, so I don’t have a link. I used the “Center primary navigation menu” code tweak, but now the drop downs are over to the right about 40 px and not under the parent. Any suggestion for that?
Thanks
Can the adding of login and logout be on the dropdown?
I am hoping for your kind response.
Thanks for the free tweaks and tutorials.. 🙂
Hi Experts,
I have just begun my career as a wordpress expert and have developed few wp websites last month.
As i have put hand coded html and css code into the website to make it look like PSD design, because of being responsive in nature, it is displayed as messed up when open in mobile or while restoring the website. For example : http://www.consumerdebtlaw.com
Please see the above website in mob or tab and let me know who can i remove the responsiveness of the website as client want it to be open as desktop version in all platforms.
It has become pain in my ass since last month. So please it would of gr8 gr8 help if you people could suggest me any solution for that.
Many Thanks in advance,
Kind Regads,
Amitoj
Hi Jamie!
I owe my success to you. I have developed more than 50 websites with CANVAS theme and only your 30 Tips and Tricks are a secret behind my success.
And now I am very happy to see you added more 35 new tricks.
I just have one question though, is there any way that we can move main navigation under Business Slider?
Warm Regards,
Sunder
These are incredible -thank you!
One I just tried today didn’t work for me – Centre Top Nav.
You’ve got: ul.nav { left: 20%; }
I DID get it to work by using ‘margin-left,’ instead of just ‘left.’ Don’t know if yours was a typo or if mine is going to be problematic somehow, but thought I’d throw it out there!
Great thanks Phylis 🙂
Jamie
Dear Jamie,
I really like your tips and tricks! They are very helpfull. I’m working on our new website with Canvas (commerce) and I tried the code from your tweaklist:
#navigation {
margin-bottom: 1em;
}
to remove the withe space between the business slider and the primary menu. But unfortunately nothing changed.
I also tried:
#navigation {
margin-bottom: 0px;
}
.home .breadcrumbs {
margin-bottom: 0;
}
but also without result.
I copied both in custom ccs van canvas commerce.
can you help me out?
regards,
Jeroen Vorstman
Wooo, thank you, that’s really helpfull!
Hi there!
I’m trying to completely remove the main navigation in Canvas…
I’ve tried
#navigation {display:none;}
This doesn’t seem to work!
Does anyone have any ideas?
Thanks guys!
They use display:block!important on navigation
but you can overide that
either by the battle of importance
#navigation { display: none!important }
or by going to the section below nav and hiding that
#navigation section.menus {
display: none;
}
I used nav#navigation { display: none;}
How can I change the background colors of the social media icons? I have tried to do this via CSS by altering background-color attribute, but it does not seem to work….
Many thanks!
I used the tweak “Move menu to the right of logo” and it worked great. However, is there additional code to move the menu further down? It isn’t currently lining up with my header image as well as I’d like it to.
Thanks!
Awesome resource! After adding a search box to the primary navigation, can you adjust the width?
Yes you can. Just add .searchform {width: 250px;} to custom.css with whatever width you want. Hope that helps!
Thanks for your set of tips. I’m new to Woocommerce. I actually landed to your site because I am trying to figure out how to activate those small icons below the product as shown in the screenshot http://www.emarketmarket.com/heart_cart_arrows.gif .
On the mobile version of the can as site, it moves the navigation off screen and gives you on menu item called navigation to pull it onto the screen. I would like to change the word NAVIGATION to something else, such as just plain old MENU. Can you help?
Is there a way to remove the responsiveness of the me u so that it is always all showing?
I had a similar problem.
My mistake was a silly one, but easy to fix. I didn’t place my CSS edits within the desktop specific custom.css
Look for “@media…” on the custom.css file:
@media only screen and (min-width: 768px) {
/*EXAMPLE CSS EDIT*/
#navigation {
margin-bottom: 1em;
}
}
The point being place the edits within the @media brackets to have the styling only effect the desktop version of your site. The responsive design should be functional on mobile with this protocol.
To change the title of the mobile “Navigation” to, say, “Menu”:
1. Copy the file themes/canvas/includes/theme-actions.php
add the file to a fielder called “includes” to your child theme:
themes/canvas-child/includes/theme-actions.php
2. Open the file and locate line 2367:
3. Change the word ‘Navigation’ to ‘Menu’ (or whatever you want!
4. Upload via FTP.
“folder” not “fielder” damnyouautocorrect!
Great Stuff !!
I was wondering if you could advise with the footer customization.
It appears that the full background of the footer side indeed changes according to your above code, but – the widgets themselves still have their own square (undesired) background on top.
It appears that Canvas provides option to change the background for ALL widgets, but using widgets in the footer can not have the same background as the widget on the page.
In short – Could you please advise how to modify the background of canvas widgets footer1, footer2, footer3 and footer4 , regardless of the general widgets color that was defined in canvas (Background, text color, title & body including fonts).
Thank you in advance,
Ronen.
Have you had a reply to that?
It’s exactly my problem also.
thank
Matt
Thanks a ton for providing this. I use Canvas for multiple websites. On the right side of the primary navigation menu, how can I make the edge of the last menu item rounded on the right side. There’s always a space between the last item and the edge of the navigation menu. See http://awesomescreenshot.com/0641s2qh7f for a screenshot.
Hello! I just took my first venture into cutting and pasting php in order to Move menu to the right of logo as directed above. I moved the files, edited, and moved back to server. Also cut and pasted custom css as directed. My site is gone!
I pasted the php on line 26 of the functions.php file. Could it be that I’ve placed the php in the wrong spot? My screen is all white.
This is a test site for a client’s website, created from a subdomain of my own. Can anyone help?
Is it possible to remove the header and nav bars from a single page?
Move menu to the right of logo
When using canvas full width, the canvas styling has an !important on max width for .col-full
which overides the max-width in your css snippet. The only solution I could fine was to also add !important as I couldn’t gt a more specific node. If you have a better way I’d like to know.
snip
Then add the following code to custom.css
@media only screen and (min-width: 768px) {
#navigation {
float: right;
width: auto;
clear:none;
max-width: 600px!important; // important required to force when ‘full width used as layout option’
}
}
Thank you for posting all these in one place, so helpful.
Hi,
Your tips are absolutely amazing! Thanks so much for them. So, here I am asking for one more…. is there an easy way to tweak the tweak for placing the search box in the header, to put in on the right end of the top navigation instead?
Thanks!
Hi,
Thanks so much for the wonderful tips! So here I am asking for one more…66 is a magic number, you know….. Is there an easy way to tweak the tweak that places the search box into the header into the top navigation on the right instead?
Thanks.
How to increase the Width of Post Column in canvas woo themes
I haven’t used Canvas for a while so needed to get some tips again and was amazed to see all the new ones. Amazing! Much appreciated.
One of the reasons i stopped using Canvas was i could not adjust the widget title background so it would match the general colour scheme of the website. Am i missing something or is there still no way to do this.
All the best
Trevor
Where does this code get placed? I put it in the Custom CSS but it doesn’t work there.
Remove Page titles
.page .title {
display: none;
}
Thanks!
Hi Jamie,
When I use the center navigation code on my websites, I end up getting alot of unwanted space on the right hand side of the screen which allows me to scroll to the right for no reason.
Is there a way of fixing this? http://www.houseofayurveda.com.au
i found a way simpler method to centre the main nav that doesn’t leave that gap on the right or create an unsightly horizontal scroll bar:
@media only screen and (min-width: 768px) {
ul.nav li {display: inline-block;float: none;}
#main-nav.nav.fl {float: none;text-align:center;}
}
[…] 65 tips, tricks and CSS tweaks for Woothemes Canvas: https://www.pootlepress.com/2013/06/65-tips-tricks-and-css-tweaks-for-woothemes-canvas/ […]
Hi PootlePress – Thanks for the free Canvas Child Theme adding the navigation to the right of the logo. Saved me a ton of coding and worry.
Wondering about the tweaks for adding boxes to the three column layout shortcode. I’ve installed all of the code you’ve so kindly provided, but none of it seems to activate on Canvas 5.5.3.
What I’m trying to accomplish is to have three columns for callouts with three different background colours for each, but using the shortcode on the content area on the homepage.
Any ideas would be incredibly helpful.
Thanks, JK.
Hi,
How do you make the sub menu gradient/transparent in canvas like this website:
http://www.onlinegaragedoorspares.com/
Regards Peter
Goto Styling and Layout > Primary Navigation and then goto Hover / Sub Menu Background Colour and enter the equivalent RGBA value. Use the converter below if you’re not sure.
http://hex2rgba.devoth.com/
Hope this helps.
Hi guys,
I love what you’re doing with the Canvas theme – you’ve definitely helped me make much better websites, so thank you.
I was wondering though whether you’d consider some tutorials on how to improve the performance of Canvas? i.e. how to get better results on Google Page Speed.
I know that this falls outside what you’re currently doing but I think that you’d get a lot of hits form people like me who use Canvas all the time but struggle to improve its performance.
Maybe a top 10 list of things you can do to speed things up or similar?
The thing that I can’t find a solution to is how to ‘Eliminate render-blocking Javascript and CSS in above the fold content’. I can’t find any guides on how to do that and it seems to affect all installations of Canvas, as well as many other themes out there.
This is what Google suggests I do:
None of the above-the-fold content on your page could be rendered without waiting for the following resources to load. Try to defer or asynchronously load blocking resources, or inline the critical portions of those resources directly in the HTML.
But, for an amateur like myself, this isn’t so easy.
Hope you guys will consider this.
Keep up the great work.
Best wishes,
Thaddeus
Hi Thad,
Yes we are working on this 🙂
Jamie
Hi, thanks for all your tips and tweaks…it makes Canvas a much more comprehensive tool as a site builder.
I tried your tip to centre the main navigation and ran into some styling issues when i reduced the size of the screen. On smaller screens where the responsive navigation is displayed the links were out of alignment and it created a big gap to the top of the page just under the header.
I’m slowly learning some CSS and had a play around with your CSS and think i may have resolved the issue ?? The styling below seems to work for me and may help others out.
Please let me know if you can see any probs with it!
/* Centre Main Menu */
#main-nav {
left: 50%;
}
ul.nav li {
right: 50%;
}
ul.nav ul li {
right: 0%;
}
#top-nav li {
right: 0%;
}
Very helpful, works great – Thanks!
Great tks Paul 🙂
Jamie
I was having the same issue and that fixed it. Thank you for sharing that.
[…] via 65 tips, tricks and CSS tweaks for Woothemes Canvas – Pootlepress. […]
Hey there,
Is there any chance to “highlight” author comments? Can you help me regarding that? Thanks in advance.
Hi guys,
The new version of WordPress (3.8) seems to have interfered with some of the custom CSS that I added to Canvas.
Specifically:
#logo { float: none; margin: 0 auto; width: 300px; }
I’ve tried a few different things but I can’t fix it, so my logo is now back in the default position.
Does anyone out there have a solution?
By the way, I’m running the latest version of Canvas (5.5.3)
I want to update to the latest version of Canvas but it breaks a lot of the tweaks that I have used. I was able to recreate my site to test out the new version.
http://10.go-wed.com/
As you can see I cannot figure out how to get the top nav below the main nav like I did in the older version. http://www.paperworksandevents.com/
This is what worked before add to functions.php:
remove_action( ‘woo_top’, ‘woo_top_navigation’, 10 );
add_action( ‘woo_nav_after’, ‘woo_top_navigation’, 12 );
Hi Heather,
The latest version of Canvas has an additional Header widget . So as a first step you could try removing that with some css and seeing if that works.
Jamie
Ok I removed the widget but what do you mean with CSS?
Just removing the content doesn’t seem to fix the problem and even it if did I need that Header widget.
Any other ideas?
Thanks so much!
Hi there,
The menu underline thing is not working at all.
Primairy navigation underlining isn’t working, any idea how to fix this? Would be great! Hope to hear something
Great tips! Thanks! I was wondering if you have a tip for removing the Primary Navigation on desktops, however keeping the responsive navigation when viewed on mobile devices. So far I am using this snippet in the functions.php child theme:
add_action( 'init', 'remove_canvas_main_navigation', 10 );function remove_canvas_main_navigation () {
remove_action( 'woo_header_after','woo_nav', 10 );}
This removes the navigation from desktop but also shows an empty menu on mobile devices. Can you help? Thanks!
Hi, I have used your tip no. 11 – add login/logout to menu. But I wonder, how to add login/logout to an existing menu item? Do you know what I mean? I do not want to create a new menu item, but rather add it to existing My Account item, which is generated by WooCommerce.
Thanks,
Goran
When using the “Header Cart Totals” feature in Canvas, in-conjunction with the WooCommerce, does anyone know how to just display the number of items in the cart and not the cart total as well?
Thanks,
Graham
Awesome list, thank you!
Thank you for such a comprehensive list of tweaks. I’m sure I’ll be refering to this list over and over again.
For a non-techy blog tweaker like me (I won’t sully the term designer by applying it to my limited skills) this is an invaluable resource.
I’m building a new site using only the TOP navigation, and trying to eliminate the horizontal navigation under the header.
I’m pulling my hair out trying to eliminate the main horizontal navigation under the header, and close up the space between the Business Slider and the space where the navigation was.
This code works:
#navigation {margin-bottom: 1em;}
But also removes the space between the header and page content on the rest of the site.
Also, on smartphones there is NO navigation at all, since the primary navigation menu has no links in it.
A few hours into this code now and I’m starting to go cross-eyed. Thanks in advance.
Is there a way to have different logo per page?
I have found that the header is not responsive and I am using the header image in the logo option.
Hence I wanna have a different logo on my homepage in comparison to other pages
Hello,
I have developed a site where the Vendor puts in their own products into the website/Canvas. The problem I have is that I need to be able to limit the title length to say 50 characters. If left as is, a long product title throws the entire look off because it just goes on forever. Is there a way to limit the post title length when a product is entered. I will answer any questions that I can if needed. Thanks for the help in advance.
Great post mate!
Here is my question; How can I increase the size of AdSpace Widget in Header for this theme?
Thank you for the answer. Just working on this issue.
Hi Jamie
Thanks a million for writing and sharing 🙂 Have used some already today and they work a treat. I was wondering if I just want the top menu and no primary menu is there any css code to hide? I have only created a top menu and ticked the top menu box. Just wondering. As woothemes is showing its system some love today and having a timeout a.k.a maintenance, I thought I would ask here. Thanks a mill C
Great tips! 🙂
Don’t know if it’s just me though, but the centre primary nav css does something funny to my mobile nav..
Thanks for all the tweaks.
I can’t seem to get this Header change code – or any other codes I’ve found to do a header change to work. I would like a different header on the blog page. Is there something else that could impede the functionality? like padding on the original? or I dunno… I feel like it should work – like it’s something in front of me I can’t see.
.page-id-16 #header {
background: url(“http://miriampawel.com/wp-content/uploads/2014/02/blog-header.jpg”) no-repeat scroll 0 0 transparent; }
figured it out – I had the page set in “static front page” area under “customize” as a posts page – once I took it off that worked fine
[…] Add social media icons to header […]
Thanks for these, but for some reason, when using the code to place the menu next to the logo, it causes a gap to appear above the top menu, but only in Canvas.
http://www.writaz.com
Sorry, I meant a gap between the two menus
Any idea how to put an image in the background within the main body of the document (where the text is)
Hi John, You can use the new row feature in Canvas Page Builder for this: https://www.pootlepress.com/2014/07/create-long-scrolling-pages-full-width-rows-page-customizer-page-builder-woothemes-canvas/
Hi,
Is there a css code to make the width of the primary menu wider so you can add more menu items in the menu ?
Hi. The css for sidebar background doesn’t work in Canvas 5.6.4. Any ideas?
I need the color to fill the entire sidebar height.
Thanks!
Do you have a tweak so both a custom logo and the site title and tag show in the header as using custom logo turns off site title/tag?
I want to use the full width layout, with the main navigation background color extending the full width of the screen. It does this perfectly if I’m not using a child theme. However, when I install the child theme, it narrow the background of the navigation bar as if I had the boxed layout setting checked. I do not. I’m sure there’s some css for this, but nothing I’ve tried has worked. Any help would be appreciated.
Thank you
I searced for few days for this kind of article! Thank you!
No worries Boris : )
It take a lot for me to write a comment on a blog, but on this occasion I felt it necessary as this is a great blog. You have saved me a mountain of time and hassle! Thank you very much, I appreciate it.
Thanks Paul!
I’ve been trying to use the custom header tweak for my homepage, but it doesn’t seem to be working. I’m using the “business” template for my homepage, is that a problem? Also, should I set the header in the Canvas>Theme Options>General Settings>Quick Start or use the Styling & Layout>Header>Header Background Image?
This is AWESOME! I’ve already implemented a couple tweaks! Could you whip up instructions for rearranging the post excerpts?
Current display is
TITLE
Author/Date/Category info
Excerpt
Continue Reading
I would like it to be:
TITLE
Excerpt …Continue Reading
Author/Date/Category info
Thanks in advance!
Excellent tweaks. One tweak I would love to see added (since I don’t know how to do it, of course) is how to hide a sidebar altogether on bbpress pages only. That is, our normal layout has a left sidebar/column, a wide center area for the main content, and right sidebar/column. In the interest of maximizing real estate for forum content (esp for viewing by portable devices), we’d like to eliminate the right sidebar. Our theme is “Canvas” by Woo Themes, and I’ve used Woo Sidebars to customize sidebars somewhat, but I don’t see an option in bbpress, Canvas, or Woo Sidebars to selectively hide a sidebar (widget area) altogether, so I’m stumped. Any tips? Thanks in advance!
Jamie, thanks for the great tips.
I’ve successfully added a search box to the primary navigation, but the background color is the same as the navigation. I want it to be white. I therefore added a line of code, but the result is not very satisfying:
#nav-search {
margin-right: 9px;
top: 10px;
background: #ffffff
}
Who could help me out?
Thanks to all help 🙂
I am using the latest version of Canvas and have been trying to figure out how and where to remove the underline from the primary menu – drop down menu; is there a quick/easy way to do this? Its driving me insane! Any help will be greatly appreciated!
How to put search box bottom right of header in canvas
Regards Peter
[…] Go directly to the “65 Tips & Tricks…” post on Pootlepress.com […]
With Canvas 5.8 / WooFramework 6 the tip about how to place a search box in the header needs to be modified or else the site will be broken (e.g. footer widgets not displayed, etc.).
Replace:
get_template_part( ‘search’, ‘form’ );
with:
get_template_part( ‘searchform’ );
Even better yet:
function woo_custom_add_searchform ()
{
get_search_form();
}
add_action ( ‘woo_header_inside’, ‘woo_custom_add_searchform’, 10 );
Great, tks for sharing 🙂
Can you pls uptate the code for the seach in main menu?
Hi,
I’m trying to find a way to style the Toggle Content trigger. For instance, the “Show All”you would click that would ten toggle the rest of the content is currently a smaller font size than I need. I would like it to be an h3 or h2 size. Is there inline code I can use, and if not, where would I edit this style?
Thanks,
Sandra
Hey I was having setting up different backgrounds color on every page. I found the trick here “Add a background color to entire footer widgets” and guess what IT WORKED 🙂
Thanks a lot for all the tweeks mentioned here….
The Canvas Advanced Add-on plugin seems to conflict with the PootlePress Page Customizer. I’m getting this error:
Fatal error: Cannot redeclare woo_options_add() (previously declared in /public_html/wp-content/plugins/cx-page-customizer-master/pootlepress-page-customizer-functions.php:9) in /public_html/wp-content/plugins/canvas-advanced-addons-master/classes/class-canvas-advanced-addons.php on line 459
Hi Todd, yes there is a know conflict with this. We are working on it… For now, you can’t use Canvas Add-on plugin from Stuart Duff
Hi,
Is there a way to block comments on just one post? I have not been able to find this option.
(Somehow spammers have hooked on to 1 post and it’s driving me nuts. Of course the spam gets caught, but in order not to miss a real message I have to through it all)
Tnx for suggestions!
Freya
[…] a quick ticket to my friends at Woo yielded a response that gave me a link to 65 tips, tricks and CSS tweaks for WooThemes Canvas, which included exactly the snippet I needed to insert in my CSS […]
[…] we wrote a post called 65 Canvas tips, tricks and CSS tweaks and were blown away by the response. We got fantastic feedback to the post and it still gets a […]