Automatic Dropcap

Support
#1

hi

I followed a post in your forum to apply a dropcap automatically to the first letter of each blog post without having to use the dropcap shortcode each time. Unfortunately, I have not been able to get it to work. Here is the code your team supplied which fixed the OP’s problem

.single-post div.entry-content > p:first-child:first-letter { float:left; font-size:4em; color: #363030; margin-right:0.10em; line-height:90%; text-shadow: none; }

For me, nothing happens to the first letter at all. Any idea why not? I am using the Integrity stack

regards

Blockquote

#2

Hello There,

Thanks for writing in! please be advised that this code will only work if you are using the default WP editor and without using any shortcodes or containers. This may not apply to your single blog post because it has a different format.

Best Regards.

#3

Hi Rue

Thanks so much for the reply

So is there no way to apply a dropcap automatically to blog posts using a variation on this code?

Thanks for your help

Regards

#4

Hi there,

Yes, since the content varies then yes, it can’t be done. Else, if you’re going to add uniform content (default editor with text content)

And you may change your CSS to this,

.single-post .entry-content >  p:first-child::first-letter {
float:left; 
font-size:4em; 
color: #363030; 
margin-right:0.10em; 
line-height:90%; 
text-shadow: none; 
}

Make sure your <p> is really the first child, any element added before it will make it 2nd, 3rd, and so on, regardless of which element is added.

Thanks!

#5

hi Iam

Thanks for your reply

OK, so no enclosing the text in a div tag or anything, just start the first paragraph with a <p>, yeah?

Regards

#6

Hi There,

That will not work if the text or p tag is inside a div tag. That CSS means direct descendant and first child. See this: https://stackoverflow.com/questions/3225891/what-does-the-greater-than-sign-css-selector-mean

Hope this helps.

#7

hi Lely

Thank so much for your reply

That does not appear to work at all, regardless if it is first child or not.

I just created a post and the very first paragraph is the following:

<p>No matter where you are in the world, the motto is to always ‘<em>eat what’s in season</em>’; Thailand and fruit are no exception. Thailand has some fantastic fruits to try right now. As you explore local markets, you will constantly see a vast array of tropical fruits, yet you can always tell what is at the height of the season when you travel the streets and see particular fruits for sale from the back of a pick up or a pop up street stall.</p>

yet no drop appears

Any further suggestions to have this work Lely, or is it really just using the dropcap shortcode each time?

regards

#8

Hi again,

I just tested the above code in integrity demo and it works pretty well (see screen shot)

You may try adding the code in your Child Theme’s style.css file instead, there could be a syntax error in your Customizer which could be preventing the changes to take effect. Also don’t add any tags in your content, just write a normal post and the above code should work as expected.

If this still doesn’t work then please provide us the post URL so we can take a closer look.

Thanks!

#9

hi Nabeel

Yes, I only use the child theme CSS rather than the parent, so no issues there.

I initially had the first paragraph surround in a p tag, but have now removed that and still no changes.

The post is as yet unpublished, so here are my login details-

The post is 5 Thai Fruits To Make Your Mouth Water

Regards

#10

Hi again,

Thank you for providing the details. I went ahead and replaced the previous code with the following code in your Customizer:

.single-post .entry-content .x-text > p:first-child::first-letter {
    float:left; 
    font-size:4em; 
    color: #363030; 
    margin-right:0.10em; 
    line-height:90%; 
    text-shadow: none; 
}

Clear your browser’s cache and reload the post. Since you’re creating the posts in Cornerstone so above code will work for them. For non Cornerstone posts previous code will work.

Cheers!

#11

hi Nabeel and thanks for your reply

Yes, that is working perfectly now. I will just play around and get the positioning etc right.

I am wondering what you meant by for non-Cornerstone posts. I didn’t know there was another way to construct. Is it possible to work directly in X? I had always been using Cornerstone as knew of no other way

Regards and thanks for your help on this one

#12

Hi again,

Glad it worked. Non-Cornerstone post means the normal post created using WordPress editor see https://codex.wordpress.org/Writing_Posts

Hope this helps!