ckubs on Friday, October 08 2021, 02:55 PM

Minifrontpage custom CSS not working

MInifrontpage styling can be overriden in the Joomla's intended way by copying required CSS files in current template folder?

I'm trying to edit
.mfp_default_skin_default .mfp_default_item .mfp_default_title a
to match my template styling and it's not working even if I add the necesary CSS in the module's CSS adjustment tab. As it has !important on the default CSS file. And it's not the only thing hard to impossible to override.

Thank you for any help. Apart from that the module is one of the best. (ps: posted this one before but didn't appear. If I'm doing it twice, sorry)
The discussion has been resolved.

Accepted Answer

  • Replied by admin on Monday, October 11 2021, 10:20 PM
    Try this one:
    .card-body .mfp_default_skin_default .mfp_default_item .mfp_default_title a {

    If you really want to replace the whole css, you can use template override. Simply change the css path in the override file to your custom css path

    • ckubs - 2 weeks ago
      Many, many, many thanks! That is what I was looking for. Don't know how I didn't saw it.
    • admin - one week ago
      You're most welcome ;)
    Please post rating at the Joomla! Extensions Directory -
  • Replied by admin on Saturday, October 09 2021, 07:34 AM · Hide· #1
    Hi, you can add more specific selector such as :
    • ckubs - 2 weeks ago
      I don't know what is mfp_mid_22 and what element it belongs to.

      You didn't mentioned either about the possibility to ovcerride CSS files in my template's folder. The best fix for my issue would be to edit the original module css files? And remember to update them whenever the module gets updated?
    • admin - 2 weeks ago
      sorry .mfp_mid_22 is an unique class name generated from module id. You can find this number by using inspect element from your browser
    • ckubs - 2 weeks ago
      Tried your option and it doesn't work at all. What has !important on the default CSS file can't be overriden in any way. Unles I edit that original file.

      Would be better if the plugin could use the default Joomla way of doing it by copying the CSS files on my template folder and change the required parts.
    • admin - 2 weeks ago
      The module does use the Joomla way to insert custom css so user doesn’t have to touch physical file. Can you tell me your website url and tell me what you want to achieve?
    • ckubs - 2 weeks ago
      My site isn't completelly set up to avoid spam and I don't see an option to post private comments.
      One of the problematic elements is this
      [code type="xml"].mfp_default_skin_default .mfp_default_item .mfp_default_title a {
      font-weight: 700 !important;
      font-size: 1em !important;

      My site headings are weight 500 and I could't add in any way, as described, a piece of custom css to change 700 in 500. That css part is picked instead of everything else.

      If I could have the option to copy and override the extension CSS I coul just delete that piece of css code, and everything else I don't need. Less code, no issue. :)
    • admin - 2 weeks ago
      You can post your website url in the your site details below, only you and support team who are able to see it.
    • ckubs - 2 weeks ago
      I saw now where to input my details. The tab had a lighter text to pop up :)) Seing the actual site don't know what would bringextra to what I have said but here it is.

      To be fair, your plugin, judging by what I would need as a user, is the best one out there. I'm not just saying that, I really mean it. But customizing it via CSS is a pain in the ass. For example
    Please post rating at the Joomla! Extensions Directory -
  • Replied by ckubs on Monday, October 11 2021, 02:32 PM · Hide· #2
    My site. Look for example at thearticle titles on the Breaking News section.
    Replied by admin on Monday, October 11 2021, 03:10 PM · Hide· #3
    Can you try to add this code in your css adjustment tab :
    .mfp_default_skin_default.mfp_mid_160 .mfp_default_item .mfp_default_title a {
    • ckubs - 2 weeks ago
      Working somehow like this. But, excessive use of these is a bad coding/design practice and I need to use quite a lot of declarations with !important just to replicate what I have already in my template's CSS file.

      If this is the only way to do it, and neither the PRO version seems to work different, I guess I have 2 options remaining. Either to fiind a module as good as this, and honestly, could't find one. Or to edit the original module CSS and remember to re-edit it after every update. Wich is not ideal.
    Please post rating at the Joomla! Extensions Directory -
Your Response
Please login first in order for you to submit comments