How to integrate an automatic "dropcap" into posts?

Posted in: Newspaper
Post count: 39

Hi,

though there is a shortcode for drop caps (https://demo.tagdiv.com/newspaper/dropcaps/) I want to add drop caps automatically to all regular WordPress posts (best if it is possible not to add it also to custom post types…). So, I do not have to add a shortcode manually to thousands of posts – and I can change having drop caps in future without having to alter each post again…

According to
https://premium.wpmudev.org/blog/how-to-create-drop-caps-big-first-letters-in-wordpress/

there is just a bit of custom css neccessary:

div.entry-content p:first-child:first-letter {
float:left;
font-size:4em;
color: #000099;
margin-right:0.10em;
line-height:90%;
text-shadow: 0.05em 0.05em #C0C0C0; }

So, I tried to figure out which td-class I have to address to do so – but failed so far! Can you help?

Would be really great!

Kind regards, Martin

Post count: 21065

Hello!

Please try this code:

div.tagdiv-type p:first-child:first-letter {
float: left;
font-size: 4em;
color: #000099;
margin-right: 0.10em;
line-height: 90%;
text-shadow: 0.05em 0.05em #C0C0C0;
}

This code it should be working for all posts, and also you can modify the style how you want.
Hope that helps you!

Thank you!

Post count: 39

Hi Bettina,

thanks for the fast reply. Well, I just put it into the “custom css” section of the newspaper theme panel.

First, the code editor there throws an error and marks the ” p” (with the empty space) in red. If I just save it and load a page, not dropcaps do appear.

See here (copied CSS is in place):
https://www.childhood-business.de/2021/01/19/petrol-mit-neuer-linie-custom-charged/

Post count: 21065

Hello @ChildhoodBiz!

Please delete that code from above and use this code instead for your case:

div.tagdiv-type p:first-of-type:first-letter{
float: left;
font-size: 4em;
color: #000099;
margin-right: 0.10em;
line-height: 90%;
text-shadow: 0.05em 0.05em #C0C0C0;
}

And also you can modify the style how you want.
Please, let me know about your results!

Thank you!

Post count: 39

Hin Bettina,

you send me the same css like above !!! There is no difference. Can you help?

Post count: 21065

Hello @ChildhoodBiz!

I changed “p:first-child” to “p:first-of-type” because you have a picture before dropcap there.
Please try with the last code which I gave you because it should be working.
If you tried, and also you didn’t managed, then please write an email to us at contact@tagdiv.com and provide the following:

– admin url and credentials
– a link to this topic in order to identify you

Our team will take a look!

Thank you!

Post count: 39

Hi Bettina,

Yes, you were right and I was wrong. Now I saw the tiny difference – and it made a difference as it works! Thanks for your support and I am glad about this css tweak!!!

Kind regards, Martin

Post count: 21065

Hello!

I’m glad you have managed to solve the issue.
Let me know if you need further assistance.

Have a nice day!

Post count: 39

Hi Bettina,

one last question: any idea hot to make sure that drop-caps are only applied to the regular wordpress post, but not to all custom post types? Or how to allow one specific custom post type but nor others?

One of my CPTs is “cb_marken”. Maybe you have an example of that?

Kind regards, Martin

Post count: 21065

Hello!

This can be possible only if there is a class on the body of the custom post types that identifies it as being that CPT.
So, the only way you can achieve this is with custom css and not from settings.

Thank you!

Viewing 10 posts - 1 through 10 (of 10 total)
The forum ‘Newspaper’ is closed to new topics and replies.