Hi friends! I’m here today with a quick 5-minute video that’s going to help you quickly and easily add some style to your blog or website!
If you’ve ever heard the term “drop cap” and didn’t know what it meant, you’re about to find out! It’s an elegant way to add a bit of style to the written word. It used to be used a lot in historical documents, and it can be found at the beginning of each chapter in some books, as well as in newspaper articles. It’s the large capital letter that begins the first paragraph of a document, chapter, article, etc.
I’ve found a super simple way to add a drop cap to every blog post on a website, without having to remember to add the code each time! And you can easily style it to match the look and feel of your blog!
Check out this quick vid to get the deets!
Here is the CSS for the plugin so you can style it just the way YOU want!
float:left;
font-size:300%;
font-weight:bold;
line-height:1em;
margin-bottom:-0.4em;
margin-right:0.1em;
padding-right:0.1em;
position:relative;
font-family:georgia, serif;
}
span.cap span{
display:block;
height:0pt;
position:relative;
right:0.06em;
top:-1.06em;
}
span.cap:before{
content:attr(title);
color:#ccc;
}
If you liked this video, please share it so we can all have prettier homes on the web! If you add a drop cap to your posts or pages, leave a link to your site so I can check it out!
My goal is to help you learn how to make whipping your website into shape as easy and fun as a walk in the park! Happy styling!
Love this tutorial video!! I had a theme before where I used short code to add a drop cap. I’ve since switched to a different theme and don’t have that option. So, this is great.
Just curious, if I don’t have the Thesis theme, can I paste the css code anywhere in my style sheet? Does the position of it matter?
Thanks a bunch!
Hey Jennifer! If you go to your WordPress dashboard, and then hover over Appearance and click “Editor”, you might find a custom.css file that you can edit. It’s best to add it to a custom.css file so that if you ever update your theme, you still have all of the edits that you’ve made (when you update a theme, it replaces the style.css file, which will replace the file that you’ve added custom code into – but it leaves the custom.css file alone).
Let me know if you can’t find that and I’ll try to help you further! I’m so glad you liked the video! 🙂