Ordered list styles

yerg1

I'm looking to discover where in the system the css for <li></li> is housed?
Adding styles to the custom.css achieves nothing
I'm looking to adjust the line height
Been through the live demos Typography > Unordered, ordered and nested lists and there is nothing I can find there.
I even added the following to custom.css and no change

li {
    line-height: 250%;
}

saguaros

yerg1

You can share the credentials of your site so we can check template you're using and what's wrong here.

Regards

yerg1

Check out this page on the Bamboo demo site
https://demo.joomlabamboo.com/showcase/utafiti/index.php/template-features/module-overview/typography
This is the li style I wish to increase the margin between the rows ...

I can find no reference to a <li> style
May be blind 🤭

teitbite

yerg1 Hi. There is none, but it can be created by adding this to css:

.article-content ul li,
.article-content ol li {
padding: 3px 0;
}

yerg1

Thanks for that teitbite.

When you wander through the various templates here there are various line heights in the <li>
There must be some underlying css driving that line height even without a specific style for it.
Hoping that makes sense.

This ended up being the only style attribute that worked and was cross browser functional. Who knows why cos I don't?

ul {
    line-height: 1.5em;
}

Joshua-M

yerg1 Hi,
line-height value is inherited from parent elements, maybe you should check the parents.
On the demo site - I can't see any problem, I was able to change the line height with em,px or percentage values..
I'm not sure where the issue is..

Cheers
Joshua

saguaros

yerg1

Hi,

I just added that style for ul

ul {
    line-height: 1.5em;
}

into the custom.css file: [root]/templates/buildr/css/custom.css

and it works perfectly.

You can share the credentials of your site so we can check for you.

yerg1

Joshua-M
As I stated and you agreed the ul style below actually works.

ul {
    line-height: 1.5em;
}

My question originally is there is n LI / ul style in any of the templates by default and each of them had a differing style.
I added a css attribute to the customs.css file and other than line-height: 1.5em; nothing worked.
No problem .. well that's not the issue, there was a problem otherwise I wouldn't have posted here.
So can you specifically point out what "parent attribute" you are referring to?
We are all here to learn and support not to create a dependency relationship.

teitbite

yerg1 Hi. In this template there was no list styles defined. When such style is not defined than a default style of a browser is in use, so You can see it look somehow, but there is actually no code to look at in developer tool. By adding the classes to template's css You have a more control over how it will look like, but I would suggest to only provide a style for content lists, so it should look like this:

.article-content ul,
.article-content ol {
line-height: 1.5em;
}

Problem may be that <ul> is used for different site elements like Menus for example and having a line-height set globally may affect it as well.