How to add a Thesis style drop cap in your theme | Blogging for beginners and newbies

How to add a thesis style drop cap in other themes

Posted on 04. Jan, 2010 by Senthil Ramesh in Blogging for beginners, Tutorial, Wordpress

Those who have used Thesis WordPress Premium Theme, definitely knows about the drop cap styling in it. For those who doesn’t know, it is making the first letter of the article, look bigger and left justified than other text following it.

This type of text and style gives us a magazine style and a nice formatting. You can see the first letter of this article standing out than others. Here is how to do it:

How to create a thesis styled drop cap in other themes

In Thesis:

Thesis theme, has a predefined styling, where you can just enclose the first letter of the article with in

<span class=”drop_cap”></span>

This is very simple one as there is predefined style for the class ‘drop_cap’ in Thesis.

For other themes:

Other themes, don’t have such a class predefined, but its not a hard job to create one. Here is how to do it.

Go to Appearance >> Editor of your admin panel in WordPress blog.

Look for style.css file

Add these following lines to it.

.drop_cap


{
font-size: 3.333em; 
line-height: 0.76em; 
padding: 0.04em 0.12em 0px 0px;

}

Thats it. Now whenever, you start writing an article just enclose the first letter of the article within

<span class=”drop_cap”></span>

Feel free to share your thoughts in comments and let me know if this can be done more easily than this.

Comments

Tags: drop cap, thesis, Tutorial

About Senthil Ramesh

Hello everyone, I am the author of NoviceBloggers.com, concerns with Blogging for beginners. Get in touch with me at Twitter or befriend me at Facebook

If you like this article and this blog, why not buy us a coffee?

Our users have made 1,710 comments, care to join in?

17 Responses to “How to add a thesis style drop cap in other themes”

Tweets that mention How to add a Thesis style drop cap in your theme | Blogging for beginners and newbies -- Topsy.com

04. Jan, 2010

[...] This post was mentioned on Twitter by PractiseSEO, Senthil Ramesh. Senthil Ramesh said: RT @NoviceBloggers How to add a thesis style drop cap in other themes http://bit.ly/6SoRp1 [...]

Reply to this comment
David Hobson

04. Jan, 2010

Thanks for the tip i might look into it.
.-= David Hobson´s last blog ..United States Get Tough With Airport Screening =-.

Reply to this comment
Suresh K

04. Jan, 2010

thanks for the nice tips it is very useful for bloggers who are using the theme other than thesis…
.-= Suresh K´s last blog ..4 Tips to Remove Default Options in Thesis Theme? =-.

Reply to this comment
- Senthil Ramesh
  
  05. Jan, 2010
  
  Thanks Bro. Glad you liked it.
  
  Reply to this comment
Ms. Freeman

04. Jan, 2010

That’s awesome, I edited my style sheet and it really does work. The only thing is mine doesn’t line up quite as nicely as yours, but its still pretty cool. Thanks for the tip!
.-= Ms. Freeman´s last blog ..9 Tips to Help Shy People Network =-.

Reply to this comment
- Senthil Ramesh
  
  05. Jan, 2010
  
  You should reduce the font size. Try 3 em.
  
  Reply to this comment
Keith

04. Jan, 2010

Thanks for the tips, I have a hard enough time remembering to put headings and lists and other reader friendly stuff in my posts, so I will leave this one out for now….
.-= Keith´s last blog ..Follow Up To Pagerank: It Really Doesn’t Matter =-.

Reply to this comment
- Senthil Ramesh
  
  05. Jan, 2010
  
  Oh but this can definitely make a great look.
  
  Reply to this comment
Stuart Conover

05. Jan, 2010

OK, that is absolutely a great trick I hadn’t stumbled across before outside of Thesis. Thanks! While I can’t use it for any of my sites right now (the one I was going to use it on is being switched over to Thesis soon,) I recently setup a site for a friend that this will be perfect for!
.-= Stuart Conover´s last blog ..Buy Zombie Receives PR4 Update =-.

Reply to this comment
- Senthil Ramesh
  
  05. Jan, 2010
  
  So are you using Thesis theme now?
  
  Reply to this comment
chandan

05. Jan, 2010

Nice tutorial, well I am using blogger blog.
.-= chandan´s last blog ..Search work at home opportunities at digital point forum =-.

Reply to this comment
- Senthil Ramesh
  
  05. Jan, 2010
  
  You cant style in blogger?
  
  Reply to this comment
Melvin

05. Jan, 2010

This is a great tip man!
.-= Melvin´s last blog ..Do You Know You’re a Boring Blogger? =-.

Reply to this comment
Benjamin Huebner from Free marketing downloads

05. Jan, 2010

I´ve tried it at one of my blogs and it is in fact as easy as it seems! Thanks – Nice little Trick!
.-= Benjamin Huebner@Free marketing downloads´s last blog ..Article Submission Software – Free Downloadable Full Version! =-.

Reply to this comment
- Senthil Ramesh
  
  05. Jan, 2010
  
  Glad you liked it Buddy.
  
  Reply to this comment
Dennis Edell

06. Jan, 2010

Very cool, seeing how it’s been a long time question of mine. If you have any other “thesis to other” tutorials, please don’t hesitate.
.-= Dennis Edell´s last blog ..Updates – Latest $10 Domain Winner, Latest Move News, and more. =-.

Reply to this comment
ranie

26. Nov, 2010

OH sorry the codes didn’t appear on my comment
ranie´s last post ..Mr Deeds

Reply to this comment