Woothemes Canvas customization

In my opinion Woothemes Canvas is the most flexible and useful theme for WordPress currently. I didn’t try all of the available WordPress Themes out there, but I worked with a lot of different theme companies and tried a lot of their products on client websites and private ones. Canvas is the best. Believe me.

If you are not satisfied with the flexibilities of Canvas, here are some more things you can change using CSS/PHP.

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

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

Custom css

ul.products li.product { clear: none; width: 30%; }