I have a tab in my navigation named “Tutorials” – this page is blank. Now, when I write tutorials I do them under posts, so they show up under categories.

When you click on the category “Tutorials” there is a nice display of the things I have written. My thought was, how can I link my blank “Tutorials” page to this category? I thought it perhaps wasn’t possible so my next thought was that I should create a page template. While searching out how I might do this, I checked out the Themeshaper Forums and found a topic related to what I was looking for. It turns out, my first thought is possible – you can change the URL of your page tabs. Easy.

1. Download & activate the plugin “Page Links To“.
2. Copy the URL that you want your page to link to.
3. Create a new page with the desired title.
4. Scroll down to the bottom and you will see a text area where you can paste the URL of your choice.
5. Update your page and check it out.

Credit to Chris from Thematic 4 You for posting how to accomplish this.

This is a contribution to the tutorial I wrote on First Letter CSS. Here are a few copy codes for you to use on your website. You can use these both personally and commercially. You may not redistribute my exact works. You may build upon/edit and redistribute your own codes. The images displayed are not to be redistributed.

p:first-letter {
color: #0b3c4c; /* This is the color of the letter */
background: #1a8bb2; /* This is the background color of the letter */
-webkit-border-radius: 10px; /* This is the border radius */
-moz-border-radius: 10px; /* This is the border radius */
border-radius: 10px;  /* This is the border radius */
display: block;
font-family: georgia; /* This is the font */
font-size: 36px; /* This is the font size */
font-weight: bold; /* This makes the font bold */
line-height: 100%; /* This is the amount of space between lines of text */
padding-left: 5px; /* This is the space from the left of the letter */
padding-right: 6px; /* This is the space from the right of the letter */
}

p:first-letter {
color: #0b3c4c; /* This is the color of the letter */
background: #1a8bb2; /* This is the background color of the letter */
-webkit-border-radius: 25px; /* This is the border radius */
-moz-border-radius: 25px; /* This is the border radius */
border-radius: 25px;  /* This is the border radius */
display: block;
font-family: georgia; /* This is the font */
font-size: 36px; /* This is the font size */
font-weight: bold; /* This makes the font bold */
line-height: 100%; /* This is the amount of space between lines of text */
padding-left: 5px; /* This is the space from the left of the letter */
padding-right: 6px; /* This is the space from the right of the letter */
}

color: #0b3c4c; /* This is the color of the letter */
background: -webkit-gradient(linear, left top, left bottom, from(#4dc5ee), to(#1a8bb2)); /* This is the gradient background */
background: -moz-linear-gradient(top,  #4dc5ee,  #1a8bb2); /* This is the gradient background */
filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#4dc5ee', endColorstr='#1a8bb2'); /* This is the gradient background */
-webkit-border-top-left-radius: 10px;
-webkit-border-bottom-right-radius: 10px;
-moz-border-radius-topleft: 10px;
-moz-border-radius-bottomright: 10px;
border-top-left-radius: 10px;
border-bottom-right-radius: 10px;
display: block;
font-family: georgia; /* This is the font */
font-size: 36px; /* This is the font size */
font-weight: bold; /* This makes the font bold */
line-height: 100%; /* This is the amount of space between lines of text */
padding-left: 5px; /* This is the space from the left of the letter */
padding-right: 6px; /* This is the space from the right of the letter */

p:first-letter {
color: #0b3c4c; /* This is the color of the letter */
display: block;
font-family: georgia; /* This is the font */
font-size: 42px; /* This is the font size */
font-weight: bold; /* This makes the font bold */
line-height: 100%; /* This is the amount of space between lines of text */
}

p:first-letter {
color: #0b3c4c; /* This is the color of the letter */
background: #1a8bb2; /* This is the background color of the letter */
border: 1px solid #0b3c4c; /* This is the border */
display: block;
font-family: georgia; /* This is the font */
font-size: 36px; /* This is the font size */
font-weight: bold; /* This makes the font bold */
line-height: 100%; /* This is the amount of space between lines of text */
padding-left: 5px; /* This is the space from the left of the letter */
padding-right: 6px; /* This is the space from the right of the letter */
}

A trend is happening in the world of WordPress where designers are making the first letter of blog posts stand out.

Screenshot from www.adrianpelletier.com

I will teach you two ways of doing this. The first is the easiest. Simply download the plugin “Drop Caps for WordPress.”

The other way of doing this is to add a simple line of CSS to your stylesheet. *Note: This is not supported in IE.

1. Open your stylesheet
2. Paste the following code into your stylesheet:

p:first-letter {
color: #625056; /* This is the color of the letter */
font-family: Georgia; /* This is the font of the letter */
font-size: 26px; /* This is the size of the letter */
padding-right: 2px; /* This is the space to the right of the letter */
padding-bottom: 2px; /* This is the space to the bottom of the letter */
}

If you are using WordPress, you will notice that the down side to using this code is that the first letter of every paragraph will be capitalized. I think what most people are looking for is css for the first letter only. To fix this problem simply change p:first-letter to .post p:first-of-type:first-letter.

.post p:first-of-type:first-letter {
color: #625056; /* This is the color of the letter */
font-family: Georgia; /* This is the font of the letter */
font-size: 26px; /* This is the size of the letter */
padding-right: 2px; /* This is the space to the right of the letter */
padding-bottom: 2px; /* This is the space to the bottom of the letter */
}

Screenshot from www.markboulton.co.uk

If you really want to make your first letter stand out, consider adding a background or a border. There are more ways of doing this but these are the basics. Enjoy =)!

Here are three very helpful articles. Learn how to make yourself known on the web, write better CSS and learn ten common design flaws that frustrate your website’s users.

Marketing Yourself: What tools to use by Denis Designs
5 Ways to Instantly Write Better CSS by NetTuts
10 Common Design Flaws that Frustrate Your Website’s Users by Media Contour

Photo by Pixomar @freedigitalphotos.net