Penci recipe ingredients and directions

Investor18 replied

5 years ago

Customer Reply

Thanks a lot :)

PenciDesign Supporter replied

5 years ago

Staff Reply

Hi,

Please go to Appearance > Customize > Customize CSS, then paste the following custom CSS code:

/* recipe ingredients list */
.penci-recipe-ingredients ul li:before {
    display: none;
}
.penci-recipe-ingredients ul li {
    list-style-type: disc;
    padding-bottom: 10px; /* change the spacing here */
}
/* recipe instructions */
.post-entry .penci-recipe-method ol {
    padding-left: 30px;
    counter-reset: numList;
}
.post-entry .penci-recipe-method ol li {
    list-style: none;
    position: relative;
    margin-bottom: 10px; /* change the spacing here */
}
.post-entry .penci-recipe-method ol li::before {
    counter-increment: numList;
    content: counter(numList);
    float: left;
    position: absolute;
    left: -30px;
    font: bold 12px sans-serif;
    line-height: normal;
    text-align: center;
    color: #fff;
    line-height: 18px;
    width: 18px;
    height: 18px;
    background: #000;
    -moz-border-radius: 999px;
    border-radius: 999px;
    top: 6px;
}

Don't forget to modify the spacing as you want, then Publish and clear your site cache.

Best Regards,
PenciDesign.

Investor18 started the conversation

5 years ago

Conversation Start

Hello!

I use Soledad theme with this demo: FOOD NEWS 2SIDEBARS

http://demosoledad.pencidesign.com/soledad-food-news-two-sidebars/roasted-bbq-t-bone-steak-authentic-30-minutes-recipe/

I have several questions regarding Penci Recipe plugin:

1. In recipe ingredients list, how can I replace the little diamond boxes that you see in front of each ingredient with discs ( list-style-type: disc; )

2. In recipe ingredients list, how can I add more space between each ingredient?

3. In recipe instructions, how can I replace the numbered list with numbers inside of circles?

4. In recipe instructions, how can I add more space between each instruction?

Thanks.