The practice of using a large letter to mark the start of a text has been around for almost two thousand years. Illustrated caps increased usability by marking important passages and guiding readers through the text. Unlike their historic counterparts, drop caps on the Web don’t add value in terms of usability or readability—and they are hard for Web developers to control, often rendering differently across browsers.
source: smashingmagazine
To use drop caps is look more attractive to the paragraph and also dedicate entire pages to a single article. In this post will show you how make your own shortcode Drop caps. Follow the tutorial step by step.
Open your theme’s function.php and add the follow code below:
[php]
function bigletter( $atts, $content = null ) {
return ‘<span class="dropcap">’.do_shortcode($content).'</span>’;
}
add_shortcode(‘dropcap’, ‘bigletter’);
[/php]
add the CSS the your theme’s css file
[css]
span.dropcap{
float: left;
font-size: 168px;
margin-top: 20px;
margin-bottom: 43px;
margin-right: 5px;
color: #8C8273;
line-height: 37px;
}
[/css]
After you done all that, go to your post or page and add the shortcode [dropcap] your text [/dropcap]
Comments