check-mark bullet color change

marknarusson1 · April 2016

Hello. I'd like to specifically change the colour of the check-mark icon from black to white. The style insertion shown below only changes the text to white.

</ul>

I realise the icon is a png so not sure if this is possible.

Addionally is there a way to hide the small line that appears under each entry?

Can you advise - thx

Albert · April 2016

Hi,

what you need to do is replace existing .png image on server with your own. This is the only way to change icon color.

In reference to 2nd question, please send us link to page where you got this line.

marknarusson1 · April 2016

Thanks. Re: the 2nd query the page is

http://themes.muffingroup.com/betheme/shortcodes/typography

Thanks

Albert · April 2016

We asked for the link to your site because sometimes the codes that works on our end, may do not work for you. Anyway, we can give you the css from our side but we can not guarantee that this would work:

ul.list_mixed li::after, ul.list_check li::after, ul.list_star li::after, ul.list_idea li::after { display: none !important; }

marknarusson1 · April 2016

Thx. Regarding my first query (add an additional white check mark), I've created a white check mark and placed it in the images folder where the black check mark is housed. I've tried adding css code to the site but it seems to default to the standard bullet discs. Can you help?

The section is Kickstart your day....

The site is here

http://users.trading-live.com/

The image is called list_check_wht

I'd appreciate the css required to do this - thx

Albert · April 2016

We told you to replace existing image with your own. It means that your new image should have the same name as existing one so you can overwrite current black image. After that, you won't need any css to change list background.

marknarusson1 · April 2016

Sorry, you misunderstand or I didn't make it clear.

I need to keep the current BLACK check mark but create a new WHITE check mark - so I have the option to use the WHITE version when using a dark or image background - hence the need for some additional CSS. The white version has been saved to the same folder.

Below is what I have included but it doesn't seem to work:

ul.list_check li,li.list_check_wht{background:url(../images/icons/list_check_wht.png) no-repeat 20px 5px}

ul.list_check_wht li {

margin-bottom: 20px;

position: relative;

list-style: none;

padding-left: 50px;

margin-left: 0;

}

ul.list_check_wht li:after {

content: "";

width: 70px;

height: 1px;

overflow: hidden;

background: rgba(0,0,0,.08);

position: absolute;

left: 0;

bottom: -11px;

}

Any ideas?

Thx

Albert · April 2016

Ok, we misunderstood you then. So to achieve another class for lists, you need to use the following css:

ul.list_check_wht li {
    background: rgba(0, 0, 0, 0) url("http://users.trading-live.com/wp-content/themes/betheme/images/icons/list_check_wht.png") no-repeat scroll 0 5px !important;
    list-style: outside none none;
    padding-left: 30px;
}

marknarusson1 · April 2016

Thanks this works fine.

How can I add a white line under each check mark to match the standard version?

http://themes.muffingroup.com/betheme/shortcodes/typography

Thanks

Albert · May 2016

To set this line, you need to use the following css:

ul.list_check_wht li::after { bottom: unset; margin-top: 30px !important; }

marknarusson1 · May 2016

That's great - thanks for your help

Albert · May 2016

You are welcome!

KimberlyWritesCreative · October 2017

Yes I have on this page: https://eccentricshine.com/automotive-detailing/packages-pricing/, info boxes with a check mark but it is black (or dark gray) and doesn't show up. The forum seems to say the check mark is a png and to replace it, but I do not see this check mark in my media files so I do not know how to change it to #fc198f. Can you help me? Thank you.

Bryan · October 2017

@KimberlyWritesCreative

Hey, you can use this custom css to replace the ticks

.infobox ul li:before {
    background: url("YOUR IMAGE URL") no-repeat !important;
}

jennbrooke · October 2018

I followed the instructions from Bryan, and added the code, with the url of my custom bullet icon, to the custom CSS are in theme options, but now I'm getting BOTH the checkmark and my custom icon as bullets.

Pablo · October 2018

jennbrooke

Please send here a link to your website.

Thanks

check-mark bullet color change

Comments