Lots of WOO Themes Canvas CSS Tweaks

These “list” posts usually have a number (“7 Ways to Slice an Avocado!”) but I keep finding more and more CSS tweaks for Canvas and I need a place to put them so this is going to be it! If you have any more–or any you’d like to see–let me know in the comments. Thanks!

1. Remove border around images within pages and posts

Border removed around image

.entry img {
	border-top-style: none;
	border-right-style: none;
	border-bottom-style: none;
	border-left-style: none;
}

If that doesn’t work (which it doesn’t seem to all the time … ) try this:

.entry img {
	padding: 0;
	border: 0 solid #000000;
}

And that’s only if the background of the page is black (#000000).

Finally, if those don’t work, try this one:

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

2. Hide page titles on certain pages

.pageid-242 .page .title, .pageid-97 .page .title {
display:none;
}

3. Hide page titles on children (sub-pages) of a certain page

I love this one. We didn’t want to show the page titles of the sub-pages of a certain page. Here’s the code, with the parent page ID, to hide the children (or sub) pages of that page.

.parent-pageid-223 .page .title {
display:none;
}

4. Hide page title on home page

If you name your home page something like “Home” and don’t want that showing up, here’s how to hide that title.

.home .page .title {
display:none;
}

5. Indenting second line of bulleted list in sidebar

I don’t know why this isn’t built into the CSS, but if I build a manual “ul li” bulleted list, the second line doesn’t wrap or is not indented. Odd. Here’s the fix.

.textwidget ul li {
	padding-left: 1em;
	text-indent: -1em;
}

6. Semi-Transparent Colors in WOO Canvas Elements

Martin Sign Company goes all out with a semi-transparent header, nav and even drop-down menus. So he can show off those fancy signs.

This CSS trick warrants a post of its own. With a little styling trick, you can change a regular solid color into a semi-transparent color for any element where you’d normally insert a HEX color value. So instead of (for white): #FFFFFF, you’d use this:

rgba(255, 255, 255, 0.7)

For a gray, use this:

rgba(0, 0, 0, 0.6)

7. Search box in primary navigation

Just a little code and your search bar is in your primary nav off to the right.

This goes into your functions.php file. This code will put a search box into the right side of your primary navigation. If you’d like it in your top navigation, keep scrolling down, it’s the next one. Thanks to WOO for this one: How to Create a Unique WordPress Website: 15 Top Hacks for Canvas.

add_action( 'woo_nav_inside', 'custom_nav_searchform', 10 );

function custom_nav_searchform () {
    echo '<div id="nav-search" class="nav-search fr">' . "
";
    get_template_part( 'search', 'form' );
    echo '</div><!--/#nav-search .nav-search fr-->' . "
";
}

This is for your CSS file:

#nav-search .icon-search {
position: absolute;
right: 9px;
}

#nav-search {
margin-right: 9px;
top: 10px;
}

8. Search box in top navigation

It takes a bit more code, but still gets that search box up into the top navigation, way up there.

After mucking around with code and CSS for an hour, I finally dug a little deeper and found the code buried in a WOO post. Sometimes it takes doing it yourself for a while and failing to find the answer! The problem is that the top navigation doesn’t have a hook inside of it, so we need to recreate that here.

Here’s the code for the functions.php file:

/*-----------------------------------------------------------------------------------*/
/* Optional Top Navigation (WP Menus)  */
/*-----------------------------------------------------------------------------------*/
if ( ! function_exists( 'woo_top_navigation' ) ) {
function woo_top_navigation() {
  if ( function_exists( 'has_nav_menu' ) && has_nav_menu( 'top-menu' ) ) {
?>
  <div id="top">
		<div class="col-full">
			<?php
				echo '<h3 class="top-menu">' . woo_get_menu_name( 'top-menu' ) . '</h3>';
				wp_nav_menu( array( 'depth' => 6, 'sort_column' => 'menu_order', 'container' => 'ul', 'menu_id' => 'top-nav', 'menu_class' => 'nav top-navigation fl', 'theme_location' => 'top-menu' ) );
			?>

			<div id="nav-search" class="nav-search fr">
				<?php get_template_part( 'search', 'form' ); ?>
			</div><!--/#nav-search .nav-search fr-->

		</div>
	</div><!-- /#top -->
<?php
	}
} // End woo_top_navigation()
}

This is for the CSS file.

#top .searchform { background: #fff; margin-bottom: 5px; }

9. Remove right side padding/margin in main navigation

This one took a little digging. There’s an odd bit of padding or margin on the right side of the main navigation (especially noticeable if you float the nav right). Here’s how to get rid of that.

With a little CSS you can clear out that padding/margin on the right.

Here’s the tiny bit of CSS you’ll need:

#main-nav {
margin-right: 0px !important;
}

 10. Removed background and border from boxed layout only on home page

