Typepad Master Class: Adding Drop Cap to the First Paragraph in a Post

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.

The drop cap in action.

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!

Comments

[Quing Obillos]

Really nice tip! Adds flare to our entries. :) My only concern is it also drop caps the first letter of a phrase in a blockquote. Is there a way to eliminate this?

[A Twitter User]

Every great thing about blogging is only available to Pro Unlimited? Nothing for the Pro Plus?

[Gregory J. Wright]

This is great. But it seems to only work on or off. How can we change the code so that we can selectively use it?

[Kymberlie]

In my own testing, adding this CSS does not also add it to a blockquote in the paragraph. You can see this here:
http://kymberlie6.typepad.com/footer/2012/11/blockquote-test.html

If you're seeing something different, could you open a help ticket so that we can take a look at what's happening?

[Kymberlie]

There are many great things you can do at all levels of Typepad, but to do the more advanced stuff, you will need to be at a higher level.

It looks like Brianna opened you a help ticket to discuss upgrading your account with you previously, so if you missed this, you might want to check it out. Go to Help > Past Tickets to see what she had to say. :-)

[Kymberlie]

Do you mean you're only seeing this happening in some posts but not others? Could you open a help ticket and give us the URLs to posts where it should be working and isn't so that we can work with you to get this straightened out? Thanks!

[RobiNZ]

I'd like it to apply to only the first paragraph in a post, or just ignore block quoted indents. Is there a CSS code to do that?

When I applied the code it also drop capped indented, paragraphs, URLs etc where they opened a new paragraph.

See first post on http://rcd.typepad.com/test/

[Anna Farmery]

Can you keep these coming, I am loving how it is changing my blog.....Is it possible to give some tips on making it look less blog like and more website....so in terms of layout, maybe horizontal layout rather than vertical?

Loving these lessons though...and already incorporated this one!

[A Twitter User]

Thanks..yea, she did . I know. But there's no budget for upgrade yet. I'm not making my blog a business endeavor so I opted for the pro plus. I just wish that there are more beautiful and nicer features like these are also available for pro plus subscribers.

[Bri]

Bree, when I opened a ticket for you on the 15th I made sure to let you know that you now have the Unlimited level for 90 days. This was so you could test all the tips we're posting. I hope you haven't forgotten that and are taking advantage of the upgrade to try out the tip that Kymberlie posted! :D

[Bri]

Hi Robin, can you open a ticket a Help > New Ticket, and add a screenshot or the link you shared so that we can see the behavior and test in your account?

It seems like your theme's styles aren't being inherited by the other paragraphs, but we'll need to spend more time and take a closer look at it.

[Mzcan]

I need css code for the first part, but liked the information a lot.
It's only vertical design given here, but horizontal design also considerable. Love doing that and making blogging better.

[Kofla Olivieri]

Does this code automatically add a "drop cap" to my older posts?

[Anastasia]

Yes, Kofla, it does! I've just tried it.

[Anastasia]

This is a great feature. I love it and it's so easy to add! Looking forward to more Master Class tips!

[Amy Flynn]

How much fun is this? I just added it, changed the color to match my blog and made the letter size a bit smaller. Love it!

Thanks for the fun Master Class tip! Like the others I am looking forward to more!

[Amy Flynn]

Unfortunately it doesn't seem to add the Drop cap to posts that have a picture before the first letter! That's lousy since images enhance the post's appeal greatly. I am manually adding to a few on my front page.

Is there CSS to put in to make it see the first letter of the post after an image?

Thanks!

[Jen]

Hi Robin! In working on this same issue for another blogger, I found adding some CSS to the Custom CSS field *below* the other drop-cap CSS at Design > Custom CSS reset the blockquote section to the default:

.entry-content blockquote p:first-child:first-letter {
color: #000000;
float: none;
font-family: Verdana;
font-size: small;
line-height: 150%;
padding-left: 0;
padding-right: 0;
padding-top: 0;
}

You may need to adjust some of the attributes - color, font-family, font-size, line-height - to match the default formatting of the blockquote. In my checking with your test blog styles, the above CSS should match.

If anyone else uses this same code, you'll want to adjust to match your own blog's formatting for the post body.

[Anastasia]

Same here. The code doesn't add the drop cap if there's a picture before the first letter. But I really don't mind adding pictures after the first paragraph.

[Hedonia]

I just added the code, and oddly it *only* drop caps in blockquote. See: http://hedonia.seantimberlake.com/hedonia/2012/08/the-food-poet-sylvia-plaths-mushrooms.html

[Gregory J. Wright]

Hi Kymberlie, I meant that I don't want it to apply to all my posts. Only ones I select. But it seems the code applies it universally. Is there a way to apply is selectively?

[Kofla Olivieri]

It worked for me, and all my posts (on my second blog) have a picture before the first letter. Here is an example:

http://www.koflaolivieri.com/zx14r/2012/08/una-vuelta-al-pasado.html

[Kymberlie]

When I check your post, I'm now seeing it at the top as well as in the blockquote. Are you seeing it at the top of the post now as well?

If you continue to have problems, could you open a help ticket? That way the entire team can work on this issue with you.

[Hedonia]

Yup, it's working. Odd.

[Kymberlie]

This code will add it to all of your posts.

If you're interested in applying it to only some posts, you'd need to manually edit your HTML to do so. If you'd like more information on this, just open a ticket and we'd be happy to help you further.

[Kofla Olivieri]

I just realized the code doesn't add the drop cap if I use Mozilla Firefox as my browser. I can see the code implemented in my blog when I use Internet Explorer.

[Kofla Olivieri]

This Custom CSS code does not work with Mozilla Firefox, it is only visible on my blog when I use Internet Explorer.

http://www.koflaolivieri.com/zx14r/2012/08/una-vuelta-al-pasado.html

[Anastasia]

It works for me with Firefox but the code doesnt add the drop cap if you insert a photo before the 1st letter.
Sent from my BlackBerry® smartphone

[Anastasia]

Ok Ill have to retry. Thanks, Kofla.
Sent from my BlackBerry® smartphone