Excluding CSS injection using internal tags

Themes
1

I’m trying to use code injection to add dropcaps, but it clashes with the markdown footnotes I was using on some posts.

After trying various selector combinations, I figured there must be a way to just exclude the dropcap code from certain pages using internal tags, and then add them manually.

Something like:

<style> 
    :not(#nodropcap) .post p:first-child:first-letter  {
    font-family: "Old Standard TT";
    float: left;
    margin-top: 10px;
    margin-right: 2px;
    color: #52598c;
    font-size: 58px;
    line-height: 40px;
}

dropcap {font-family: "Old Standard TT";
    float: left;
    margin-top: 10px;
    margin-right: 2px;
    color: #52598c;
    font-size: 58px;
    line-height: 40px;}
</style>

But that’s not working and I’m struggling with the CSS syntax. Does anyone have any suggestions?

Here’s the page I’m talking about: Urban John 'Johnny' Hodapp

2

Your selector for internal tags is a bit off, tray hash-nodropcap :slight_smile:

1 Like
3

First, if you want to make sure you’re not targeting the footnotes with your dropcap styles you can change the selector like this:

.gh-content > p:first-child:first-letter {
  /* your CSS */
}

Then, if you want to still control the dropcaps on individual posts using an internal tag, then something like this should work:

article:not(.tag-hash-nodropcap) .gh-content > p:first-child:first-letter {
  /* your CSS */
}
1 Like