Posted by Garry Conn on September 9th, 2007
Tagged With:
Sometimes finding the perfect pre-made custom WordPress theme is hard to do. I don’t know about you, but I have never found a WordPress theme that was absolutely perfect. I have always had to modify the theme to some extent. This article will teach you about customizing how your blockquotes look. I am sure that you have visited many blogs that have cool looking blockquotes. This article is going to help teach you how to display cool looking blockquotes. In this article I will supply you with some code to that will upgrade your existing blockquotes. Additionally, I will show you how you can modify this code to better match your current theme. Lets begin.
- 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.
If you should have any questions, comments or suggestions feel free to drop a comment. I am here to help.
Tagged With:
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.