65 tips, tricks and CSS tweaks for WooThemes Canvas

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.

woothemes-canvas-academy

You can use CSS customizations in Canvas to create stunning sites – check out our Top 50 Most Beautiful Canvas websites e-book to get inspired.

Tweaks listings

  1. Header
  2. Add social media icons to header
  3. Add phone number and email to header
  4. Add Search Box to Header
  5. Change the header image per page
  6. Centre logo
  7. Remove the Header (completely)
  8. Move the top Ad position in Header
  9. Change the header image per page
  10. Menus / Navigation
  11. Add Login / Logout to Primary Navigation
  12. Add Login / Logout to Top Menu
  13. Center menus
  14. Centre top menu
  15. Make menu transparent
  16. Move menu to the right of logo
  17. Make navigation fit box layout width
  18. Change drop down menu font color
  19. Change drop down menu font size
  20. Add a search box to the primary navigation
  21. Align top menu to the right
  22. Pages / Posts
  23. Remove Page titles
  24. Remove Home page title
  25. Add a background color to your posts (and some padding)
  26. Remove Page title from a specific page
  27. Remove ‘comments are closed’ message
  28. Remove the words ‘You are here’ in breadcrumbs
  29. Change the font for a single post
  30. Change category link colors
  31. Remove image border
  32. Remove breadcrumbs from your home page
  33. Change sidebar background color
  34. Make box layout transparent
  35. Sliders
  36. Remove arrows on sliders
  37. Move slider text from top left
  38. Change transparency on sliders
  39. Reduce space between Menu and Slider
  40. Increase the width of the text on Sliders
  41. Change the color of slider text
  42. Change the color and size of slider arrows
  43. Customising Wooframework Shortcode
  44. Add boxes around your columns
  45. Add background color to your columns
  46. Fix the size of your boxes
  47. Add rounded corners to your boxes
  48. Set minimum and maximum height to boxes
  49. Create gradients for your Info boxes
  50. Customise the color of Info Boxes
  51. Change the color and size of Blockquotes
  52. Add a closing Blockquote
  53. Footer
  54. Add a background color to entire footer widgets
  55. Add terms and conditions to footer
  56. Add an image to the footer area
  57. Misc
  58. Fix for BBPress and Canvas (5.2 and higher)
  59. Stretch background image to fit entire screen
  60. Enable Pinch and Zoom in Iphone / Ipad
  61. Make Avatar images square
  62. WooCommerce: Remove product buttons from Shop page
  63. 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

#header { display: none; }

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

http://pastie.org/5838213

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”

  1. […] 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 […]

  2. Wonderful list of some very useful tweaks. I for one will certainly be using many of them. Thank you!

  3. 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 🙂

  4. 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

    1. Jamie Marsland Avatar
      Jamie Marsland

      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

  5. Chirag Avatar

    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.

  6. 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

  7. sophie Avatar

    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?

    1. 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;
      }

      1. Jamie Marsland Avatar
        Jamie Marsland

        Thanks Meg 🙂

        Jamie

  8. John Axne Avatar
    John Axne

    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!

  9. Patrick Avatar

    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!

  10. 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!!

  11. Hi, thanks for this great list of tips, really helpful in customising Canvas even further!

    1. Jamie Marsland Avatar
      Jamie Marsland

      Thanks Paul 🙂

  12. 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

  13. Mariz Papas Avatar
    Mariz Papas

    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.. 🙂

  14. 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

  15. 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

  16. Phyllis Avatar

    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!

    1. Jamie Marsland Avatar
      Jamie Marsland

      Great thanks Phylis 🙂

      Jamie

  17. 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

  18. Wooo, thank you, that’s really helpfull!

  19. 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!

    1. 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;
      }

    2. I used nav#navigation { display: none;}

  20. 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!

  21. 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!

  22. Awesome resource! After adding a search box to the primary navigation, can you adjust the width?

    1. Yes you can. Just add .searchform {width: 250px;} to custom.css with whatever width you want. Hope that helps!

  23. 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 .

  24. 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?

    1. 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.

    2. 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.

      1. “folder” not “fielder” damnyouautocorrect!

  25. 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.

    1. Matthew Wood Avatar
      Matthew Wood

      Have you had a reply to that?
      It’s exactly my problem also.
      thank
      Matt

  26. 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.

  27. 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?

  28. Is it possible to remove the header and nav bars from a single page?

  29. 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’
    }
    }

  30. Thank you for posting all these in one place, so helpful.

  31. 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!

  32. 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.

  33. How to increase the Width of Post Column in canvas woo themes

  34. 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

  35. Victoria Vinton Avatar
    Victoria Vinton

    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!

  36. 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

    1. 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;}

      }

  37. 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.

  38. Hi,
    How do you make the sub menu gradient/transparent in canvas like this website:

    http://www.onlinegaragedoorspares.com/

    Regards Peter

    1. 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.

  39. 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

    1. Jamie Marsland Avatar
      Jamie Marsland

      Hi Thad,

      Yes we are working on this 🙂

      Jamie

  40. 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%;
    }

    1. Mike Dickerman Avatar
      Mike Dickerman

      Very helpful, works great – Thanks!

    2. Jamie Marsland Avatar
      Jamie Marsland

      Great tks Paul 🙂

      Jamie

    3. I was having the same issue and that fixed it. Thank you for sharing that.

  41. […] via 65 tips, tricks and CSS tweaks for Woothemes Canvas – Pootlepress. […]

  42. Hey there,
    Is there any chance to “highlight” author comments? Can you help me regarding that? Thanks in advance.

  43. 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?

    1. By the way, I’m running the latest version of Canvas (5.5.3)

  44. 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 );

    1. Jamie Marsland Avatar
      Jamie Marsland

      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

      1. 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!

  45. Hi there,
    The menu underline thing is not working at all.

    1. Frenkie Avatar
      Frenkie

      Primairy navigation underlining isn’t working, any idea how to fix this? Would be great! Hope to hear something

  46. 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!

  47. 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

  48. Graham M Avatar

    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

  49. Awesome list, thank you!

  50. 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.

  51. 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.

  52. 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

  53. 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.

  54. Libor Smolik Avatar
    Libor Smolik

    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.

  55. 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

  56. Great tips! 🙂

    Don’t know if it’s just me though, but the centre primary nav css does something funny to my mobile nav..

  57. 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; }

    1. 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

  58. […] Add social media icons to header […]

  59. 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

    1. Sorry, I meant a gap between the two menus

  60. Any idea how to put an image in the background within the main body of the document (where the text is)

  61. 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 ?

  62. 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!

  63. Clare Avatar

    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?

  64. Terri Avatar

    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

  65. I searced for few days for this kind of article! Thank you!

    1. No worries Boris : )

  66. 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.

    1. Thanks Paul!

  67. David Avatar

    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?

  68. 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!

  69. Marcus Avatar

    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!

  70. 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 🙂

  71. 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!

  72. How to put search box bottom right of header in canvas

    Regards Peter

  73. […] Go directly to the “65 Tips & Tricks…” post on Pootlepress.com […]

  74. 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’ );

    1. Even better yet:

      function woo_custom_add_searchform ()
      {
      get_search_form();
      }
      add_action ( ‘woo_header_inside’, ‘woo_custom_add_searchform’, 10 );

      1. Jamie Marsland Avatar
        Jamie Marsland

        Great, tks for sharing 🙂

        1. Can you pls uptate the code for the seach in main menu?

  75. 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

  76. 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….

  77. 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

    1. 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

  78. 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

  79. […] 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 […]

  80. […] 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 […]