Add Stylesheet allows a site owner to add custom stylesheets to the frontend of a Joomla website.
Version 1.0 of this plugin was designed in 2019 (around the time of the release of J! 3.9.3); it was not fully compliant with the Joomla′s revised coding standards at that time. At that time neither of the backend/administrator templates (i.e. Isis or Hathor) supported the automatic detection and inclusion of user-written custom CSS files (e.g. user.css) in the same way as documented for the frontend template Protostar. Furthermore, in version 1.0 of this plugin, the website owner could load their own custom CSS to either or both the frontend or backend of their website; the folder where website owners could store their own custom CSS files was ../templates/system/css.
In the time since the release of version 1.0 of this plugin, the Joomla coding standards have again been revised, two new releases of the Joomla! CMS have occurred, the backend template (i.e. Atum) allows users to add their own custom CSS with a user.css created in the ../media/templates/administrator/atum/css folder and the J! developers now recommend that “media” files used by extensions should be located under the ../media folder. Therefore, as a consequence of these changes, version 1.0 of this plugin has been retired and it is not compatible with the currently supported versions of the J! CMS. With the release of version 2.0 of this plugin, the ability to add custom CSS to the website backend template has been removed and the user’s custom CSS is now the ../media/templates/custom/css folder.
These are important changes for people who have used version 1.0 of the Add Stylesheet plugin; version 1.0 has been retired and is not available for downloading from here. If anyone wants to use version 1.0 of the Add Stylesheet plugin they may request it via the forum on this website.
Plugin settings
Select a custom CSS for the frontend of your site
| Parameter | Value |
|---|---|
| Filename (.css) | (- None Selected - | filenames) The pull-down contains a list of files that the user may have uploaded to the ../media/templates/custom/css folder. If the default value of "None selected" is used then no additional template will be loaded for the frontend of the site. Only files with the filetype .css are available for selection. |
Usage
This article assumes that the reader is familiar with being able to use a text editorThere are several popular contextual editing programs such as Notepad++, ConTEXT, Atom, etc. that people can use. to create files; this article also assumes that the reader knows how to upload files from a personal computer via their webhosting cPanel or FTP software (e.g. Filezilla).
Most modern templates for Joomla allow the site owner to upload their own customised CSS file, a file that is automatically detected and used by the site template. The standard Joomla site template (e.g. Protostar in J! 3.x or Cassiopeia in J! 4.x and J! 5.x) allows thissee also https://ltheme.com/create-custom-css-with-cassiopeia/. For those templates that do not provide a mechanism for including user-written customised CSS another way to make these kinds of changes is to modify the template. The problem with modifying a template is that these changes may be lost if there is an update to the template or to Joomla.
This plugin allows the owner of a website to use their own customised CSS file to whatever template is used by their website; this plugin does not allow for adding a custom CSS file to be added to the website’s backend. This plugin searches the folder ../media/templates/custom/css.
Although it is not essential, it is recommended that customised CSS files uploaded to the “media/templates/custom/css” folder should be appropriately named something like custom.css. The plugin allows for one additional file to be added to the frontend template (in addition to any othe CSS files that may be loaded by other means) that your website is using when a visitor views it.
