- This topic has 2 replies, 2 voices, and was last updated 3 years, 9 months ago by
.
-
Posts
-
Normally this is something I can solve mysef, but this time nothing seems to work like it should 🙁
I want to add list style image (green stars) to the unordered list on this page: https://rugzakken.net/tabel-proef/
I would prefer to use this SVG-image (which should have the color #48892a):
https://rugzakken.net/wp-content/uploads/2022/06/star-fivepointed.svgSVG is enabled by this snippet in functions.php (back-end only):
`function cc_mime_types($mimes) {
$mimes[‘svg’] = ‘image/svg+xml’;
return $mimes;
}
add_filter(‘upload_mimes’, ‘cc_mime_types’);Also, I’ve add the class ‘usps’ to the list in the Block Editor.
If SVG isn’t possible, this .png can be used for an alternative solution: https://rugzakken.net/wp-content/uploads/2022/06/ster-usp.png
Customer Support
Hi there,
you can use some CSS like so:
.entry-content ul.usps li { list-style-type: none; position: relative; } .entry-content ul.usps li:before { content: url('https://rugzakken.net/wp-content/uploads/2022/06/ster-usp.png'); position: absolute; left: -10px; }the
content: url('https://rugzakken.net/wp-content/uploads/2022/06/ster-usp.png');property will work with a.svgbut the image has to have the exact width and height your require it, as this cannot be modified with CSS. To do that would mean outputting a background image …Hi David, thanks, for some reason it’s not as easy as it looks, especially since it’s hard to get rid of the disc-style.
I’ve changed it a little bit to this:
.entry-content ul.usps li {
list-style-type: none !important;
}
.entry-content ul.usps li:before {
content: url(‘https://rugzakken.net/wp-content/uploads/2022/06/ster-usp.png’) !important;
position: relative;
left: -22px;
}The disc style (disc) is still present, but is now right behind the star. Very browser dependent, so quite tricky. Any other/better solution?? What did I miss???
- You must be logged in to reply to this topic.
