Join the Soledad Facebook Users Group here
for Share, assistance, discussion, and Updates related to Soledad WordPress Theme.

If you can't create a new ticket - you can send us an email via our contact form and we will get back to you.

Okay
  Public Ticket #2783819
Penci recipe ingredients and directions
Closed

Comments

  • Investor18 started the conversation
    May 22, 2021 at 7:42pm

    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.

  •  2,495
    PenciDesign replied
    May 23, 2021 at 3:24am

    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 replied
    May 24, 2021 at 6:39am

    Thanks a lot :)