How to apply an image to a CSS ordered list in WordPress?


Tags: css,wordpress,html-lists

Problem :

How do I fix the conflict I'm running into when trying to style the UL in this blog post with check mark images. There's a style set up in the skin that is taking precedence over my style I've applied to the ul. Not sure how to over-ride it. I've tried every variation I can think of, and I'm sure it's just a basic misunderstanding of how things cascade. Can you help?

The post is here: http://alexisexhibits.com/trade-show-preparation-checklist

The CSS I have for the style is:

.checklist {
    list-style-image: url(http://alexisexhibits.com/wp-content/uploads/2016/04/checkmark-ul.jpg) !important;
}

I know, the !important declaration is hackery, but oftentimes I find it necessary in dealing with CMS stuff, since the CSS is so piled on top of each other. In this case, it doesn't seem to help, but I left it.

The offending rule that allows the checks to show up if I disable it in Chrome Dev inspector is:

.shortcodes ul li {
    list-style: disc;
}

but I'm hesitant to change that as I don't want all ul li to change, just this specific one.

What's the right way to fix this? Any tips you can give on how to suss this sort of thing out for myself in the future?



Solution :

list-style-image should be applied to the <li> not the <ul>

Like this:

.checklist li{
    list-style-image: url('http://alexisexhibits.com/wp-content/uploads/2016/04/checkmark-ul.jpg') !important;
}

    CSS Howto..

    How to know the correct css selector or group of selector for any html element quickly?

    how to keep the aspect ratio of an image in bounding box - CSS

    How do i shrink my link menu

    How to create desired shapes and position them accordingly using CSS, CSS3?

    HTML layout with vertical divider and menu between sections - how?

    How to give readmore for a text?

    How to remove/add jQueryUI CSS theme from specific element?

    how to center and Crop an image to square with CSS

    How to escape quotes in Less variable which stores a color name?

    How to make the CSS Dropdown same size as it's parent

    How to use a CSS Framework with Yesod?

    How do I make a hamburger menu display on the right side?

    How to style CSS role

    How to change this FontAwesome to image in Css?

    How to make a back-to-top button using CSS and HTML only?

    How to get CSS styling to shown on page? [closed]

    how to stop css hover out with a conditional

    How to put a css tag in an element if another has this element [closed]

    How to create an image that changes state?

    How do I make a table show a vertical scroll bar without explicitly setting the height?

    How to render email template in a page?

    How do I control the height of the main content area no matter how much text is in there?

    How to hardware accelerate a box-shadow animation in CSS?

    How is struts finding css files?

    How to detect which button is clicked in javascript?

    How to change background on hover for 2 elements using css

    How can I keep things aligned in an adaptive layout

    Rails 3 - will_paginate plugin - how to style it

    How do I remove the white line under the nav bar

    CKEditor issue: How to apply custom css to CKEditor [closed]