Are you enjoying the extensions? Did you like the support? Help others decide.

Leave a review
Information
Print

User stylesheets

Information
Trombinoscope Contacts

The module and the views create minified stylesheets ‘on-the-fly’ (troubleshoot here if you have file permission issues). Each stylesheet will be different depending on the parameters that have been selected and on the overrides added for each module instance or views.

A stylesheet named common_styles-min.css is also used by all module instances (for the styles that are common to all module instances). It reduces the CSS footprint when using multiple instances on a single page.

You may want to add your own styles that are common to all module instances or views (for CSS additions specific to a view or a module instance, use the Additional CSS parameter).

Module instances user styles

All properties will start with .te. In order to avoid loading those styles through the template (therefore loading the styles on every page, even when no module instance is present on that page), a simple mechanism has been put in place:

Under Joomla 3

  • add the file common_user_styles.css to the module’s /themes folder,
  • add the file common_user_styles-min.css to the module’s /themes folder to load a minified version of your tweaks. It has precedence over the non-minified version.

Under Joomla 4

In the /media folder:

  • add the file common_user_styles.css to the module’s /css folder,
  • add the file common_user_styles-min.css (common_user_styles.min.css in v4.10+) to the module’s /css folder to load a minified version of your tweaks. It has precedence over the non-minified version.

The module will look for those files and load the right version alongside all the other module's stylesheets (if the minified version is not found, it will load the non-minified one).

Power users: it is possible to disable the module styles altogether and replace them with your own:

Under Joomla 3

  • add the file substitute_styles.css to the module’s /themes folder,
  • add the file substitute_styles-min.css to the module’s /themes folder to load a minified version of your CSS properties. It has precedence over the non-minified version.

Under Joomla 4

In the /media folder:

  • add the file substitute_styles.css to the module’s /css folder,
  • add the file substitute_styles-min.css (substitute_styles.min.css in v4.10+) to the module’s /css folder to load a minified version of your CSS properties. It has precedence over the non-minified version.

Having any of those files present will disable the ‘on-the-fly’ stylesheet creation and prevent loading of the common files. If the minified version is not found, it will load the non-minified one.

Pro

Views user styles

All properties will start with .te_trombinoscope form for the Trombinoscope view and with #te_contact for the Contact view. In order to avoid loading those styles through the template (therefore loading the styles on every page, even when no view is present on that page), a simple mechanism has been put in place:

Under Joomla 3

  • add the file common_user_styles.css to the component's /assets/themes/[the view] folder,
  • add the file common_user_styles-min.css to the component's /assets/themes/[the view] folder to load a minified version of your tweaks. It has precedence over the non-minified version.

Under Joomla 4

In the /media folder:

  • add the file common_user_styles.css to the component's /css/[the view] folder,
  • add the file common_user_styles-min.css (common_user_styles.min.css in v4.10+) to the component's /css/[the view] folder to load a minified version of your tweaks. It has precedence over the non-minified version.

The view folder [the view] may not exist. If it does not, use contact for individual contacts or trombinoscope for the grid or list views.
The view will look for those files. If the minified version is not found, it will load the non-minified one.

General notes

  • The previous files (common_user_styles.css, substitute_styles.css and their minified versions) won't be removed on module or component update.
  • Minifying the code has to be done manually (you can use a tool such as the one found at cssminifier.com).

Related tutorials and topics

Featured Blogs