Ulyssesonline

the tech surfer

  • Home
  • About
  • Archives
You are here: Home / General / Create WordPress Drop Caps

August 1, 2007

Create WordPress Drop Caps

Create WordPress Drop Caps

Drop Caps. Magazines use it. Websites use it. What’s all the rage? A Drop Cap is the first letter of a paragraph that is enlarged to “drop” down two or more lines. So, here is an easy way to create drop caps in WordPress.

1. Add a span to the first letter of your post with a “class” called dropcaps. See the example below.

<span class=”dropcaps”>D</span>rop Caps. Magazines use it.

2. Next, add the followng CSS code to your WordPress Theme’s stylesheet.

.dropcaps {
font-family: Georgia, Times New Roman, Serif;
font-weight:bold;
float:left;
line-height:30px;
font-size:36px;
padding: 3px 3px 0 0;
}

.dropcaps { font-family: Georgia, Times New Roman, Serif; font-weight:bold; float:left; line-height:30px; font-size:36px; padding: 3px 3px 0 0; }

3. That’s it. See the example above.

Filed Under: General, WordPress Tagged With: WordPress, wordpress drop caps, wordpress tutorial

Comments

  1. Maj says

    June 30, 2008 at 6:20 am

    This doesn’t seem to do anything.

  2. Aziz says

    November 5, 2008 at 6:17 pm

    pravelno written:)

  3. Ed says

    January 24, 2009 at 7:15 am

    Works great for me.

  4. Carey says

    March 30, 2009 at 11:26 pm

    Yay! Thank you

  5. Vit says

    April 8, 2009 at 1:51 pm

    Great! Exact what i need.

  6. S.Pradeep Kumar says

    June 6, 2009 at 5:09 pm

    I don’t seem to find any code for changing the color here buddy ?

    How to change red into some other color ? Cheers !

    • ulyssesr says

      June 8, 2009 at 2:22 pm

      Just add color to dropcaps:

      .dropcaps {
      color:#06c;
      }

      That’s blue.

Trackbacks

  1. Doing Drop Caps Right - SilverPen Publishing says:
    May 1, 2009 at 1:33 am

    […] need a flexible way of using drop caps and employing them right where you want them. To this end, Ulysses Online has a great guide on how to create drop caps in just a few easy steps. You’ll have to be able to edit your CSS file (so this won’t […]

Copyright © 2003 - 2018