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.
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;
}
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; }
Place the following code in custom.css
#logo { float: none; margin: 0 auto; width: 300px; }
Place the following code in custom.css
#header { display: none; }
Place the following code in custom.css
#topad { margin-top: 1.8em; }
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; }
Enable top ad space and simply put text in. Style according.
Use the Canvas Advanced plugin written by Stuart Duff (WooThemes Ninja)
Follow this link and the place the code in functions.php Click to get code
Follow this link and the place the code in functions.php Click to get code
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;
}
Place in custom.css
ul.nav { left: 20%; }
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
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
}
}
#navigation {
margin-left:-30px;
width:978px;
}
/* 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;
}
ul.nav li ul li a {
font-size:20px;
}
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;
}
#top-nav {
float: right;
}
Pages / Posts
.page .title {
display: none;
}
.home .title {
display:none;
}
.post {
background: none repeat scroll 0 0 white;
padding: 10px;
position: relative;
}
Change the page id 200 for this one to work
.page-id-200 .title {
display: none;
}
.nocomments {
display: none;
}
.breadcrumb-title {
display: none;
}
.entry img, img.thumbnail {
background: none;
border: medium none;
padding: 5px;
}
.home .breadcrumb {
display: none;
}
#sidebar {
background: url(“imageurl”) repeat scroll 0 0 #FFFFFF;
}
#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;}
a.flex-prev, a.flex-next {
display: none;
}
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;
}
.business #loopedSlider .content h2 {
background: none repeat scroll 0 0 rgba(0, 0, 0, 0.1);
}
#navigation {
margin-bottom: 1em;
}
#loopedSlider .content h2 {
max-width: 980px;
}
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 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;
}
.twocol-one {
width: 43%;
border: 1px solid #D5D7D9;
border-radius: 3px 3px 3px 3px;
padding: 10px;
background-color: white;
}
. twocol-one {
height:600px;
}
. twocol-one {
border-radius: 22px;
}
. twocol-one {
min-height:200px;
max-height:400px;
}
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 */
}
.woo-sc-box.normal {
background: none repeat scroll 0 0 red;
border-color: #CCCCCC;
padding: 9px 15px;
}
.entry blockquote:before {
color: red;
font-size: 3em;
left: 0;
position: absolute;
top: 0.5em;
}
.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);
}
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;
}
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.
#footer {
background:url(
http://link-to-your-image.com/image.jpg);
}
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
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;
}
#wrapper {background: #fff; background: rgba(255,255,255,0.5) !important;}
Put this code into functions.php
http://pastie.org/5838213
#post-author .profile-image img, #comments .avatar img {border-radius: 0; -moz-border-radius: 0; -webkit-border-radius: 0;}
1066 is the id of the post in question
.postid-1066 .entry, .postid-1066 .entry p {
font: normal 16px/1.5em Antic;
color: #555;
.archive #wrapper #content ul.products li a.button {display: none;}
Place the following to functions.php
Custom css
ul.products li.product { clear: none; width: 30%; }