Simple but Effective CSS Hacks
1. Move the Top Navigation
The top navigation is easily missed if left in its default state
because it positions that menu above the site logo. To make it more
visible you can move it over to the right hand side.
|
1
2
3
|
#top-nav {
float: right;
}
|
2. Change the Header Image Per Page
This CSS hack lets you change the header image of individual pages —
so if for example you have a product page that needs its own special
header, or if you want to give each page its own header image, you can
use this code.
To use the code you need to replace .xxxx with the specific ID number of the page you want to change.
3. Center the Header Logo
By default your logo sits on the left hand side of the header. That’s
fine for most people but if you want to move it to the center of the
page, doing so is a piece of cake.
4. Center the Navigation Menu
If you’ve chosen to move your logo to the center of the header you
may also want to move the navigation menu to match that style.
5. Remove the Header Completely
It would be an unusual design choice to completely remove the header
but it’s your site and you can do whatever you want. If you just want
the navigation menus followed by the main body of the page, Canvas can
easily oblige with this simple line of code.
6. Remove the Title from All Pages
At the very top of each page of your site in large header tags you’ll
see the name of the page. That can be an unnecessary distraction when
you are looking for a smooth transition from the header to the body
text. So let’s remove them.
|
1
2
3
|
.page .title {
display: none;
}
|
7. Remove the Title from Specific Pages
You may not want to remove the title from every page on your site. If
you only need to remove the title from a specific page use the
following code.
Replace the xxxx with the page ID number. You can use this code multiple times by changing the page ID number with each use.
|
1
2
3
|
.page-id-xxxx .title {
display: none;
}
|
8. Remove the “Comments are Closed” Text
Comments are a great way to interact with your readers and help build
a community, but not every page or post needs to have them enabled.
When you close the comments on a post the “Comments are Closed” text is
shown instead. This draws attention to the fact that you’ve disabled
them and that might not be something you want. Let’s remove it.
9. Change User Avatar Images to Squares
The Canvas theme changes the author profile image and comment images
to circular avatars. This looks great in my opinion, but isn’t for
everyone. Thankfully, converting them back to the standard square images
is simple.
|
1
2
3
4
5
|
#post-author .profile-image img, #comments .avatar img {
border-radius: 0;
-moz-border-radius: 0;
-webkit-border-radius: 0;
}
|
10. Remove the Image Border
While we’re looking at the images in Canvas, you’ll have noticed that
every image inserted into a post has a fine gray border. Some people
like this, some don’t. If you’re one of the latter then use this code to
remove it.
|
1
2
3
4
5
|
.entry img, img.thumbnail {
background: none;
border: medium none;
padding: 5px;
}
|
Intermediate Hacks With functions.php
With the above 10 simple CSS hacks you can make the site look
completely different from its default design. but if you want to dig a
little deeper and customize your theme even further, you need to start
using the functions.php file. By adding code here you can make
fundamental changes to the structure and functionality of Canvas.
If you plan on adding code to the functions.php file then you should create a child theme.
Child themes allow you to make all of these changes without editing the
original Canvas files. It also ensures that updates to the framework
won’t overwrite all of your hard work. You can use the
WooThemes tutorial to help you create a child theme.
11. Widgetize the Header
The header in Canvas has an Advertising section that can be utilized,
but if you want to have more control of that that area you should
widgetize it. This will let you add almost anything into the right hand
side of your header, giving you greater flexibility. You can do so by
adding the following code to functions.php:
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
|
if (function_exists('register_sidebar')) {
register_sidebar(array(
'name' => 'Header Widget',
'id' => 'header-widget',
'description' => 'This is a widgetized area in the right side of the header.',
'before_widget' => '<div id="%1$s" div class="widget">',
'after_widget' => '</div>',
'before_title' => '<h3>',
'after_title' => '</h3>'
));
add_action( 'woo_header_inside', 'custom_canvas_header' );
function custom_canvas_header () {
?>
<div id="header-widget">
<?php if (function_exists('dynamic_sidebar') && dynamic_sidebar('header-widget')) : else : ?>
<?php endif; ?>
</div>
<?php
}
}
|
You then need to add the following code into the Custom CSS area (you
will also need to adjust the width and margins to suit your own design
choices).
12. Remove the Primary or Top Navigation
Canvas comes with two navigation bars by default. You have the Top
Navigation that is above your header and the Primary Navigation below
the header. Not everyone needs (or wants) to use both.
You can just add an empty custom menu into that navigation slot, but
that still leaves a block of space where a menu should be. Rather than
leave that obvious space in the design, let’s remove the navigation bar
completely.
You can remove the Primary Navigation with this code:
|
1
2
3
4
5
6
|
add_action( 'init', 'remove_canvas_main_navigation', 10 );
function remove_canvas_main_navigation () {
// Remove main nav from the woo_header_after hook
remove_action( 'woo_header_after','woo_nav', 10 );
}
|
You can remove the Top Navigation with this code:
|
1
2
3
4
5
6
|
add_action( 'init', 'remove_canvas_top_navigation', 10 );
function remove_canvas_top_navigation () {
// Remove top nav from the woo_top hook
remove_action( 'woo_top', 'woo_top_navigation', 10 );
}
|
13. Adding a Related Posts Area With Thumbnails to a Post
There are plugins that allow you to create an area after each post
with related posts from your site. Canvas includes a rudimentary
‘related posts’ feature, if you require a simple solution. To create
this area add this code to functions.php:
|
1
2
3
4
5
6
7
8
|
// Start custom_add_related_posts()
add_action( 'woo_post_inside_after', 'custom_add_related_posts' );
function custom_add_related_posts () {
if ( is_single() ) {
echo '<h3>You may also like to read:</h3></br>';
echo do_shortcode('[related_posts limit="4" image="120"]');
}
} // End woo_add_related_posts()
|
Then add this code to the Custom CSS Area:
|
1
2
3
4
5
6
7
8
|
.woo-sc-related-posts ul li {
list-style: none;
width: 100px;
float: left;
clear: none;
margin:0 10px
}
.woo-sc-related-posts { margin-bottom:20px }
|
14. Create a Search Box in the Primary Navigation Bar
You can easily add a search box to your sidebar in Canvas but doing
so takes up valuable space. Instead, let’s make use of the empty space
on the right side of your navigation bar.
Before you add any code to make this change, you need to remove the RSS icon that’s currently there. Do this by going to
Canvas > Theme Options > Style & Layout > Primary Navigation and unchecking the
“Show Subscribe Link” box at the top of the page.
Once the RSS icon is removed, add the following code into functions.php:
|
1
2
3
4
5
6
7
8
9
|
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-->' . "
";
}
|
Then add the following code to the Custom CSS area:
|
1
2
3
4
5
6
7
8
9
10
|
#nav-search .icon-search {
position: absolute;
right: 9px;
}
#nav-search {
margin-right: 9px;
top: 10px;
}
|
15. Show the Full Post for Single Item Search Results
This is a very subtle tweak but is useful for your readers.
When the search box on your site is used the results are presented as
a list of post excerpts. With this tweak, if there is only one result
from that search, the reader will be taken directly into the post rather
than being shown the excerpt.
This cuts down on unnecessary clicks for the reader and makes for a smoother experience.
|
1
2
3
4
5
6
7
8
9
10
|
add_action('template_redirect', 'redirect_single_post');
function redirect_single_post() {
if (is_search()) {
global $wp_query;
if ($wp_query->post_count == 1 && $wp_query->max_num_pages == 1) {
wp_redirect( get_permalink( $wp_query->posts['0']->ID ) );
exit;
}
}
}
|
No comments:
Post a Comment