28Feb2019

Add Stylesheet

Information
Updated: 01 March 2019

Add Stylesheet allows a site owner to add custom stylesheets to the either or both the frontend and/or backend of a Joomla website.

Plugin settings

asSettings

PART A:  Select a custom CSS for the frontend of your site
ParameterValue
Filename (.css) (- None Selected - | filenames) The pull-down contains a list of files that the user may have uploaded to the ../templates/system/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.
PART B:  Select a custom CSS for the backend of your site
ParameterValue
Filename (.css) (- None Selected - | filenames) The pull-down contains a list of files that the user may have uploaded to the ../templates/system/css folder.  If the default value of "None selected" is used then no additional template will be loaded for the backend 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) allows thisCreate the file user.css within the folder ../templates/protostar/css.  See also https://extensions.joomla.org/blog/item/load-custom-css-in-protostar-the-default-joomla-template/.  For those templates that do not provide a mechanism for including user-written customised CSS (e.g. the standard Isis administrator template) 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 on their website; an additional feature allows the owner to use their own customised CSS file on the Joomla administrator site.  Ideally, of course, the owner would have different files for the frontend and the backend.  This plugin searches the folder ../templates/system/cssThe “system template” folder contains several files (installed by Joomla); you should not change these files. for files with the filetype .css.  The file seected in “PART A” will be used on frontend pages; the file seected in “PART B” will be used on backend pages.

Although it is not essential, it is recommended that customised CSS files uploaded to the “system template” folder should be appropriately named something like custom.css or custom_admin.css.  The plugin allows for one additional file to be added to each of the frontend and backend.