[Resolved] How can I integrate Drop Caps?

[Edin]

My old theme had a drop cap functionality build in, that’s why I have [dropcap]first letter[/dropcap] in every article.

Is there a way to integrate that in GP as well without the use of a plugin (I’m trying to minimize the use of plugins).

Thanks,
Edin

[Joni]

Just add this or similar styling to your CSS file:

span.dropcap {
	float: left;
	padding: 0 8px 0 0;
	font-size: 80px;
	font-size: 4rem;
	line-height: 1;
	color: #00b5e8;
	font-family: viga, cambria, georgia, serif;
}

Here are some tutorials:
https://www.abeautifulsite.net/css-drop-caps
http://oddbird.net/2017/1/3/initial-letter/

HTH.

[Tom]

That’s why themes shouldn’t add shortcodes.

It would be best to convert those shortcodes to simple HTML, then use the code Joni provided above to style it.

Shortcodes for something simple like a <span></span> element aren’t necessary.

[Edin]

Thank you Joni and Tom. The only problem now is that I have to change all [dropcap] shortcodes in the database directly…

[Joni]

Why on earth would you need to do that? If you deleted the theme, there shouldn’t be any of its refuse in the database. You should be making these kind of edits in the editing panel on your post or page.

[Edin]

Joni, I have 250+ articles published on the site, and I don’t have the time to open every article and change all the [dropcap] to <span class=”dropcap”> manually. So I thought I’ll try a “search & replace” plugin instead.

[Joni]

Then it shouldn’t take that long to do it if you’re going to do it en masse. I guess the thing to do is to search for the first half of the short code and replace it with the opening span tag and class for the drop, and then search for the back half of the short code and replace it with the closing span tag. I’m assuming the short code encloses the first letter of the first word. This is a prime example of why we shouldn’t always just turn to plug-ins to do our jobs for us. Sometimes they can create more problems than they solve in the long run. Just my opinion.

[Tom]

Using a search/replace plugin should be pretty easy.

[dropcap] => <span class="dropcap">
[/dropcap] => </span>

Otherwise you can always just recreate the shortcode.

[Edin]

Yes, that’s the way I planned to do this. Thanks Tom!

[Tom]

No problem 🙂

[Simon]

hi,
happy new year!
With regards the css from @Joni – how would that class be applied within the html?:

<p class=”span.dropcap”>

Also, would it work with the <mark> class in the same block? If so, would you need two </p> tags?

With best wishes

[Joni]

No, the p tag and span classes are separate.

you would write something like this:

<p><span class=”dropcap”>F</span>ourscore and seven years ago….</p>

Or I’ve also see this done but it will create a dropcap effect for the first letter of each first child paragraph. This article has some nice examples.

https://css-tricks.com/snippets/css/drop-caps/

[David]

Thanks Joni for sharing your answer 🙂

As per the drop cap first-letter of first paragraph – heres an example that applies to the content of the single post:

.single-post .entry-content p:first-child:first-letter {
  font-weight: bold;
  font-size: 3em;
  line-height: 1;
  float: left;
  padding-right: 0.25em;
}

The sizes need tweaking to suit the font and layout.

[Simon]

Joni, David, thank you for posting. I must admit I cannot get that to work. As you can guess, I am a html and css newb!

This is what is currently working (from the first link @Joni posted). I would like to add the <mark> attribute to the same wordpress block, alas not having much luck with that either.

Customising > Additional CSS:

P.drop-cap:first-letter {
font-size: 4.5em;
float: left;
margin-top: .1em;
}

HTML block:

<p class=”drop-cap”>text text text text. I want to use the <mark> attribute from here: but it doesn’t work</p>

[David]

Can you raise a new topic where you can share a link to a page where you’re trying to add the drop cap ? We can take a look at the HTML in place to see whats going on.

[Author]

Posts