Extra CSS Targetting Classes not working!

First and foremost we are sorry that you are encountering this issue! Sadly there could be many reasons why some of the classes are not working. Below we describe a few troubleshoot steps that might alleviate the issue.

STEP 1: Check if extra classes files are activated:

  • In the Joomla! Administrator area go to extensions > plugins
  • Search for "LoginSecure Framework"
  • Open the plugin and go to the tab "settings"
  • Make sure the following options are set correctly:
    • Type of Framework: Only use Gantry if you use the Gantry framework otherwise always use the Bootstrap option.
    • Load Framework CSS: This needs to be on.


If the above is all set correctly and extra classes are still not working then we have some more advanced troubleshooting steps. If you don't feel comfortable when hearing words like "Inspector" and "DevTools" then feel free to create a ticket so we can take a look. But if it is possible then we appreciate it if you continue the troubleshooting steps.


STEP 2: Check if files are loaded on the page:

  • Go to a frontend page on your website. For instance, the homepage.
  • Press HOTKEY this will open the DevTools/Inspector.
    • Hotkey for Chrome/Firefox/Edge/IE = F12
    • Hotkey for Opera = Ctrl+Shift+C
    • Hotkey for Safari = Cmd+Shift+C (Developer menu needs to be activated first)
  • Do a search in the elements tab. You can use this HOTKEY to immediately open the search bar.
    • Hotkey for Chrome/Firefox/Opera/Edge/IE = Ctrl+F
    • Hotkey for Safari = Cmd+F (Developer menu needs to be activated first)
  • Now search for the following text
    • If you use a Gantry Framework: lsframework_gantry5.min.css or lsframework_gantry5.css
    • If you don't use a Gantry Framework: lsframework_bootstrap3.min.css or lsframework_bootstrap3.css

If the search returns a result then the files are loaded and we ask you to continue to the next step. If there is no result then please create a ticket so we can take a look at why it is not loaded.


STEP 3: Double-check if the extra class is inserted correctly:

If the above is all correctly implemented then there is only one possibility left and that is that there is a conflict between the styling from the framework and your website. Meaning that the class is activated and present but some other styling is overwriting the properties of the class. To determine this we need to dive a little bit deeper into the code.


STEP 4: Finding conflicts in CSS styling:

  • Go to a webpage where you are certain that the extra class should work.
  • Now open the search in the elements tab as you have done in step 2.
  • But now search for the extra class that you have used.
    • For instance, If you used "text-align-center" then search for "text-align-center"
  • Click on the element that is highlighted.
    • No element: Please go back to step 3.
  • Now use the CSS area of your developer tool to find out the conflict.

If you don't have sufficient knowledge about CSS then create a ticket and we will have a look.


KB Article: https://loginsecure.eu/helpdesk/knowledgebase/view-article/60-extra-css-targetting-classes-not-working