Archive for the ‘CSS’ category

Tweaking your WordPress Theme (Part 2)

August 20th, 2010

In today’s post, we will be sharing another three tips on tweaking your WordPress theme

Page Navigation

Many themes display all of your pages across the top of your site. But let’s say you’d like to exclude a page from the main navigation.  Here’s one way you can do it:

Look for the following code (usually in the header.php file):

<?php wp_list_pages(); ?>

Change it to this:

<?php wp_list_pages(‘exclude=4’); ?>

This will tell WordPress to list all your pages except for the page with ID 4. You can change this number to whichever Page ID you’d like to exclude.

If you want to exclude more than one page, simply separate all the page IDs with a comma, like this:

<?php wp_list_pages(‘exclude=4,5,7,10’); ?>

For more information on WP list pages: http://codex.wordpress.org/Template_Tags/wp_list_pages

Add Something (Anything) to the End of Every Blog Post

Maybe you want to add a link to subscribe to your newsletter, an advertisement, etc. To the end of every blog post. Here’s how you do it:

The file you need to edit is the single.php. This is the template that displays your single articles. Open the file and find a good spot for the content you want to add. For example, to add a “Subscribe to newsletter” link after your post (and before the comments):

<?php the_content(); ?>

[the “subscribe to newsletter” link]

<?php comments_template(); ?>

Changing the Header Image

Websites are often judged by their looks and the first impression comes from the header – it is the first thing that your visitors see.

Your theme’s header is specified in the header.php and the style.css files. In the header.php file, you may see:

<div id=”header”>

<div id=”headerimg”>

<h1>

<a href=”<?php echo get_option(‘home’); ?>”>

</h1>

<div class=”description”>

<?php bloginfo(‘description’); ?>

</div>

</div>

</div>

And in the styles.css file, you may see:

#header {

background: url(“<?php bloginfo(‘stylesheet_directory’); ?>/images/header.jpg”>

no-repeat bottom center; }

#headerimg {

margin: 10px 8px 0;

height: 192px;

width: 740px; }

To change the image file, replace the “header.jpg” with the name of the new image file you have uploaded to replace it. If it is in a different directory, replace the bloginfo() tag with the address of the image’s location.

If you are using an image that is the same size, then simply replace the image. But if the image is a different size, change the height and width in the #headerimg section.

For more information: http://codex.wordpress.org/Designing_Headers

Tweaking your WordPress Theme (Part 1)

August 18th, 2010

WordPress is one of the most popular CMS platforms in today’s web design industry, largely because of the vast selection of available themes, free and commercial. But most often a theme is only a starting point – there is no such thing as a perfect theme – many website owners start with a great theme and tweak it to perfectly suit their needs.

Tweaking is not a privilege of those proficient in scripting or programming. There are many “customizations” you can make to your WordPress theme, even if your scripting/design knowledge and experience is limited.

Here are some of the easy customizations you can make to your WordPress theme.

  1. Edit the theme’s CSS
  2. Display post excerpts or full content
  3. Excluding/including a category
  4. Crafting page navigation
  5. Add something (anything) to the end of your blog posts
  6. Change the header image (if theme has a header image)
  7. Change the sidebar
  8. Add contact form
  9. Add Google Analytics tracking code

We will be discussing the first 3 customizations in this post.

Edit Theme CSS

You can tweak colors, fonts, layouts, backgrounds and other visual elements by editing the Cascade Stylesheet, or CSS. Most of the time, you will find the theme’s CSS style in the file style.css. You can access this file via Appearance > Editor in your WordPress admin panel.

How to:

  1. Locate the attribute you want to edit. The attributes are identified by names indicating sections, such as body, header, etc.
  2. Make the changes to the code displayed between the curly brackets { }.
  3. Save the changes

For more information: http://codex.wordpress.org/CSS

Display Post Excerpts or Full Content

By default, your theme will display the full content of your blog posts on your home page. But if you would rather display only a short excerpt from the post as a little “teaser” to click through to the full article, you can tweak your theme to display excerpts.