Here it’s removed. Note you might want to do something to the header background.

I love the boxed layout, but if you’d like to show off a, say, large slider on the home page and not have that boxed layout only on the home page, here’s how to hide it. Thanks to Michael Smith’s comment below about the topic. Hopefully this CSS tweak will help out his dog training site.

.home #inner-wrapper {
	background-color: transparent !important;
	border-top-style: none;
	border-right-style: none;
	border-bottom-style: none;
	border-left-style: none;
}

11. Add a logo to the header, but keep the site title and site description.

More detail over here (Logo, title, and description living in harmony?), but here’s the CSS if you know what I’m talking about and how to add the CSS to your child theme.

Three’s no longer a crowd in the WOO Canvas Header.

#logo .site-title, #logo .site-description {
	display: block;
}

#logo img {
	float: left;
	margin-right: 20px;
}

#logo {
	float: left;
	width: 450px;
}

12. Primary nav into header, but left aligned, next to logo/title

So you have your primary navigation up in the header, but you’d like it moved over to the left, next to the logo (or title), not floating right. See the full story over at Primary Menu to Right Side in Header and then you’ll just want to change the float right to float left and add some left margin.

Menu in header, but floating left, next to logo or site title.

Here’s the code you’ll need (this is just the edit from the link above):

/*float: right;*/
margin-left: 20px;
float: left;

Note that the slashes are just “commenting out” or hiding the right float. Just wanted to show what you’re replacing.

13. Underline links

What’s up with no underlining of links? Am I so old school? If you want it back, here’s what you need for inside of posts and comments.

.post .entry a, .page .entry a, .portfolio .entry a, .comment-entry p a {
	text-decoration: underline;
}

 14. Hide “Comments are Closed” message below posts

.nocomments {
display: none;
}

15. Add more Google Fonts to WOO Framework

WOO doesn’t add all of the latest Google Fonts into the WOO Framework so if you’d like to use a few that aren’t yet in there, you can add this code to your functions.php file. If you’d like to see how this is done as well as how to use a plugin that will (more) automatically add all of the Google Fonts, check out How to add more Google Fonts to WOO Canvas.

// add the function to the init hook
add_action( 'init', 'woo_add_googlefonts', 20 );

// add a font to the $google_fonts variable
function woo_add_googlefonts () {
    global $google_fonts;
    $google_fonts

 16. Footer link color

I can’t find this one anywhere and it just turns the links blue unless I use this code. Huh.

#footer p a {
	color: #424242;
}

17. Center logo in header

That logo just wants to sit left. Here’s some code to wrangle that guy over to the middle. Keep in mind that it shouldn’t be too wide or maybe it should be a header image.

That logo just loves being over on the left. Here’s how to get it to the middle.

Ah, that works well. Especially with the navigation centered too.

#logo { float: none; margin: 0 auto; width: 300px; }

18. Center main navigation

You’d think it’d just be a toggle switch or an option (well, in some themes), but alas, it’s some code. But hey, here it is!

Navigation is usually aligned left.

But sometimes, especially with a centered logo, a centered navigation can work great.

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

19. Testimonials by WOO Themes: align Gravatar upper left

More on Testimonials by WOO Themes.

Out of the box, the image is down below.

If you’d like the author image up above, you’ll probably need to change a core plugin file.

Change line 88 of woothemes-testimonials-template.php from:

$tpl = '<div id="quote-%%ID%%" class="%%CLASS%%"> <blockquote class="testimonials-text">%%TEXT%%</blockquote>%%AVATAR%%%%AUTHOR%%<div class="fix"></div></div>';

 to:

$tpl = '<div id="quote-%%ID%%" class="%%CLASS%%">%%AVATAR%%<blockquote class="testimonials-text">%%TEXT%%</blockquote>%%AUTHOR%%<div class="fix"></div></div>';

20. Left-Aligned Title and Description in Business Slider (for Canvas 5.5+)

The latest (Canvas 5.5 and above) business slider has some great new options for placement of the title and description of the slide: none at all, bottom aligned, center, and full (with a slight transparent background). But they removed the previous default of left aligned. Probably because this might be tricky with the full-width option. Here’s the CSS to get that title and description aligned left again in the new version of Canvas.

In the old slider, title and description was aligned left. With a little CSS, you can have that again.

Title and description is either none, bottom, center, or full.

#loopedSlider.business-slider .content {
	background: transparent !important;
	padding: 0;
	top: 20px;
	left: 0;
	margin: 0;
	bottom: auto;
}

#wrapper #loopedSlider.business-slider .content p {
	background: #000 !important;
	background: rgba(0,0,0,0.5) !important;
	display: block;
	overflow: hidden;
}

#loopedSlider .content .title {
	background: #000;
	background: rgba(0,0,0,0.5);
}

I’ll dig deeper into this later, but wanted to get the basics in here.