Number & Bullet Lists

[John Gregory Olson]

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

[Brad Dalton]

You can change the values in your style sheet for ordered and unordered lists.

ol,
ul {
	margin: 0;
	padding: 0;
}

---

Tutorials for StudioPress Themes.

[John Gregory Olson]

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.

[Brad Dalton]

Try adding this at the end of your child themes style.css file and modify the values for padding and margins:

#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;
}

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

---

Tutorials for StudioPress Themes.

[John Gregory Olson]

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.

[Brad Dalton]

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.

---

Tutorials for StudioPress Themes.

[John Gregory Olson]

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.

[Author]

Posts