How can I override choices.min.css in front-end modal? Topic is solved

Everything to do with Joomla! 4.x templates and templating.

Moderator: General Support Moderators

Forum rules
Forum Rules
Absolute Beginner's Guide to Joomla! <-- please read before posting, this means YOU.
Forum Post Assistant - If you are serious about wanting help, you will use this tool to help you post.
Windows Defender SmartScreen Issues <-- please read this if using Windows 10.
Post Reply
GillianBPP
Joomla! Enthusiast
Joomla! Enthusiast
Posts: 221
Joined: Wed Oct 01, 2014 10:25 am

How can I override choices.min.css in front-end modal?

Post by GillianBPP » Thu Nov 25, 2021 10:29 am

Edit: Sorry - this should have been in the J4 Administration forum

In a new Joomla 4 website I have created my own template and am not using Cassiopeia.

So far, so good, except that some of the styling in modals on the front end - e.g. a button in the Articles Anywhere modal - is not displaying correctly, so I need to override this file - media/vendor/choicesjs/css/choices.min.css - with either the front-end template css or user.css in the Atum template

In particular, a button that says 'Remove item' should be hidden (with a minus text indent) and a pseudo element showing 'x' in its place.

I've tried adding a user.css to the atum css/vendor/choicesjs/css/ folder and adding this to the joomla.asset.json like this:

Code: Select all

      "name": "template.choicesjs.user",
      "description": "A file where a user can add their own choices css.",
      "type": "style",
      "uri": "/media/vendor/choicesjs/css/user.css",
      "dependencies": [
        "template.active",
        "template.active.language"
      ]
    },    
and also with

Code: Select all

      "uri": "/vendor/choicesjs/css/user.css",
Nothing I try is working. TIA
Last edited by imanickam on Thu Nov 25, 2021 12:27 pm, edited 1 time in total.
Reason: Moved topic » from General Questions/New to Joomla! 4.x to Templates for Joomla! 4.x

GillianBPP
Joomla! Enthusiast
Joomla! Enthusiast
Posts: 221
Joined: Wed Oct 01, 2014 10:25 am

Re: How can I override choices.min.css in front-end modal?

Post by GillianBPP » Thu Nov 25, 2021 12:44 pm

SOLVED:

Actually, I was getting in a right muddle.

I solved this by creating the following folders in my custom front-end template's css folder: vendor/choicesjs/css and then copied in the Cassiopeia choices.css file.
In addition I copied the select-bg.svg image from Cassiopeia's images folder into my template's images folder.

That's done the trick and I would advise anyone creating their own front-end template who uses Articles Anywhere (and possibly other plugins) on the front end to do the same.


Post Reply

Return to “Templates for Joomla! 4.x”