Home>Support>Styles of ul and li

Styles of ul and li

By Irene Hartfield, 7 years ago. Last reply by Andrew Misplon, 7 years ago.
Notice: This thread is over two years old; the information may be outdated. Please consider creating a new thread if you require free support. If you have an active SiteOrigin Premium license, you can email our premium support desk at [email protected].

When I go to put a list in the body of a post or page, it comes out unformatted and I have to put style codes on every ul and li if I want it to look like a normal list (indented with bullet points). Here’s a good example of a page on the site: http://www.elycct.org/get-help-now/lonely-or-isolated/

This is our free support forum. Replies can take several days. If you need fast email support, please purchase a SiteOrigin Premium license.

  1. 7 years, 4 months ago Andrew Misplon
    Hi, I Work Here

    Hi Irene

    Thanks for posting. I’m sure I can help clear this up. I think there is a bit of misconception.

    The SiteOrigin Editor Widget is a clone of the core WordPress TinyMCE editor. We’re providing the core TinyMCE in a widget format.

    Usually, your theme would handle list formatting. What’s probably happened here is your theme expects widgets to be in theme widget areas so it has styled lists assuming they’ll only be in those areas. Two possible fixes:

    1. Go to SettingsPage BuilderWidgets and disable: Add Widget Class.

    That’ll prevent the theme from targeting Page Builder widgets in the same way it would widgets in a theme widget area.

    2. Or you can add global styling for all your lists, it doesn’t need to be done for each list. This is a bit rough, I can clean it up if you’d like. You added classes for help and help.sub. Why not just target:

    ul  {
	list-style:disc;
	padding-left: 10px;
	list-style-position: outside !important;
	margin-bottom: 20px;
}

ul ul {
	list-style:circle;
	padding-left: 10px;
	list-style-position: outside !important;
	margin-bottom: 20px;
}

    Or if you want to make it specific to the Editor widget, prefix it:

    .textwidget ul  {
	list-style:disc;
	padding-left: 10px;
	list-style-position: outside !important;
	margin-bottom: 20px;
}

.textwidget ul ul {
	list-style:circle;
	padding-left: 10px;
	list-style-position: outside !important;
	margin-bottom: 20px;
}

    In this last example, you’re targeting lists and lists within lists if they are in a container with class textwidget.

    Try disabling the widget class first, idea 1, that’ll most likely fix this.

Replies on this thread are closed. Please create a new thread if you have a question, or purchase a SiteOrigin Premium license if you need one-on-one email support.

Get The Most Out of SiteOrigin with SiteOrigin Premium

Find Out More