Drop Cap Module

lefnire's picture
Posted June 15th, 2008 by lefnire
My first contrib module! The Drupal project page can be found at http://drupal.org/project/dropcap.
Per Karl Swedberg's Article, this module creates a drop cap from the first letter of user-specified paragraphs. The user designates jQuery selectors (ex, "#main_content p") whose first letter will be replaced with a drop cap.
Definition of Drop Cap: In a written work, [a drop cap] is a letter at the beginning of a work, a chapter or a paragraph that is larger than the rest of the text.
Future releases will include:
  • More letter images to choose from
  • Allow users to upload their own letter images
  • Send me suggests for anything else!
  • lefnire's blog
  • Add new comment

I tried your drop cap module

On June 30th, 2008 Visitor says:

I tried your drop cap module but I can't get it to work.. It would be bice to ship the module with a little readme.txt for instructions

just added a README.txt

On June 30th, 2008 lefnire says:

just added a README.txt file. If it doesn't show up, it's because I'm a CVS newb (I'll see if it's there tomorrow). What exactly is the prob?

pardon i'm a noob. i need

On July 4th, 2008 Visitor says:

pardon i'm a noob. i need to make my story nodes have drop cap, what selector should I input? thanks

ah, there's something I

On July 7th, 2008 lefnire says:

ah, there's something I hadn't though to put in documentation. I'll update it right after this response, but respond here because I tend to suck with CVS.

so there's two ways to go about it: (1) adding classes/id's to the content yourself, (2) using the classes/id's that already apply to your content. I think #1's easier. So here's how to go about finding/adding your classes/id's:

1) Edit your page's body in plain text (i.e., if you're using TinyMCE/FCK then disable rich text). Wrap the paragraph you want drop cap'd in a div with a class/id that you remember. For example, if your content was previously:
Hello, welcome to my site
Then wrap it like so:
<div id="dropcap">Hello, welcome to my site<div>
Then go to the drop cap settings page (/admin/settings/dropcap) and use this selector:
#dropcap

2) If you're web-dev savvy, grab Firebug and use it to determine which class/id applies to the main content of the paragraphs you want to drop-cap. (if you don't know how to do this, you're not web-dev savvy and go with #1). This option might be a bit slicker in that you don't have to wrap every page's content with a div... rather you can do something smart like using jQuery child-selectors of id's that only show on specific pages & whatnot.

anyway, hope that helps... tell me if you need more info.

thanks. will try this out

On July 16th, 2008 Visitor says:

thanks. will try this out and keep you posted. great work by the way