If I’m right with what you’re looking for…
CSS Code:
li.special {
text-transform: uppercase;
background: #333333;
}
HTML Code:
<ul>
<li class="special">List item in here.</li>
</ul>
Thread Starter
Houjou
(@houjou)
That did it, thank you, catacaustic! With some added padding, my lists now look exactly as I intended!
Do you think there is a better way to then use the special class of li while writing posts and pages, without having to add the class manually via the html of the post? I guess there is no easier way, unless I go and write a plugin.
In any case, thank you so much 😉
(I’ll leave this open in case someone has a quick answer to my follow-up question, and then mark the topic as resolved later tonight)
If you’re uisng it everywhere you can define it your stylesheet as something like this (of course, the actual tags will depend on the structure of your theme).
#content ul li {
text-transform: uppercase;
background: #333333;
}
That will set every <li> in the content section to that style. Of course, that’s not what everyone wants, but it may help.
Thread Starter
Houjou
(@houjou)
Thank you for your answer. I now see how I failed asking the question properly.
I meant that I am using both the “normal” li and the modified li in posts, sometimes one inside another, thus I wondered if there was an easy way to visually select a bunch of text and make it “li.special” as easy as I can select a bunch of text and make it “li”.
You’d need to set up some identifying class or ID (probably class) on an element to have that happen. Your choice is to set up a class on each <li> element or set up a class for the parent <ul> element. Either way you still need to be doing that in the plain text area of the editor.
Thread Starter
Houjou
(@houjou)
TL;DR: How do I set up a ul class to obtain the same result so that I don’t have to use a li class?
Thank you.
Ever since I got it to work and realized I’d have to manually add the class every time, I thought giving a class to every ul instead of every li would save me some time (now and in the future).
At first, I had:
ul li.special {
list-style-type: none; background: #f5f5f5; padding: 20px; margin: 5px 0 5px 0
}
(which works perfectly! but requires me to change every single li of the post!)
Then I tried to obtain the same result by changing the ul as follows:
ul.special {
list-style-type: none; background: #f5f5f5; padding: 20px;
}
ul.special li {
margin: 0 0 5px;
}
However, now the different li elements do not have a (white) space between them (between the grey-background elements).
Do you think there is an easy way to solve this? I will stop using your time after this extra question, I promise 🙂
That one is quite easy actually. Your padding rule is set for the <ul> tag instead of the <li> tag. That’s putting the padding aorund the entire list, not each individual list item.
ul.special li {
list-style-type: none;
background: #f5f5f5;
padding: 20px;
margin: 0 0 5px;
}
Thread Starter
Houjou
(@houjou)
Indeed! Thank you very much, catacaustic! 🙂
