Canvas tricks, tips and CSS tweaks

Below are over 65 tips, tricks and CSS Tweaks to help you customise the Canvas Theme from WooThemes.

These tweaks originally appeared in an article on our blog. We will add further tweaks and tips to this page 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 Support Forum.

[hr]

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

 

[hr]

And here are the tweaks…

[hr]

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

[hr]

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

[hr]

Centre logo

Place the following code in custom.css

#logo { float: none; margin: 0 auto; width: 300px; }

[hr]

Remove the Header (completely)

Place the following code in custom.css

#header { display: none; }

[hr]

Move the Top Ad position in Header

Place the following code in custom.css

#topad { margin-top: 1.8em; }

[hr]

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

[hr]

Add phone number and email to header

Enable top ad space and simply put text in. Style according.

[hr]

Add social media icons to header 

Use the Canvas Advanced plugin written by Stuart Duff (WooThemes Ninja)

[hr]

Menus / Navigation

 

Add Login / Logout to Primary Navigation

Follow this link and the place the code in functions.php Click to get code

[hr]

Add Login / Logout to Top Menu

Follow this link and the place the code in functions.php Click to get code

[hr]

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

[hr]

Centre top menu

Place in custom.css

ul.nav { 
left: 20%; 
}

[hr]

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

[hr]

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
    }
}
[hr]

Make navigation fit box layout width

#navigation {

margin-left:-30px;
width:978px;
}

[hr]

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

[hr]

Change drop down menu font size

ul.nav li ul li a {

font-size:20px;
}

[hr]

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

[hr]

Align top menu to the right

#top-nav {
float: right;
}
[hr]

Pages / Posts

 

Remove Page titles

.page .title {
display: none;
}

[hr]

Remove Home page title

.home .title {

display:none;

}

[hr]

Add a background color to your posts 

.post {
background: none repeat scroll 0 0 white;
padding: 10px;
position: relative;
}

[hr]

Remove Page title from a specific page

Change the page id 200 for this one to work
.page-id-200 .title {
display: none;
}

[hr]

Remove ‘comments are closed’ message

.nocomments {
display: none;
}

[hr]

Remove the words ‘You are here’ in breadcrumbs

.breadcrumb-title {
display: none;
}

[hr]

Remove image border

.entry img, img.thumbnail {
background: none;
border: medium none;
padding: 5px;
}

[hr]

Remove breadcrumbs from your home page

.home .breadcrumb {
display: none;
}

[hr]

Change sidebar background color

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

[hr]

Make box layout transparent

#wrapper {background: #fff; background: rgba(255,255,255,0.5) !important;}

[hr]

Change the color of the box background 

#wrapper {background: #000; background: rgba(0,0,0,0.7) !important;}

[hr]

Sliders

 

Remove arrows on sliders

a.flex-prev, a.flex-next {
display: none;

}

[hr]

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;

}

[hr]

Change transparency on sliders

.business #loopedSlider .content h2 {
background: none repeat scroll 0 0 rgba(0, 0, 0, 0.1);

}

[hr]

Reduce space between Primary Navigation Menu and Slider

#navigation {

margin-bottom: 1em;

}

[hr]

Increase the width of the text on Sliders

#loopedSlider .content h2 {

max-width: 980px;

}

[hr]

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

}

[hr]

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

[hr]

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

[hr]

Fix the size of your boxes

. twocol-one {
height:600px;
}

[hr]

Add rounded corners to your boxes

. twocol-one {
border-radius: 22px;
}

[hr]

Set minimum and maximum height to boxes

. twocol-one {
min-height:200px;
max-height:400px;
}

[hr]

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 */
}

[hr]

Customise the color of Info Boxes

.woo-sc-box.normal {
background: none repeat scroll 0 0 red;
border-color: #CCCCCC;
padding: 9px 15px;
}

[hr]

Change the color and size of Blockquotes

.entry blockquote:before {
color: red;

font-size: 3em;
left: 0;
position: absolute;
top: 0.5em;
}

[hr]

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

}

[hr]

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

[hr]

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.

[hr]

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

[hr]

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

[hr]

Make Box Layout transparent

#wrapper {background: #fff; background: rgba(255,255,255,0.5) !important;}

[hr]

Enable Pinch and Zoom in Iphone / Ipad

Put this code into functions.php

http://pastie.org/5838213

[hr]

Make Avatar images square

#post-author .profile-image img, #comments .avatar img {border-radius: 0; -moz-border-radius: 0; -webkit-border-radius: 0;}

[hr]

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;

[hr]

WooCommerce: Remove product buttons from Shop Pages

.archive #wrapper #content ul.products li a.button {display: none;}
[hr]

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

[hr]

Leave a Reply

Your email address will not be published. Required fields are marked *