Drop cap and jQuery Pin it button CSS help

[littleleafash]

This is not related specifically to Genesis, so it's not allowed, I apologize! I did post on the plugin's support page but no response yet.

You guys are smart, though, so I thought I'd try here to see if anyone has an idea what I should do!

I am trying to figure out what selector to use for the p selector.

When the plugin is disabled, this code renders a drop cap:

.entry-content p:first-child::first-letter {

However, when the plugin is enabled, it's gone. I've tried these:

.entry-content.jpibfi_container p:first-child::first-letter {

.jpibfi_container p:first-child::first-letter {

But neither work. I love the custom image in this plugin and would love to be able to use it! Any recs for another great pin it plugin are welcome, since I seem to be striking out here.

http://beta.skinnydip.ca

[Lauren @ OnceCoupled]

Can you turn the plugin on, so we can see the resulting HTML structure?

Best,
Lauren

---

We create mobile-first, PageSpeed-optimized, pixel-perfect custom themes! https://www.oncecoupled.com

[littleleafash]

Hi Lauren!

Oops. I was gone for a few days - I just activated it. If you could take a look, I'd be so grateful! 🙂

[Lauren @ OnceCoupled]

When that plugin is activated, the HTML structure changes from

<div class="entry-content jpibfi_container" itemprop="text">
    <p></p>
</div>

to

<div class="entry-content jpibfi_container" itemprop="text">
    <input class="jpibfi" type="hidden">
    <p></p>
</div>

Now that we have a new element before our first paragraph, we can't use first-child. Luckily, we have first-of-type which will work in this case!

This will work: .entry-content p:first-of-type::first-letter

Best,
Lauren

---

We create mobile-first, PageSpeed-optimized, pixel-perfect custom themes! https://www.oncecoupled.com

[littleleafash]

Well, you're my new best friend. THANK YOU so much. This worked like a charm!

[Lauren @ OnceCoupled]

Happy to help out a bestie! 😉

---

We create mobile-first, PageSpeed-optimized, pixel-perfect custom themes! https://www.oncecoupled.com

[Author]

Posts