[Support request] Bulleted and numbered lists

Home Forums Support Bulleted and numbered lists

  • This topic has 5 replies, 3 voices, and was last updated 12 months ago by David.
Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #1022412
    Fredrik

    Hi,

    I have two questions regarding lists:

    1) How do I decrease the indent in a bulleted or numbered list (the whole paragraph)?

    2) How do I increase the space between paragraphs in a bulleted or numbered list?

    #1022464
    David
    Staff
    Customer Support

    Hi there,

    this CSS to reduce indentation:

    .entry-content ul, .entry-content  ol {
        margin-left: 2em;
    }

    And this to increase space between list items:

    .entry-content li {
        margin-bottom: 2em;
    }

    This will apply to any lists within your content – so it doesn’t effect list markup in the theme or widget areas.

    #1022796
    Fredrik

    Perfect, thank you.

    Is there a way to increase the size of the bullet in a bulleted list as well?

    #1022897
    Tom
    Lead Developer
    Lead Developer

    I don’t think that’s possible without using a workaround. This might help: https://stackoverflow.com/a/8450930

    #1023316
    Fredrik

    Ok, I see. Thanks for the link.

    Is there an easy way to change the color of the bullets or numbers in a list?

    #1023336
    David
    Staff
    Customer Support

    For unordered lists you would need to do this:

    .entry-content ul li {
        list-style: none;
        position: relative;
    }
    
    .entry-content ul li:before {
        content: "";
        position: absolute;
        left: -1.5em;
        top: 0.25em;
        /* Adjust according to width and height */
        width: 10px;
        /* Change size */
        height: 10px;
        /* Match width */
        background-color: red;
        /* Set color */
        border-radius: 50%;
    }

    Ordered lists are a little more complicated and would require this:

    .entry-content ol {
        list-style: none;
        position: relative;
        counter-reset: custom-counter;
    }
    
    .entry-content ol li {
        counter-increment: custom-counter;
    }
    
    .entry-content ol li::before {
        content: counter(custom-counter);
        color: red; /* Change color */
        font-size: 18px; /* Set font size */
        line-height: 18px; /* Adjust for alignment */
        position: absolute;
        left: -1.5em;
    }
Viewing 6 posts - 1 through 6 (of 6 total)
  • You must be logged in to reply to this topic.