A few days ago a friend of mine and also a very inspiring and caring baseball and basketball coach of my son, Greg Smith, contacted me with an interest of having me design a website for our Clarksville High School Volleyball Team. I was excited and accepted the the job. He liked the work I did for our local travel baseball team, ClarksvilleColts.com and wanted something similar for the volleyball team. I was pleased to help.

The site for the Clarksville High School Volleyball team is called, VollyCats.com. The site is powered by Wordpress and provides the team, parents and fans with a quick and easy way to attain game schedules and practice dates and offers an easy way to discover the latest news about volleyball. Additionally, family friends and fans can view photos and learn more about the team.

The website is state of the art and includes all the modern technological programming expected from a website. With the first decade of the millennium coming to an end, the Internet has evolved into something more than what was commonly coined back in the early 90’s as “The Information Superhighway“. Today the Internet is very rich and robust with not only information but also with broadcasting. The Internet is in an era called Web 2.0 and it is soon reaching levels that expand its capabilities even further. Soon, the Internet will have ties into just about everything you do in your typical day. As it stands now, the Internet has migrated into televisions, cells phones and it is even broadcasted through super high speed wireless connections.

VolleyCats.com is an example of a site that is modern with Web 2.0 standards. The site content is made available via RSS and Atom syndication. Meaning, friends, family and fans can easily view new content from the site without ever even having to physically visit the site. They can stay up to date with game and practice schedules, view photos of the team and read about special events all from the convenience of their favorite RSS reader or customized home page such as My Yahoo! or iGoogle. The site can be viewed on a standard computer, or high definition wide screen laptop. It can be viewed on a digital cell phone and even viewed on a Nintendo Wii.

• Backup Your File: You are going to be modifying your current WordPress theme stylesheet.css. Before you do anything, I want you to make a backup copy of your stylesheet.
• Open your stylesheet.css file in a text editor. I recommend downloading, installing and using TextPad.
• Search for the word: blockquote. Here is an example of what to look for:

• Copy the following text and paste it into your stylesheet replacing the existing blockquote code:

blockquote {
margin: 0px 0px 0px 0px;
padding-top: 0px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 0px;
border-top: 2px dashed #000;
border-right: 2px dashed #000;
border-bottom: 2px dashed #000;
border-left: 2px dashed #000;
background: #CCFF66 url(’images/quote.png’) no-repeat 10px 5px;
}

blockquote p {
margin: 5px 25px 5px 35px;
color: #333;
font-style: italic;
}

blockquote a:link, a:active, a:visited {
color: #0000FF;
font-weight: bold;
text-decoration: underline;
}

blockquote a:hover {
color: #666666;
font-weight: bold;
text-decoration: underline;
}

• Upload the file. After you paste the above code overwriting the existing, you can now save and upload the stylesheet.css file back to your server.
• Download this graphic, name is quote.png and upload it to your current WordPress theme image directory:

• Done! That is it! Refresh a page on your blog that has a blockquote and view it. It should look like this:

A Deeper Looking Into The Code:

If you would like to modify this code to better match your current theme or if you are just curious as to the meaning behind the code, the remainder of this article will take the code and explain what it all means. At this point in time, if you are satisfied with the current look, you are totally done. But again, if you want to learn a few things about CSS, keep on reading….

margin: 0px 0px 0px 0px;

The margin always goes in this order: Top, Right, Bottom, Left. So in this case, you can see that I have chosen not to use any margins at all. If you would like the blockquote to be a little narrower than the width of your post, you can add 5px to the left and right side. This will shrink the width of your blockquote by 10px total.

padding-top: 0px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 0px;

Padding is similar to margins. Only difference is this specifies how much padding “cushion” you want from the margin. Once again, I have chosen to not use any padding. Feel free to experiment around with the margin and padding to see if you can make the blockquote look even better with your current WordPress theme.

border-top: 2px dashed #000;
border-right: 2px dashed #000;
border-bottom: 2px dashed #000;
border-left: 2px dashed #000;

The border is what makes this blockquote. I love the dashed border. Basically, there are four sides to a blockquote: Top, Right, Bottom, Left. Each side can have a border. The border can be x amount px wide. I chose to make the border 2px wide on all four corners. You can play around with this and make it 1px or even 3px. Secondly, I chose to make the border dashed. You can also play around by making the border solid or even dotted. The last thing I chose was a black border by using #000 as the color. Once again, you can play around with the border color by changing this value to something different.

background: #CCFF66 url(’images/quote.png’) no-repeat 10px 5px;

This is what shows the background color and the little quote graphic on the top left corner. If you would like to play around and change the background color, go for it and have fun!

blockquote p {
margin: 5px 25px 5px 35px;
color: #333;
font-style: italic;
}

This code gives specific instructions on how a paragraph should look when wrapped in the <blockquote> </blockquote> tags. Just like mentioned before, the margin always goes in this order: Top, Right, Bottom, Left. Because I have chosen to use that little quote graphic, I needed to use margins on the paragraph text to align the text so that it would appear to be within a quote. As you can see I have chosen to use 35px of left margin. If you want to use the quote graphic, I wouldn’t mess with this code. The second half to this code is the font color and the style. Feel free to modify this if you would like.

blockquote a:link, a:active, a:visited {
color: #0000FF;
font-weight: bold;
text-decoration: underline;
}

This code gives instructions on how hyperlinks should look within a blockquote. If you have modified the background color and or the font color, you may also want to change the hyperlink color. This code specifies the color of a new, active and visited link. Additionally, this code makes the links bold and underlined.

blockquote a:hover {
color: #666666;
font-weight: bold;
text-decoration: underline;
}

This last line of code is just another added bonus. It basically controls the color of a link when you roll your mouse over the link. Just like the above, I have chosen to make the link bold and underline it. Feel free to play around and change the color if you want.

References

Do you want to learn more about CSS and stylesheets? Here are some handy references that will teach you more.

• http://www.w3schools.com/css/css_howto.asp
• http://www.echoecho.com/csslinks.htm
• http://www.quackit.com/css/css_hyperlinks.cfm

If you should have any questions, comments or suggestions feel free to drop a comment. I am here to help.