0

I'm using the Joomla template RsKala! by RSJOOMLA.

I have successfully put CSS override code in the custom.css for these items:

.item-image.pull-left,
.item-image.pull-right {
  float: none !important;
  width: 33% !important;
}

and it works fine. However, I'm trying to override the list-style (and list-style-type too?) that changes the UL and LI tags to none.

Working in the Google Chrome web browser I'm able to do Inspect and see that UL is being references from bootstrap. If I made the change there to do this:

list-style: none !important;

or

list-style-type: none !important;

It does remove the bullet icons, which is what we want.

But if I add what I expect to work in custom.css (same place the first css code I included is working), it doesn't have any effect at all:

ul {
   list-style: none !important;
   margin-left: 0 !important;
   padding-left: 1em !important;
   text-indent: -1em !important;
}

Is the ul being loaded someplace I'm not aware of after all this?

I'm doing all this to remove the bullet icons from display for the Joomla module mod_articles_category.

I have also tried adding to custom.css:

html * {
list-style: none !important;
}

As well as:

html ul, ol, li, menu, dir {
        list-style: none !important;
        list-style-type: none !important;
}

and either has any effect.

8
  • 1
    You may need to use a higher CSS specificity such as html ul {list-style: none !important;} as per joomla.stackexchange.com/a/15853/120 Commented Dec 4, 2017 at 2:14
  • @NeilRobertson Would that still be put into the custom.css file? Commented Dec 4, 2017 at 3:31
  • 1
    Yes, it goes in the custom CSS file. Commented Dec 4, 2017 at 3:33
  • Thanks. I'm still not clear on this, is putting in "html" before the "ul" legal in CSS? Or is "html" a place holder for something else? Commented Dec 4, 2017 at 3:50
  • 1
    Every web page has "html" as a CSS selector. It's perfectly legal in CSS. Without seeing the page, it's one of the few selectors I can be confident actually exists. Commented Dec 4, 2017 at 3:52

1 Answer 1

0

Adding this to custom.css is the right CSS:

li {
    list-style: none !important;
}

However, to my surprise the web browser was caching the CSS. Even though content could be updated on the web site, and was there when it was reloaded, the CSS was not being updated. I ended up having to go clear cache from the web browser and then the newly added CSS appeared and worked.

I'm still puzzled about this, because the cache wasn't updated on reload in Google Chrome and Safari, and Safari on the iPhone. In order for the new CSS to take effect, I had to clear cache on the above web browsers.

The Cache Settings in Joomla 3.8.2 are:

Cache Handler: File
Path to Cache Folder: (blank)
Cache Time *: 15
Platform Specific Caching: No
System Cache: OFF - Caching disabled.
2
  • 2
    Chrome's caching is way too agressive for my liking. If you're making changes to your site, I'd suggest using Incognito mode so thar it doesnt cache anything. Maoes sense whilst you're testing
    – Lodder
    Commented Dec 5, 2017 at 9:44
  • 1
    @Lodder - there are extensions that help with cache clearing on Chrome - but also even with no extensions, when in developer mode the chrome's reload button offers 2 additional options - one is empty cache and hard reload. Just do a persisting click on the reload button to make it show those reload options.
    – FFrewin
    Commented Dec 9, 2017 at 10:41

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.