Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 1

Inserting a Drop Cap


Ghady

Question

  • Answers 3
  • Created
  • Last Reply

Top Posters For This Question

Top Posters For This Question

Posted Images

3 answers to this question

Recommended Posts

  • 0
12 hours ago, Jahhhd said:

I found this YouTube video but it applies the drop cap to the first letter of every paragraph. I'm trying to tweak it to only apply to the first letter of the first paragraph but so far no luck. 

If you share link to page where you want to use dropcap. I can take a look

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 0

Hey everyone, I just wanted to share that I found a way to add a dropcap to only the first letter of a full blog post. Here is the article I referenced: https://blog.hubspot.com/website/css-drop-cap#:~:text=There are two ways you,use the type selector span.

1 - Add a code block for the first paragraph of text for the page. Put a <span> tag around the first letter of the paragraph and give it a unique class. I chose "dropcap". 

<p><span class="dropcap">I</span>first came across the practice of smoke baths when I was doing research in Indonesia. The women were really into smoking themselves as a natural perfume. Indonesians also love clove, and they also love to smoke cigarettes.</p>

Then, in the custom css tab, I added the following styles to the dropcap letter. You may need to adjust accordingly.:

.dropcap {
  float: left;
  line-height: 85%;
  width: .4em;
  font-size: 400%;
}

If anyone has any questions, comments or ways I can improve this let me know! 

Screen Shot 2021-03-05 at 1.16.17 PM.png

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment


×
×
  • Create New...