How to customize a list?

wedogcoaching · Member · Jul 12, 2017 at 4:34 am
Copy link

Add topic to favorites
Hi there,

I am trying to create a list by using an image.

I found plenty of information and example of code but nothing worked. So, I guess I do something wrong.

Can someone give me some advice?

KR,

Maud

The blog I need help with is: (visible only to logged in users)
thesacredpath · Member · Jul 12, 2017 at 4:55 pm
Copy link
Are you wanting to put an image for a bullet in a list? If so, have you uploaded the image you wish to use to your media library?
wedogcoaching · Member · Jul 12, 2017 at 5:46 pm
Copy link
Hi again,

This is a yes for both questions.
thesacredpath · Member · Jul 12, 2017 at 9:17 pm
Copy link
I took a look in your media library and grabbed the small dog bone for the below. You can change it if I grabbed the wrong image.
```
ul li {
  list-style-image: url('https://wedog.be/wp-content/uploads/2017/07/os_puce-3.png');
}
```
wedogcoaching · Member · Jul 13, 2017 at 10:58 am
Copy link
It worked fine and you grabbed the right image.

However, it creates a conflict with the image, which is linked from the block page.

Do you know how to create a condition saying “not for that part”?

KR,

Maud
thesacredpath · Member · Jul 13, 2017 at 7:25 pm
Copy link
However, it creates a conflict with the image, which is linked from the block page

Maud, I’m not understanding. Can you explain a bit further?
solybarr · Member · Jul 13, 2017 at 7:42 pm
Copy link
Hi @thesacredpath
Below “contact” in the page – https://wedog.be/ – there is another list below a picture and it has now the new styling. @wedogcoaching probably just wants to style that specific list not change the styling on every list.
S.
thesacredpath · Member · Jul 13, 2017 at 8:40 pm
Copy link
Are you talking about in the footer widget area? Under Contact, the elements in that text widget are paragraphs. I’m not seeing any issues there.

We could do this, which would limit this to only unordered lists in the #content div.
```
#content ul li {
  list-style-image: url('https://wedog.be/wp-content/uploads/2017/07/os_puce-3.png');
}
```
solybarr · Member · Jul 13, 2017 at 9:08 pm
Copy link
@thesacredpath
thesacredpath · Member · Jul 13, 2017 at 9:36 pm
Copy link
Luxury is sometimes a pain. Those were mostly hidden in Firefox and I did not see them. Instead of the above, replace it with this.
```
#content .article ul li {
  list-style-image: url('https://wedog.be/wp-content/uploads/2017/07/os_puce-3.png');
}
```
wedogcoaching · Member · Jul 14, 2017 at 10:04 am
Copy link
Hi both of you,

@solybarr, thank you for making my point clear. :)

@thesacredpath, thank you for this new code. It is all clean now.

Thanks a lot,

Maud
thesacredpath · Member · Jul 14, 2017 at 9:16 pm
Copy link
You are welcome, and yes, @solybarr, thanks for the screenshot.

No items found.