30 simple (but useful) WooThemes Canvas CSS tweaks

The WooThemes Canvas theme framework from Woothemes is in my view, the most flexible and powerful WordPress theme available.

You can do so many cool things with Canvas without having to dive into any code. However, there are times when you’ll want to tweak Canvas and with that in mind, I’ve put together the following list of 30 useful CSS tweaks.

30 Canvas CSS tweaks

#1: Remove Page Titles

.page .title {
display: none;
}

#2: Remove page title from a specific page
Change the page id 200 for this one to work

.page-id-200 .title {
display: none;
}

#3: Remove image border

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

 

#4: Change colour of drop down menus

/* Changes the default background color of the drop down menus */ .nav li a:hover, .nav li.current_page_item a, .nav li.current_page_parent a, .nav li.current-menu-ancestor a, .nav li.current-menu-item a, .nav li.current_page_item li a, .nav li.current_page_parent li a, .nav li.current-menu-ancestor li a, .nav li.current-menu-item li a, .nav li.sfHover a {background:#D0D9E0; } /* Changes the hover background, text and text shadow color  */ .nav li ul li a:hover, .nav li.sfHover ul li a.sf-with-ul:hover { background:#316594; color:#FFFFFF; text-shadow:0 1px 0 #000;} /* Changes the default background color of a drop down menu with a child */ .nav li ul li, .nav li.sfHover ul li a.sf-with-ul { background:none repeat scroll 0 0 #D0D9E0; }

 

#5: 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.

.page-id-xxxx #header {
    background: url("imageurl") no-repeat scroll 0 0 transparent; }

#6: Remove next/previous buttons on Magazine slider

  .magazine #loopedSlider a.previous, .magazine #loopedSlider a.next {
  display: none;
}

#7: To change the colour and transparency of block text on sliders

#loopedSlider .content p, #loopedSlider .content h2 {
background:rgba(255, 255, 255, 0.7);
}

#8: Remove white space above the slider

#navigation {
margin-bottom: 0px;
}
.home .breadcrumbs {
margin-bottom: 0;
}

#9: Remove breadcrumbs from your homepage

.home .breadcrumb {
    display: none;
}

#10: Remove space between Header and Primary Navigation

#logo a img {
    display: block;
}

#11: Align top menu to the right

#top-nav {
    float: right;
}

#12: Change the background colour of Sliders

#loopedSlider .slides { background: #EEE;}

#13: Add padding to Wootabs

#woo_tabs-3.widget {
    padding: 0;
}

#14: Remove the footer on the homepage

.home #footer-widgets {
    display: none;
}

#15: Add underline hover to navigation items

.nav a:hover {
    text-decoration: underline;
}  

#16: Customise caption style

.entry .wp-caption-text {
    -moz-font-feature-settings: normal;
    -moz-font-language-override: normal;
    -x-system-font: none;
    font-family: Arial,Helvetica,sans-serif;
    font-size: 11px;
    font-size-adjust: none;
    font-stretch: normal;
    font-style: normal;
    font-variant: normal;
    font-weight: normal;
    line-height: 22px;
    margin-bottom: 0;
    margin-left: 0;
    margin-right: 0;
    margin-top: 0;
    padding-bottom: 0;
    padding-left: 0;
    padding-right: 0;
    padding-top: 0;
    text-align: center;
}

 

#17: Delete Author and Post date

.post-meta { display:none; }

#18: Add rounded corners to Portfolios

#portfolio img {
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
}

#19: Add an image to the footer area

#footer {
background:url(<a href="http://link-to-your-image.com/image.jpg" rel="nofollow">
http://link-to-your-image.com/image.jpg</a>);
}

#20: Remove ‘comments are closed’ message

.nocomments {
display: none;
}

#21: Remove the words ‘You are here’ in breadcrumbs

.breadcrumb-title {
    display: none;
}

#22: Centre ‘Comments and Continue reading’

a.more-link {
    display: block;
    text-align: center;
}

.post-more {
    text-align: center;
}

#23: Centre Navigation

Change the value 400 to center

#main-nav {
float: none;
margin: 0 auto;
width: 400px;
}

#24: Change the background colour of Main Content

#main {
   background: #fff;
}

#25: Change Sidebar Background Colour

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

#26: Remove the Header (completely!)

#header {
    display: none;
}

#27: Remove Space between Header and Navigation

#header {
    background-position: center bottom;
}

#28: Change the default height of the Magazine Grid

.magazine .block { min-height: 400px; }

#29: 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;
}

#30: Change Category link colours

.post-meta a:link, .post-meta a:visited, .post p.tags a:link, .post p.tags a:visited
{ text-decoration: underline; color:#888; }  

Original Article by Jamie Marsland