Unwanted Paragraph Tags Stopping Drop Caps

[guybower1]

Hello

I am trying to stop Cornerstone from automatically adding paragraph tags to the first paragraph of a post. I have drop caps set so that the very first word of a post will have a drop cap; that is unless the paragraph is wrapped in anything like a paragraph tag, or div etc

I manually get in and remove the paragraph tags from the beginning and end of the first paragraph, but as I continue to work through the rest of the text, the tags invariably come back. I’d like to have some semblance of autonomy in what I create and do NOT wish to see paragraph tags appear unless I put them there.

How is it possible to achieve this, or is it just best to leave that part as the final act of editing? You know, do everything else required for the post, then at the death, remove the <p> </p> tags from the first paragraph. Seems a bit counterintuitive

cheers

[nico]

Hi @guybower1,

As of now, not sure of what are you trying to say. I could not replicate it in my setup. To assist you with this issue, we’ll first need you to provide us with your URL. This is to ensure that we can provide you with a tailored answer to your situation. Once you have provided us with your URL, we will be happy to assist you with everything.

Thank you.

[guybower1]

hi Nico

Thanks for your reply. It is an inherent action by CS and is how it was now been designed

It’s not really something you need to replicate. Cornerstone, by it’s very nature now it has been upgraded, added paragraph tags to every paragraph. If I remove a paragraph tag from paragraph 1, it will replace it as I work further down the document. I cannot give you a URL as the page is not published yet, but the details are in the secure note above.

I have supplied the login details above in a secure note so you can have a look

cheers

[christian]

Hey @guybower1,

That is the normal behavior of Cornerstone which is the same as WordPress. It’s not recommended to remove that tagsbecause you’ll leave your text without proper tags. There’s also no way to disable the behavior.

If you wish to continue removing, you will need to finish writing in Rich Text editor and then remove the tags in HTML editor when you’re done.

Thanks.

[guybower1]

hi Christian and thanks for your reply

I am happy to leave the tags in if it will be more correct, but how then to have my drop caps work as I want? Every post currently has a drop cap for the first word.

If there is a better way to do this, I am more than happy to try it. Maybe wrapping the first letter in a span and targeting the span with CSS, or something like an element or class to use as the target and then use the ::first-letter pseudo element like this:-

.intro::first-letter { initial-letter: 3; -webkit-initial-letter: 3; }

Or targeting the first letter using pseudo class selectors like this:-

p:first-child:first-letter { color: #903; font-family: Georgia; initial-letter: 3; }

Just curious what my best way to approach this if I do away with using the incorrect way with no paragraph tags for the text

Incidentally, I set this up quite some time ago and just looking through CSS and I cannot even see where the formatting of the dropcaps is handled, as there is nothing in the child theme CSS at all. Has that changed with upgrades. There used to be global CSS and then child theme specific CSS. That no longer appears to be the case

cheers

[mldarshana]

Hi There @guybower1

You should be able to target the first letter of the first paragraph of your every blog post in the Blog page using the following CSS rule.

.blog p:first-child::first-letter {
    font-size: 28px;
}

Hope that helps.

[guybower1]

Hi Midarshana

Thanks so much for your reply.

And rather than choosing a font size, is it possible to have the letter take up a certain number of lines, say 2 or 3?

Regards

[rad]

Hi @guybower1,

That’s only possible with floating element, which is why tag element is required for drop cap. That CSS will only target the first letter but it has no structure to force its positioning. It’s still inline with the text but with just different font size.

Thanks!

[guybower1]

hi Rad

Thanks so much for your reply.

So if I wanted the ability of setting how many lines it took up, let’s say 3, could I wrap the first letter in a span, giving it a unique class and then target that span in CSS, including to float left, or would you suggest a different way?

I just want to be able to specify the number of lines the drop cap takes up. It seems some of the ways like using pseudo classes like initial-letter are not very well supported.

Any suggestions happily accepted

Regards

[friech]

Hi There,

Yes, you can do that. Something like:

<span class="my-dropcap">L</span>orem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Then the CSS for your dropcap

span.my-dropcap {
    float: left;
    font-size: 500%;
    font-weight: 900;
    line-height: 1;
    margin-right: 12px;
}

Hope it helps,
Cheers!

[guybower1]

cheers Friech and thanks for your reply.

Yes, this was the method I was suggesting. Have had a play and got it looking decent

Thanks again

[paul.r]

On behalf of my colleague, you’re welcome. Cheers!