PootlePress
Header
Canvas Cheat Sheet
Move the Top Ad position in Header
Add Login / Logout to Top Menu
Place the following code in custom.css
Follow this link and the place the code in
functions.php Click to get code
#topad { margin-top: 1.8em; }
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
Place the following code in custom.css
Place the following code in custom.css
.page-id-xxxx #header { background: url(“imageurl”) no-repeat scroll 0 0 transparent; }
Add Login / Logout to Primary Navigation
Follow this link and the place the code in
functions.php Click to get code
Centre top menu
.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
Centre logo
Place the following code in custom.css
#logo { float: none; margin: 0 auto; width: 300px; }
Remove the Header (completely)
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;
}
To change the header background image per page
use the following. xxxx is whatever the page id
number is for the page.
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.
Centre primary navigation menu
Place the following code in custom.css
Place in custom.css
#header { display: none; }
ul.nav { left: 20%; }
www.pootlepress.com
PootlePress
Canvas Cheat Sheet
Make menus transparent
Change drop down menu font color
Add a search box to the primary navigation
To choose and create your transparent colors go to
http://hex2rgba.devoth.com
/* Changes the default background color of the
nav menus */
#navigation ul.nav > li a:hover {
background: #316594;
color: #FFFFFF;
}
Add to code found in this link to functions.php
Click to get code
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;
ma-width: 600px; // This can be changed
}
}
/* 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;
}
#navigation {
margin-left:-30px;
width:978px;
}
#nav-search .icon-search {
position: absolute;
right: 9px;
}
#nav-search {
margin-right: 9px;
top: 10px;
padding-top:5px;
}
Pages / Posts
Change drop down menu font size
ul.nav li ul li a {
Remove Page titles
font-size:20px;
}
.page .title {
display: none;
}
Align top menu to the right
Make navigation fit box layout width
Add to Custom.css
#top-nav {
float: right;
}
Remove Home page title
.home .title {
display:none;
}
www.pootlepress.com
PootlePress
Canvas Cheat Sheet
Add a background color to your posts
Remove image border
Move slider text from top left
.post {
background: none repeat scroll 0 0 white;
padding: 10px;
position: relative;
}
.entry img, img.thumbnail {
background: none;
border: medium none;
padding: 5px;
}
Change left and top values to suit
Remove Page title from a specific page
Change sidebar background color
Change the page id 200 for this one to work
#sidebar {
background: url(“imageurl”) repeat scroll 0 0
#FFFFFF;
}
.page-id-200 .title {
display: none;
}
Remove ‘comments are closed’ message
.nocomments {
display: none;
}
Remove breadcrumbs from your home page
#wrapper {background: #000; background:
rgba(0,0,0,0.7) !important;}
#loopedSlider .content {
background: none repeat scroll 0 0 transparent;
left: 300px;
position: absolute;
top: 300px;
}
Reduce space between Primary Navigation Menu
and Slider
#navigation {
SLIDERS
margin-bottom: 1em;
}
Remove arrows on sliders
a.flex-prev, a.flex-next {
display: none;
.home .breadcrumb {
display: none;
}
}
Make box layout transparent
.business #loopedSlider .content h2 {
background: none repeat scroll 0 0 rgba(0, 0, 0, 0.1);
#wrapper {background: #fff; background:
rgba(255,255,255,0.5) !important;}
max-width: 980px;
}
Change the color of the box background
Remove the words ‘You are here’
in breadcrumbs
.breadcrumb-title {
display: none;
}
.business #loopedSlider .content p {
Increase the width of the text on Sliders
#loopedSlider .content h2 {
max-width: 980px;
}
Change transparency on sliders
}
www.pootlepress.com
PootlePress
Canvas Cheat Sheet
Change the color of slider text background
Fix the size of your boxes
Change the rgba values to suit
. twocol-one {
height:600px;
}
#loopedSlider .content p, #loopedSlider .content h2 {
background: none repeat scroll 0 0 rgba(0, 100, 0, 0.7);
}
Add rounded corners to your boxes
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
. twocol-one {
border-radius: 22px;
}
Set minimum and maximum height to boxes
. twocol-one {
min-height:200px;
max-height:400px;
}
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
Add boxes around your columns
.twocol-one {
width: 43%;
border: 1px solid #D5D7D9;
border-radius: 3px 3px 3px 3px;
padding: 10px;
background-color: white;
}
.entry blockquote:before {
color: red;
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 */
}
font-size: 3em;
left: 0;
position: absolute;
top: 0.5em;
}
www.pootlepress.com
PootlePress
Canvas Cheat Sheet
How to add a closing Blockquote quotation mark
Add a background color to entire footer widgets
.entry blockquote:after {
change background color to suit
color: #999999;
content: “”;
font-family: “FontAwesome”;
font-size: 2em;
right: 0;
position: absolute;
bottom: 0.5em;
#footer-widgets {
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);
}
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(
Footer customisation
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;
}
http://link-to-your-image.com/image.jpg);
}
www.pootlepress.com
PootlePress
Canvas Cheat Sheet
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;
{ Thank you }
Get lots of free Canvas goodies
in the PootlePress store
www.pootelpress.com/shop
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%; }
www.pootlepress.com