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!
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?
Posted by: Quing Obillos | November 21, 2012 at 09:27 AM
Every great thing about blogging is only available to Pro Unlimited? Nothing for the Pro Plus?
Posted by: A Twitter User | November 21, 2012 at 09:36 AM
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?
Posted by: Gregory J. Wright | November 21, 2012 at 10:30 AM
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?
Posted by: Kymberlie | November 21, 2012 at 04:33 PM
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. :-)
Posted by: Kymberlie | November 21, 2012 at 04:36 PM
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!
Posted by: Kymberlie | November 21, 2012 at 04:40 PM
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/
Posted by: RobiNZ | November 22, 2012 at 12:56 AM
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!
Posted by: Anna Farmery | November 22, 2012 at 05:44 AM
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.
Posted by: A Twitter User | November 22, 2012 at 07:17 AM
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
Posted by: Bri | November 22, 2012 at 12:39 PM
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.
Posted by: Bri | November 22, 2012 at 01:06 PM
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.
Posted by: Mzcan | November 22, 2012 at 02:30 PM
Does this code automatically add a "drop cap" to my older posts?
Posted by: Kofla Olivieri | November 23, 2012 at 02:19 PM
Yes, Kofla, it does! I've just tried it.
Posted by: Anastasia | November 25, 2012 at 05:16 AM
This is a great feature. I love it and it's so easy to add! Looking forward to more Master Class tips!
Posted by: Anastasia | November 25, 2012 at 05:18 AM
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!
Posted by: Amy Flynn | November 25, 2012 at 10:19 AM
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!
Posted by: Amy Flynn | November 25, 2012 at 10:47 AM
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.
Posted by: Jen | November 25, 2012 at 04:11 PM
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.
Posted by: Anastasia | November 26, 2012 at 01:09 PM
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
Posted by: Hedonia | November 26, 2012 at 01:41 PM
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?
Posted by: Gregory J. Wright | November 27, 2012 at 08:59 AM
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
Posted by: Kofla Olivieri | November 27, 2012 at 01:14 PM
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.
Posted by: Kymberlie | November 27, 2012 at 05:26 PM
Yup, it's working. Odd.
Posted by: Hedonia | November 27, 2012 at 05:42 PM
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.
Posted by: Kymberlie | November 27, 2012 at 06:48 PM
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.
Posted by: Kofla Olivieri | November 27, 2012 at 09:24 PM
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
Posted by: Kofla Olivieri | November 27, 2012 at 09:27 PM
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
Posted by: Anastasia | November 28, 2012 at 05:01 AM
Ok Ill have to retry. Thanks, Kofla.
Sent from my BlackBerry® smartphone
Posted by: Anastasia | November 28, 2012 at 05:04 AM