To do this, you will need to get familiar with two tags:

1)      The tag that displays your full post content is <?php the_content(); ?>

2)      The tag that displays your post excerpt is <?php the_excerpt(); ?>

All you need to do is replace the content tag with the excerpt tag on your index.php file. Then, when you write a new post, enter in your article summary (or teaser) in the Excerpt field.

*Note* If no excerpt is set, it will automatically display the first few sentences of your blog post.

For more information on excerpts: http://codex.wordpress.org/Excerpt and http://codex.wordpress.org/Template_Tags/the_excerpt

Excluding/Including a Category

Let’s say you want to display posts from only one category on your homepage, or you want to exclude posts from one or more categories. Here’s how you do it:

Add this code where you want the posts to be displayed:

<?php query_posts(‘cat=3’); ?>

This code will display posts only from category ID 3. Change this number to whichever category ID you’d like to include.

If you want to do the opposite, all you need to do is add a “-“ in front of the category ID number, like this:

<?php query_posts(‘cat=-3’); ?>

This will exclude all posts which have the category ID 3.

For more information on query posts: http://codex.wordpress.org/Template_Tags/query_posts

Improving Your Page Speed (Part 4)

July 22nd, 2010

CSS is a style sheet language that is used to control the overall look and style of a website.  When website developers program CSS, they often leave lines in between the codes for better viewing.  This makes the code easier to read and modify.  However, the more spaces and lines a CSS file contains, the longer it takes for the page to load.

Under Page Speed, there is an option called “Minify CSS”.  It provides optimized versions of your website’s CSS files.  This option helps website owners to delete the unnecessary lines and spaces in order to boost their web pages’ loading speed.

The problem with minifying your CCS files is that they will be hard to read and hard to edit.  To solve this problem, we recommend the following.

  1. Back up your original CSS file by downloading it from your website.
  2. Download the optimized version of CSS from Page Speed.
  3. Replace the original CSS file on your website with the optimized one.

In terms of functionality, your optimized CSS file is identical to the original one.  By doing the above, your page speed will significantly increase.

In case you need to modify your website style, you can make changes in the original CSS file saved on your computer and then upload it to your website.  You can then use Page Speed to optimize your CSS file again and use the optimized one for faster loading.

CSS Lists as Hierarchical Navigation: Horizontal Menu with Background Image (Buttons)

June 19th, 2009

We will end this CSS Menu Series by learning how to turn this:

  • Home
  • Services
  • Products
  • Support
  • About
  • Contact

into this:

buttonmenu

1. Let’s start with the HTML code for our CSS menu:

<div id=”mainmenu”>
<ul>
<li><a href=”#”>Home</a></li>
<li><a href=”#”>Services</a></li>
<li><a href=”#”>Products</a></li>
<li><a href=”#”>Support</a></li>
<li><a href=”#”>About</a></li>
<li><a href=”#”>Contact</a></li>
</ul>
</div>

2. Then, we will have to remove the bullets by creating a new CSS rule:

#mainmenu ul {
list-style: none;

padding: 0;
margin: 0;
}

3. Next, to get these menu items all on one line, we will insert this CSS rule:

#mainmenu li {
float: left;
margin: 0 0.15em;
}

4. Now that we’ve got the menu items all lined up next to each other, we need to make the buttons. We will be using a background image to create the buttons.

#mainmenu li a {
background: url(background.gif) #FFFFFF
bottom left repeat-x;
height: 2em;
line-height: 2em;
float: left;
width: 9em;
display: block;
border: 0.1em solid #DCDCE9;
color: #0D2474;
text-decoration: none;
text-align: center;
}

The Full CSS Code

So, to achieve the menu, you will add the following lines to your CSS code. The below example is for an internal stylesheet, if you are using an external stylesheet, simply add the lines between to your CSS file.

<head>

<style type=”text/css”>

#mainmenu {
width:30em
}

