style sheet update not working

This topic was automatically closed 365 days after the last reply. New replies are no longer allowed.
4 years ago
Hi. I'm struggling a little to create a list with checkmarks instead of bullets for products page.
I created a check marked un-ordered list style.
ul.checkmark {
  list-style: none;
}
ul.checkmark li:before {
    content:"\2713\0020";
  color:red;
This style when applied to <ul class="checkmark"> creates red check marks instead of the usual disc type ( bullets ) for html list. I tested the style outside of nopCommerce and it's working fine there.
I put the style above in the styles.css at the end of the definitions for product styles. On my product page I tagged a <ul class="checkmark">.  I checked the html source and the product page is pulling in the styles.css file with the checkmark style in place. It should be in affect for any ul just like in my test outside nopCommerce.
It doesn't change the look on on the products page as it should. The browers still present the bullet list.
I checked to see if anything is clearing list-style later in the css or in any other css or style loaded on the page. No.
Kinda confused by this. Does anyone have a clue as to why it doesn't work?
Thank you.
4 years ago
If the style is there in the page source and it is not applying then one of the following reasons could have affected and I wonder if you try all these.
1) The style you have added is overridden by other styles. Did you try using !important attributes?
2) The cache may be affecting too. Please try clearing browser cache and recycle the app pool and see if it works.
4 years ago
Hi Brillo,

if you are using the :before pseudo elements content to add something, you need to make sure that it has font-size more than 0. If for some reason the font-size is set to 0, you will be seeing the desired icon.

However, if you could give an actual link to your store we can investigate what the problem might be.

Looking forward to your answer!

Best Regards,
Valentin.
4 years ago
Hi Guys,
Thank you very much for your answers. I'm going to look into that as soon as possible. Presently I'm having an issue with my website host that I'm working through. But I'll be back here once that's fixed.
4 years ago
It's working now.
http://www.automatictradingsignals.com/rd3-trading-system
I didn't change anything. After my ISP restored the site from a backup it started to work. I may try and change it later and I'll see if it's taking my changes. Thank you  for your suggestions.
4 years ago
Guys, I think I spotted a problem. The style with the checkmarks appears alright on the public page:
http://www.automatictradingsignals.com/rd3-trading-system
But when I use the Preview for the product it does not. The style sheet pulled into the preview page DOES have the style for the checkmarks like in my original post about that but the page does not render lists with the checkmarks... uses bullets instead. I guess this is not a big problem as I (we) can test pages by making them public (briefly), where the style is working,  but the preview feature is supposed to give us the real deal so that we don't have to do that.
Sorry I can't give you a link to the preview page as it's admin only.
4 years ago
Brillo wrote:
Guys, I think I spotted a problem. The style with the checkmarks appears alright on the public page:
http://www.automatictradingsignals.com/rd3-trading-system
But when I use the Preview for the product it does not. The style sheet pulled into the preview page DOES have the style for the checkmarks like in my original post about that but the page does not render lists with the checkmarks... uses bullets instead. I guess this is not a big problem as I (we) can test pages by making them public (briefly), where the style is working,  but the preview feature is supposed to give us the real deal so that we don't have to do that.
Sorry I can't give you a link to the preview page as it's admin only.


Hi Brillo,

we just opened your site and we might have found the reason why your code is working in some cases and it is not working in others.

You have added the above-mentioned styling just as you have here:

ul.checkmark li:before {
    content:"\2713\0020";
    color:red;


without a closing } at the end, which is causing a CSS error and is basically disabling all of the CSS from line 6705 to the end of the file. You need to add the closing curly bracket at the end like so:

ul.checkmark li:before {
    content:"\2713\0020";
    color:red;
}


We tried it and it works on our side.
Hope this was helpful.

Best Regards,
Valentin.
Hope this was helpful.
This topic was automatically closed 365 days after the last reply. New replies are no longer allowed.