Typepad Master Class: Adding Drop Cap to the First Paragraph in a Post
November 21, 2012
Welcome to the Typepad Master Class! If you've ever wanted to delve into more advanced trickery with your blog's design, the Master Class is for you. Topics covered in this series are for the adventurous or advanced blogger, so an intermediate to advanced level of knowledge of HTML and CSS will come in handy. Additionally, these guides will often require Custom CSS or Advanced Templates, so a Pro Unlimited account is necessary to access those areas and achieve the look and effects we cover. Interested in upgrading? Just head over to the Account link in your Dashboard and click on Billing Info to get started.
It happens to all of us. We don't want to spend a lot of time making changes to our blog, but we'd really like to see it looking a little more fancy.
A quick and easy way to do this is by adding a drop cap to your first paragraph. If you're not familiar with the term, this is when you use formatting to make the first letter of the paragraph stand out. You've most likely seen this in a book at the beginning of a chapter.
To add this to your own blog, if you are a Pro Unlimited subscriber, you'll need to go to Design > Custom CSS and add the following:
.entry-body p:first-child:first-letter {
float: left;
color: #903;
font-size: 75px;
line-height: 60px;
padding-top: 4px;
padding-right:
8px;
padding-left: 3px;
font-family: Georgia;
}
Similarly, you can add the same drop cap to the extended post section after you click to "Continue reading..." a post:
.entry-more p:first-child:first-letter {
float: left;
color: #903;
font-size: 75px;
line-height: 60px;
padding-top: 4px;
padding-right:
8px;
padding-left: 3px;
font-family: Georgia;
}
You can edit the color, padding, font, and other elements so that they fit your design's look in any way that you like.
We hope this has been an exciting new tip for you. Make sure to share your completed versions with us, and the rest of your Typepad community, in the user forums!