# mainmenu ul{
list-style: none;
padding: 0;
margin: 0;
}

# mainmenu li {
float: left;
margin: 0 0.15em;
}

# mainmenu li a {
background: url(background.gif) #fff bottom left repeat-x;
height: 2em;
line-height: 2em;
float: left;
width: 7.5em;
display: block;
border: 0.1em solid #DCDCE9;
color: #8CC919;
text-decoration: none;
text-align: center;
}

</style>

</head>

*NOTE: You can specify any hover effect for these menu items, including changing the background image or the text color. Simply make a copy of the entire #mainmenu li a CSS rule and change the selector to #mainmenu li a:hover

Example, as in our image above,

#mainmenu li a:hover {
color: #333333;
}

Resources

CSS Lists as Hierarchical Navigation: Pop Out Menu

June 9th, 2009

Creating a pop out menu is very similar to creating a dropdown menu.

We’ll start by adding a nested list to our basic list menu.

<ul id=”mainmenu”>
<li><a href=”home.html”>Home</a></li>
<li><a href=”services.html”>Services</a></li>
<li>

<ul>
<li><a href=”services1.html”>Service 1</a></li>
<li><a href=”services2.html”>Service 2</a></li>
<li><a href=”services3.html”>Service 3</a></li>
</ul>

</li>
<li><a href=”products.html”>Products</a></li>
<li><a href=”support.html”>Support</a></li>
<li><a href=”about.html”>About</a></li>
<li>

<ul>
<li><a href=”history.html”>Company History</a></li>
<li><a href=”staff.html”>Staff</a></li>
<li><a href=”press.html”>Press Releases</a></li>

</ul>
</li>
<li><a href=”contact.html”>Contact</a></li>
</ul>

With this nested list in place and without changing the CSS, the menu will display as follows:

popout menu 1

By modifying the CSS, we can move the submenus to the right and hide them until the user hovers over one of the parent menu items. Here are the steps

1. Set the position of the main menu items to relative.

#mainmenu li {
position:relative;
}

2. Position the submenus absolutely and hide the submenus.

#mainmenu li ul {
position: absolute;
width: 150px;
left: 118px;
top: 5px;
display: none;
}

3. Style the submenu options.

#mainmenu li ul li {
font-size: smaller;
}

4. Display the submenu when the user hovers over the main option.

#mainmenu li:hover ul {
display: block;
background-color: #8CC919; /*for IE7*/
}

Note: the background-color declaration is necessary for Internal Explorer 7. Without it, the submenus can disappear while the user is hovering over them.

5. Position a tags relatively. This is another fix for Internet Explorer 7. If the a tags are left statically positioned, then they won’t fill the full width of their parent list items and the menus will only work when users hover over the text of the link.

#mainmenu a {
position: relative; /*for IE7*/
}

The Full CSS Code

So, to achieve the vertical menu, you will add the following lines to your CSS code. The below example is for an internal stylesheet, if you are using an external stylesheet, simply add the lines between to your CSS file.

<head>

<style type=”text/css”>

ol, ul {
list-style: none;
}

#mainmenu {
margin: 10px;
width: 120px;
font-family: Tahoma;
}

#mainmenu li {
position:relative;
display: block;
border: 1px solid #333333;
border-top: 0px;
}

#mainmenu li:first-child {
border-top: 1px solid #333333;
}

#mainmenu a {
display:block;
padding:3px;
text-decoration:none;
background-color:#333333;
color:#FFFFFF;
position: relative; /*for IE7*/
}

#mainmenu a:hover {
background-color:#8CC919;
color:#FFFFFF;
}

#mainmenu li ul {
position: absolute;
width: 130px;
left: 79px;
top: 5px;
display: none;
}

#mainmenu li ul li {
font-size: smaller;
}

#mainmenu li:hover ul {
display: block;
}

</style>

</head>

And your pop-out menu now looks like this:

popout menu 2

Resources:

Next week, we will end the CSS Navigation Menu series with “Menus with Background Images”