Home Forums WoodMart – Premium Template UL/OL lists not appeared on Information Box content

This topic contains 6 replies, has 3 voices, and was last updated by Elise Noromit Elise Noromit 2 days, 18 hours ago.

Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • #160728

    d_ch
    Customer

    Hi,

    While trying to insert <ul> or <ol> lists with list elements into information box content, I don’t get the bullets or the numbers of the elements appeared on my front end. Doesn’t this theme element support lists into the content?

    Thank you in advance.

    Attachments:
    You must be logged in to view attached files.
    #160744

    Hello,

    Please add this code to the Theme Settings > Custom CSS > Global:

    .info-box-inner > ol,
    .info-box-inner > ul {
        margin-bottom: 20px;
        padding-left: 20px;
        text-align: left;
    }
    .info-box-inner > ol li,
    .info-box-inner > ul li {
        margin-bottom: 10px;
    }
    .info-box-inner > ol li:last-child,
    .info-box-inner > ul li:last-child {
        margin-bottom: 0;
    }
    .info-box-inner > ol li > ul,
    .info-box-inner > ul li > ul,
    .info-box-inner > ol li > ol,
    .info-box-inner > ul li > ol {
        margin-bottom: 0;
    }
    .info-box-inner > ol ul,
    .info-box-inner > ul ul,
    .info-box-inner > ol ol,
    .info-box-inner > ul ol {
        margin-top: 10px;
        padding-left: 20px;
    }
    .info-box-inner > dl {
        text-align: left;
    }
    .info-box-inner > dl dt {
        color: #2D2A2A;
        font-weight: 700; 
    }
    .info-box-inner > dl dd {
        margin-bottom: 20px;
    }
    .info-box-inner > ul ol > li,
    .info-box-inner > ol > li,
    .info-box-inner > ol ol > li {
      list-style: decimal; 
    }
    .info-box-inner > ul ol > li:before,
    .info-box-inner > ol > li:before,
    .info-box-inner > ol ol > li:before {
        content: none;
    }
    .info-box-inner > ul > li,
    .info-box-inner > ul ul > li,
    .info-box-inner > ol ul > li {
        position: relative;
        list-style: none; 
    }
    .info-box-inner > ul > li:before,
    .info-box-inner > ul ul > li:before,
    .info-box-inner > ol ul > li:before {
        content: "\f110";
        position: absolute;
        top: 6px;
        left: -20px;
        font-size: 8px;
        font-family: "woodmart-font"; 
    }

    Best Regards

    #160756

    d_ch
    Customer

    Hi,

    I tried your CSS and it seems to work.

    I only noticed that it always leaves &nbsp; under the final list element which I am not able to delete. Even if I delete it and save changes, the space is created again.

    Is there a way to fix this?

    #160765

    d_ch
    Customer

    I also tried to replace list icon from your \f110 to \f111 but I don’t get the desired icon (fa-circle). Isn’t this supported via https://fontawesome.com/v4.7.0/icons/?

    #160848

    1. Initially, our infobox content area was created for simple text without any additional tags. Using several additional tags inside infobox may cause the following spacing to appear. This is initially caused by WordPress text output methods and unfortunately, we can’t change it via WordPress theme. As an alternative, you can use our list element which has more flexible list settings.

    2. Along with the icon code, you need to change the font-family option to “fontawesome” to select the correct library of icons. For example:

    Old:

    content: "\f110";
    font-family: "woodmart-font"; 

    New:

    content: "\f111";
    font-family: "fontawesome"; 

    Regards

    #160860

    d_ch
    Customer

    Thank you very much for the advice.

    #160871

    You are welcome!

Viewing 7 posts - 1 through 7 (of 7 total)

The topic ‘UL/OL lists not appeared on Information Box content’ is closed to new replies.