Home Forums WoodMart support forum UL/OL lists not appeared on Information Box content

UL/OL lists not appeared on Information Box content

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

    d_ch
    Participant

    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
    Participant

    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
    Participant

    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

    Bogdan Donovan
    Keymaster

    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
    Participant

    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.