Build Your Own Business Website header image

Introduction to HTML for WordPress & Genesis 2 Users – Part 12 – Styling Lists in Genesis 2 Using CSS

Difficulty Level -

Filed Under Topics - ,

Listed Under Lesson Subjects - ,

Applies to - ,

Whoops, you've found some premium content!

Watch the opening clip of this video to preview it,
the full video is available to paid members.

Now that you’ve got the basics of how to style text and fonts with CSS, the next thing we’re going to do is work on styling lists in Genesis 2.

List Style Type

We’re going to go over to w3schools and then to Learn CSS. Scroll down and look for lists, styling lists and now we have some examples of ways in which you can style lists. One of the things that we’re going to look at here is the list-style type actually.

The list-style type has a bunch different types of list styles here. Some of them are applicable to unordered lists and some of them are applicable only to ordered lists. So if we take a look right now and right click on our lists and select the list, you can see .entry-content ul li list-style-type is disc.

Changing the Style

If we wanted to get rid of that entirely, we could take that selector, come back over here, paste it, then say list-style-type:none. Actually, let’s control+space.

Notice it has a whole bunch of choices here. Actually let’s backspace that now and it gives you quite a number of them doesn’t it? I think we’re just going to go back and say none here though, list-style-type:none. Save our custom CSS, come back over and refresh it. Now notice how the little bullets have all gone away, right?

Now you can come along and say look at this list-style-type. We could say circle or square. Let’s say square, save our custom CSS or refresh it. Now we’ve got little squares.

Changing Nested Lists Style

This one is a nested one and let’s say that we want to do our nested list different than our first level of list. Well, remember that our nested list is a list that is inside of a list so we could take the same piece of code, copy it and paste it. We could say ul ul li and this one could be circle and now, we have changed this.

We can also change the amount of indentation or the amount of margin that’s here. If we look at this at the moment, we don’t see any margins specified. Let’s look at the ul instead. Here it is right here, margin-left is 4rem, rem stands for referenced em which is in Genesis 40 pixels.

What’s happening here is that the first list is indented 40 pixels and then the second list is indented 40 pixels. So we could instead of this, choose .entry-content ul ul and then say margin-left:2rem which essentially 20 pixels. We could say 2rem or we could say 20 pixels.

In Genesis, 1rem represents 10 pixels and in another lesson we’ll talk about ems, rems and pixels here but if we refresh this, notice it’s now moved in a bit.

We can take this a step further though. We could say .entry-content ul ul margin-left and we could say font-style:italic. Refresh this and now, the section of it has gone italic.

We could also change the font-color. Note that it does not affect the ordered list, it does not affect the unordered list, it’s only affecting the nested unordered list and it’s only affecting that because we’ve said ul ul so that’s a ul inside of a ul.

Style an Ordered List

Now, we’re going to copy this one here, come down below here and instead of ul we’ll say ol because now we’re going to style the ordered list. I’m not actually sure how this is going to behave because that’s not a valid style for ordered list…it did it anyway. It makes it look like an unordered list but there are a bunch of valid styles. For example, lower-greek or lower-roman.

We could in fact, come along here to our ordered list, take these two and indent them, come back over to here and add upper-roman. Let’s copy that first. So we could say ol ol li is lower-roman and this one is upper-roman and now you’ve got upper-roman numeral 1, roman numeral 1 and 2.

You could do the same thing here one more time. Let’s nest again and again. Select those, move them over and then come back over here. Then another ol to our list ol ol ol li instead of lower-roman, we could do lower-latin.

So that’s the kind of thing that you can do with CSS without actually having to change the code internally, all you have to do is write your CSS rules and they apply.

0 Comments… add one
0 comments… add one