Number & Bullet Lists

Community Forums Forums Design Tips and Tricks Number & Bullet Lists

This topic is: not resolved

Tagged: ,

This topic contains 6 replies, has 2 voices, and was last updated by  John Gregory Olson 1 year ago.

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

    John Gregory Olson
    Member
    Post count: 3

    I am using Freelance theme and noticed that numbered and bullet lists stay flush left in body copy. Is there a way to change the format style so they indent to create white space and make it easier for readers to scan?

    http://jgodigital.com
    #74664

    braddalton
    Participant
    Post count: 10594

    You can change the values in your style sheet for ordered and unordered lists.
    [css]
    ol,
    ul {
    margin: 0;
    padding: 0;
    }
    [/css]


    #74750

    John Gregory Olson
    Member
    Post count: 3

    Hi Brad. Thanks for responding. There are several lines in the css that reference ul and ol. Here is what I see:
    #content .post ul, #content .page ul {
    list-style-type: square;
    margin: 0;
    padding: 0 0 15px 0;
    }

    #content .post ul li, #content .page ul li {
    list-style-type: square;
    margin: 0 0 0 20px;
    padding: 0;
    }

    #content .post ul ul, #content .page ul ul {
    list-style-type: square;
    margin: 0;
    padding: 0;
    }

    #content .post ol, #content .page ol {
    margin: 0;
    padding: 0 0 15px 0;
    }

    #content .post ol li, #content .page ol li {
    margin: 0 0 0 20px;
    padding: 0;
    }

    #content .post ol ol, #content .page ol ol {
    margin: 0;
    padding: 0;
    }
    Do I change them all to remove the ‘px’ from the code? I am hesitant to make any sweeping change unless I know I won’t mess something else up.

    #74926

    braddalton
    Participant
    Post count: 10594

    Try adding this at the end of your child themes style.css file and modify the values for padding and margins:
    [css]
    #content .post ul li, #content .page ul li {
    list-style-type: square;
    margin: 0 0 0 20px;
    padding: 0;
    }

    #content .post ol li, #content .page ol li {
    margin: 0 0 0 20px;
    padding: 0;
    }
    [/css]

    You might want to use individual CSS properties rather than shorthand. http://www.w3schools.com/css/css_padding.asp


    #75019

    John Gregory Olson
    Member
    Post count: 3

    Brad,

    That is the same string that already exists within the styles, but I added it to the end of the content section in the css as you recommended. It did not change anything. I am new to working with css, but have had some success with making a few changes by copy/pasting into the file. If the code is already there, would I still have to repeat it at the end? Did I place it in the right location within the css?

    I appreciate your help.

    #75043

    braddalton
    Participant
    Post count: 10594

    John

    modify the values for padding and margins:

    You can change the default code or copy it to the end of the file and change it there.

    You will need to change the values for the padding and or margin and then you will see the difference.

    I always test code so i know it works.


    #75077

    John Gregory Olson
    Member
    Post count: 3

    Okay, I got it to work. Thanks for your help Brad. And thanks for pointing me to the w3schools website. That has a lot of helpful info to get me informed on css.

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

You must be logged in to reply to this topic.