How to Add Dropcaps to Your CMS Made Simple Website

In books and published works an oversized “Initial” fancy letter, or “Dropcap” is often used as the first letter of a book or chapter.  This is sometimes found in high quality website designs as well, but is not very common on sites with generated content due to the extra work involved to set it up. Here is a handy way to add dropcaps to your CMS Made Simple website.

I have made a little CMS Made Simple plugin called “Dropcaps” that you can install on your CMSMS site by saving it to the “plugins” folder of your web root.  Once you have done that, it will appear in your “tags” list under Extensions in the admin panel.

This plugin is a SMARTY modifier that parses a blob of text, detects the first block level element (paragraph or div), and then wraps the first letter in two <span> tags with certain classes like this:

<p>
   <span class="firstLetter">
      <span class="char_N">N</span>
   </span>
   <span>unc rutrum tristique nulla, et feugiat purus scelerisque vitae. Praesent sagittis, dolor eget mattis varius, tellus odio semper urna, id mattis tellus arcu id dui. Quisque adipiscing tristique enim, ut volutpat enim porttitor sit amet.
   </span>
</p>

This plugin is designed to produce the mark-up required by the dropcaps css method published by safalra.com.  However, I also included a “per-letter” class so that it can be used for illustrated dropcaps that cannot be achieved with CSS alone.  Simply make a sprite image, and include a different background offset for each letter as demonstrated in Dave Shea’s classic “CSS Sprites” post on A List Apart.

Ok, so here is the CSS for Salafra’s CSS-only method:

The CSS


.firstLetter{
 display:block;
 float:left;
 margin-top :-0.63em; [[* use -0.205em for two lines *]]
 margin-left:-0em;
 margin-right:0.5em;
 height:4.5em;
}
.firstLetter span{
 font-size:5.6em; [[* use 3.33em for two lines *]]
 line-height:1.0em;
 text-shadow:5px 5px 0px #eee,7px 7px 0px #707070;
}
.firstLetter + span{
 margin-left:-0em;
}

Limitations

This plugin does not currently detect html entities.  So if your string begins with &amp; it will wrap the ampersand in the firstletter span tag and break your HTML.  Sorry. I will probably update it in the future to pad the room against paragraphs that start with html entities, but not today.

Cheers!

Looking for quality CMS Made Simple Hosting? Look no further than Arvixe Web Hosting!

Tags: , , , , , , , , , , , , , , , | Posted under CMS Made Simple | RSS 2.0

Author Spotlight

Ken Griffith

Ken Griffith

Ken Griffith lives in Nairobi, Kenya and is a web developer for Cottage Networks. He uses CMS Made Simple as his preferred content management system for most web projects.

Leave a Reply

Your email address will not be published. Required fields are marked *


− 5 = 3

You may use these HTML tags and attributes: <a href="" title="" rel=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>