DropCaps for single post stopped showing in Renew

[davidferp]

Dear Team,

Back in 2017, I added the following CSS in my child theme to display drop caps for single posts only:

/*Add drop cap in all posts*/
.single-post div.entry-content > p:first-child:first-letter {
  float:left !important; 
  font-size:4em !important; 
  color: #49A896 !important; 
  margin-right:0.10em !important;
  margin-top:0.0em !important;
  line-height:90% !important; 
  text-shadow: none !important; 
}

The thing is, this piece of code does not seem to work anymore. Maybe some naming changes occurred since then? Would you be able to help?

I am using Renew, updated to the very last version of 3rd March 2020

Thanks a lot in advance!

David

[lely]

Hi David,

Thank you for the complete information.
It doesn’t work anymore because this part of the selector failed p:first-child. The first paragraph is not the first element of .entry-content anymore.

After the entry content container you have input element

<div class="entry-content content jpibfi_container"> <input class="jpibfi" type="hidden">

The input element becomes the first-child. Please try to update your custom CSS to this:

/*Add drop cap in all posts*/
.single-post div.entry-content > p:first-of-type:first-letter {
  float:left !important; 
  font-size:4em !important; 
  color: #49A896 !important; 
  margin-right:0.10em !important;
  margin-top:0.0em !important;
  line-height:90% !important; 
  text-shadow: none !important; 
}

See this: https://css-tricks.com/almanac/selectors/f/first-of-type/

[davidferp]

Hi Lely,

Thank you so much!

That is absolutely true and the change in the code you proposed works like a charm

Thanks again,

David

[friech]

We are delighted to assist you with this.

Cheers!