Bullet list define list-style-position

Hi,

Unfortunately Themler does not have such built-in option. Please add the following code to the Themler Settings >> Additional CSS:

/* unordered list */
ul {
    list-style-position: outside;
}
/* ordered list */
ol {
    list-style-position: outside;
}

Thank you,
Olivia

Thanks olivia !

Would suggest to add it to the features to be added to Themler.

Best regards
Stéphane

Hi,

You're welcome.
Please note that this property works for bullet lists with default bullets (square, sircle, etc). It does not work with custom bullets.

I've added our suggestion to our wish list.

Thank you,
Olivia

Hi,

I tried this solution but other css values seem to override the one you suggested, like this one:

.bd-tagstyles:not(.bd-custom-bulletlist):not(.shape-only) ul:not([class*="menu"]) li, .bd-bulletlist li {
     list-style-position: inside;
}

How do I fix the css to make sure the 'outside' setting is used?

Thanks

Hi,

I tried this solution but other css values seem to override the one you suggested, like this one:

.bd-tagstyles:not(.bd-custom-bulletlist):not(.shape-only) ul:not([class*="menu"]) li, .bd-bulletlist li {
     list-style-position: inside;
}

How do I fix the css to make sure the 'outside' setting is used?

Thanks

Hi,

What I have done is adding the !important attribute to get them outside like this :

.bd-bulletlist li, .bd-tagstyles:not(.bd-custom-bulletlist):not(.shape-only) ul li {
  list-style-position : outside !important;
}

Hope it helps,
regards
Stéphane

Great tip!
It helped me to work around the problem. :)

Thanks Stéphane!

It would still be nice though (and expected) to be able to do this inside themler. :|

Hi,

Thanks, we'll consider your suggestion.

Sincerely,
Hella

Hello i tried this solution but it didn't Work in the Widget-Area. See de Attachment.

Hello i tried this solution but it didn't Work in the Widget-Area. See de Attachment.

You have to adjust the css regarding your template.
use right-click inspect in Google chrome to get more information on which class .your class has to be modified...

.your class > the css code given a few messages above

refer to CSS selectors for good syntax : http://www.w3schools.com/cssref/css_selectors.asp

Regards,
Stéphane

Last edited 05 January 2017 by Stéphane

Hello, unfortunately I could not find the right style for widgets, so that the bullet list wraps in the outside position. For example, in the footer widget, this is used quite often, and it doesn't look nice on a tablet. I think this is a big problem and I don't know why the developers didn't include it in the standard Themler functions even after 5 years. The solution of positive and negative value in the bullet list is not ideal, it affects a number of other functions / plugins, such as photo gallery, etc.

Hello, unfortunately I could not find the right style for widgets, so that the bullet list wraps in the outside position. For example, in the footer widget, this is used quite often, and it doesn't look nice on a tablet. I think this is a big problem and I don't know why the developers didn't include it in the standard Themler functions even after 5 years. The solution of positive and negative value in the bullet list is not ideal, it affects a number of other functions / plugins, such as photo gallery, etc.

Hi,

You have to use the browser "inspect" function to find out the relevant class you should modify so that it applies only to this class and not all other elements as you described.

The CSS selector from W3schools is a good way to limit the action of the modified style

Hello Lucie,

Please, create a new private ticket with the issue, we will help.

Gina
Themler Support