Upgraded to Ziplist 2.4 and Ziplist CSS Messed Up Now

I am so annoyed that I’ve wasted the day trying to fix something that shouldn’t be broken.

The ‘Save Recipe’ issue is do to Ziplist adding an “easy” custom button. I want to go back to my previous version where CSS WORKED! Unfortunately, then I won’t be able to edit my posts.

Sorry to hear you are having problems. We created the simpler custom button solution to help simplify the solution for people who weren’t used to working with style sheets. You should be able to simply paste an image URL into the new settings. If this isn’t working for you, we’d love to help get you fixed up!

Can you send us a link with a recipe that displays the problem so we can take a look?

Thanks

My buttons have a hover aspect using background positioning (as you can see from the print button). This is not possible with whatever the new update did. I can’t get rid of the default blue Ziplist button unless I use the “simpler” custom button feature, in which case I can’t set up a hover, as far as I can tell.

Also, I for the life of me can’t figure out WHY the huge gab at the bottom after the notes is there. Can’t seem to get rid of it either.

https://sarahsbakestudio.com/2014/03/best-chocolate-chip-cookies/

Hi Sarah,
We got your email and will try out best to get a solution out to you as soon as possible.
Thanks for your patience

I decided to redo my Ziplist buttons since this problem exists.

However, I am still having the gap issue I previously mentioned. It appears that this is what is causing the gap:

<p><script type=”text/javascript”>wk_bootstrap();</script>
<img src=”https://3po.ziplist.com/wp?url=http%3A%2F%2Fsarahsbakestudio.com%2F2014%2F03%2Fbest-chocolate-chip-cookies%2F&#8221; height=”0″ width=”0″></p>

Anything? This is really annoying.

Hi Sarah,
Sorry for the delay in replying. Try adding the following css to your stylesheet:

.zlrecipe-container-border p:last-of-type {
    margin-bottom: 0px;
    line-height: normal;
}

Let us know how that works out.

Thanks

There is less of a gap, but there is still a gap.

What is the deal with this? I don’t understand why this has become an issue, although I don’t know what was changed to the plugin in the recent updates either.

Hi Sarah,
Sorry the update has been a bit bumpy. From what I can tell your custom stylesheet, sbsCustom.css has padding that is causing the gap. The following css should solve the problem:

.zlrecipe-container-border {
  padding-bottom: 0 !important;
}

I don’t generally like to use !important but in this case your stylsheet uses an !important so we need to try and override it. Another option is to perhaps modify sbsCustom.css and remove the line that affects the border.

Let us know if you have any questions

Thanks

Honestly, I don’t think this has anything to do with my custom stylesheet. I do have a 10px padding on the .ziplist-container-border, which I want there. There however is a much larger than 10px gap at the bottom. I have tried removing this padding previously and it does NOT remove the gap at the bottom. The CSS you provided above also does NOT remove the excess gap at the bottom. What is the line in my stylesheet you feel is affecting the border?

I don’t think this is a CSS issue. When I use the “inspect element” of my browser it shows this (see below) is in the gap area with the src changing to the specific page.

<p><script type=”text/javascript”>wk_bootstrap();</script>
<img src=”https://3po.ziplist.com/wp?url=http%3A%2F%2Fsarahsbakestudio.com%2F2014%2F03%2Fbest-chocolate-chip-cookies%2F&#8221; height=”0″ width=”0″></p>

Hi again,
Sorry the css didn’t work. I was able to remove the gap in the browser inspector however when style sheets are loaded, they may do so in a different order.
Nonetheless, I would like to recommend a different css approach to reduce the gap. The wk_bootstrap script shouldn’t take up any space on the screen however what has me scratching my head is the <p> wrapping the wk_bootstrap script. I’m not sure, without logging into your account why the <p> tag is showing up.
Please try adding the following line to to the code I sent earlier. It should read:

.zlrecipe-container-border p:last-of-type {
    margin-bottom: 0px;
    line-height: normal;
    display: none;
}

Sorry there isn’t a quicker way than going back and forth to solve this problem.

Please let me know if you have any questions.

Thanks

Yeah, that line removes the gap BUT it also removes everything inside the notes area. So, that’s not going to work.

I understand the script itself won’t take up space but the paragraph element would and appears it is, as well as the fact that besides the script there is also two line breaks ( tags) and an image tag. The line breaks weren’t in the original copy of this code. I don’t know when or how they showed up.

<p>
<script type="text/javascript">wk_bootstrap();</script>
<br></br>
<img id="zlrecipe-beacon" width="0" height="0" src="https://3po.ziplist.com/wp?url=http%3A%2F%2Fsarahsbakestudio.com%2F2014%2F03%2Fbest-chocolate-chip-cookies%2F"></img>
</p>

Hi Sarah,
Sorry to hear the solution didn’t work. You may then want to remove that styling suggestion for now.

Are you using any sort of styling tool or plugin that inserts <p> elements? We’ve taken a look across several blogs and none output the wk_bootstrap portion of the code wrapped in a paragraph. Take a look and let us know. If it turns out to be the case and you want to continue using that kind of styling, we can try to refine the css you need to hide that final <p> element

Best of luck

I am not using any styling tool or plugin that inserts <p> elements. I changed themes though to see if the above code was still wrapped in a <p> element and it was not.

I am not aware of my theme adding <p> elements to anything prior to this. And I’ve had the same theme and Ziplist for a year, and this didn’t become an issue until the Ziplist update. So, I guess the Ziplist update and my theme like to magically add <p> elements where they don’t belong. Not sure how to fix that.

It looks like the last css solution provided was capturing “both” of the last <p> tags if you will. If you would like to try one more CSS solution

zlrecipe-container-border > p:last-of-type {
margin-bottom: 0px;
line-height: normal;
display: none;
}

This should address only the <p> that’s a direct child of the border class, rather than also the last <p> found in#zlrecipe-container`

Best of luck, let us know how it goes.