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
- 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
[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;
}
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;
}
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;
}
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;
}
[hr]
Pages / Posts
Remove Page titles
.page .title {
display: none;
}
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;
}
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;}
[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;
}
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);
}
[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;
}
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
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;}
[hr]Enable Pinch and Zoom in Iphone / Ipad
Put this code into functions.php
[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;
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]