What is a Plug-in?

In Joomla, there are 5 types of extensions: Components, Modules, Plug-ins, Templates, and Languages. Plug-ins themselves come in various forms:

1. System plug-ins for performing actions based on system events
2. Content plug-ins that manipulate content
3. Authentication plug-ins that allow for alternative authentication methods
4. User plug-ins for performing actions based on user events
5. Editor plug-ins for custom editor types
6. Editor-xtd plug-ins for adding functionality to the editing process
7. Search plug-ins for adding custom search types to the search mechanism
8. Component plug-ins that encapsulate plugable functionality for specific extensions

The kind of plug-in we are interested in here is a system plug-in. Each plug-in type can perform functionality for certain events. These specific events are outlined in the Joomla API documentation where you can see the various events that are available. A system plugi-n generally provides functionality for up to 4 events:

1. onAfterInitialise is triggered after the framework has loaded and the application initialise method has been called
2. onAfterRoute is triggered after the framework has loaded and initialised and the router has routed the client request
3. onAfterDispatch is triggered after the framework has dispatched the application
4. onAfterRender is triggered immediately before the framework has rendered the application

For the sake of this plug-in, the earlier the better, so we’re going to make use of the onAfterInitialise event.

Requirements for a System Plug-in

A plug-in is a relatively simple bit of code, but there are a few things that are required in order for it to be a valid, installable extension for Joomla. We’ll create a Joomla 1.7 compatible plug-in here, but there is not much difference when creating 1.5 plug-ins.

1. Create a directory called “customcss” in your Joomla installation’s plugins/system folder
2. In this folder create two new files: customcss.php and customcss.xml

The Plug-in XML File

The first thing to do is create the XML file that defines and describes the plug-in. This file contains all the information that Joomla needs to install and configure the plug-in and you can use the example below for reference:

01.http://www.rockettheme.com/plugins/content/codecitation/styles/wrapping.png) !important; background-attachment: initial !important; background-origin: initial !important; background-clip: initial !important; background-color: initial !important; float: none !important; vertical-align: baseline !important; position: static !important; left: auto !important; top: auto !important; right: auto !important; bottom: auto !important; height: auto !important; width: auto !important; line-height: 1.1em !important; font-size: 1em !important; display: block !important; text-indent: -1.5em !important; background-position: 0px 1.1em !important; background-repeat: no-repeat no-repeat !important; "><?xml version="1.0" encoding="utf-8"?>
02.http://www.rockettheme.com/plugins/content/codecitation/styles/wrapping.png) !important; background-attachment: initial !important; background-origin: initial !important; background-clip: initial !important; background-color: initial !important; float: none !important; vertical-align: baseline !important; position: static !important; left: auto !important; top: auto !important; right: auto !important; bottom: auto !important; height: auto !important; width: auto !important; line-height: 1.1em !important; font-size: 1em !important; display: block !important; text-indent: -1.5em !important; background-position: 0px 1.1em !important; background-repeat: no-repeat no-repeat !important; "><extension version="1.7.0" type="plugin" group="system" method="upgrade">
03.http://www.rockettheme.com/plugins/content/codecitation/styles/wrapping.png) !important; background-attachment: initial !important; background-origin: initial !important; background-clip: initial !important; background-color: initial !important; float: none !important; vertical-align: baseline !important; position: static !important; left: auto !important; top: auto !important; right: auto !important; bottom: auto !important; height: auto !important; width: auto !important; line-height: 1.1em !important; font-size: 1em !important; display: block !important; text-indent: -1.5em !important; background-position: 0px 1.1em !important; background-repeat: no-repeat no-repeat !important; "><name>System - CustomCSS</name>
04.http://www.rockettheme.com/plugins/content/codecitation/styles/wrapping.png) !important; background-attachment: initial !important; background-origin: initial !important; background-clip: initial !important; background-color: initial !important; float: none !important; vertical-align: baseline !important; position: static !important; left: auto !important; top: auto !important; right: auto !important; bottom: auto !important; height: auto !important; width: auto !important; line-height: 1.1em !important; font-size: 1em !important; display: block !important; text-indent: -1.5em !important; background-position: 0px 1.1em !important; background-repeat: no-repeat no-repeat !important; "><creationDate>November 6, 2011</creationDate>
05.http://www.rockettheme.com/plugins/content/codecitation/styles/wrapping.png) !important; background-attachment: initial !important; background-origin: initial !important; background-clip: initial !important; background-color: initial !important; float: none !important; vertical-align: baseline !important; position: static !important; left: auto !important; top: auto !important; right: auto !important; bottom: auto !important; height: auto !important; width: auto !important; line-height: 1.1em !important; font-size: 1em !important; display: block !important; text-indent: -1.5em !important; background-position: 0px 1.1em !important; background-repeat: no-repeat no-repeat !important; "><author>RocketTheme, LLC</author>
06.http://www.rockettheme.com/plugins/content/codecitation/styles/wrapping.png) !important; background-attachment: initial !important; background-origin: initial !important; background-clip: initial !important; background-color: initial !important; float: none !important; vertical-align: baseline !important; position: static !important; left: auto !important; top: auto !important; right: auto !important; bottom: auto !important; height: auto !important; width: auto !important; line-height: 1.1em !important; font-size: 1em !important; display: block !important; text-indent: -1.5em !important; background-position: 0px 1.1em !important; background-repeat: no-repeat no-repeat !important; "><authorUrl>http://www.rockettheme.com</authorUrl>
07.http://www.rockettheme.com/plugins/content/codecitation/styles/wrapping.png) !important; background-attachment: initial !important; background-origin: initial !important; background-clip: initial !important; background-color: initial !important; float: none !important; vertical-align: baseline !important; position: static !important; left: auto !important; top: auto !important; right: auto !important; bottom: auto !important; height: auto !important; width: auto !important; line-height: 1.1em !important; font-size: 1em !important; display: block !important; text-indent: -1.5em !important; background-position: 0px 1.1em !important; background-repeat: no-repeat no-repeat !important; "><copyright>(C) 2005 - 2011 RocketTheme, LLC. All rights reserved.</copyright>
08.http://www.rockettheme.com/plugins/content/codecitation/styles/wrapping.png) !important; background-attachment: initial !important; background-origin: initial !important; background-clip: initial !important; background-color: initial !important; float: none !important; vertical-align: baseline !important; position: static !important; left: auto !important; top: auto !important; right: auto !important; bottom: auto !important; height: auto !important; width: auto !important; line-height: 1.1em !important; font-size: 1em !important; display: block !important; text-indent: -1.5em !important; background-position: 0px 1.1em !important; background-repeat: no-repeat no-repeat !important; "><license>http://www.gnu.org/copyleft/gpl.html GNU/GPL</license>
09.http://www.rockettheme.com/plugins/content/codecitation/styles/wrapping.png) !important; background-attachment: initial !important; background-origin: initial !important; background-clip: initial !important; background-color: initial !important; float: none !important; vertical-align: baseline !important; position: static !important; left: auto !important; top: auto !important; right: auto !important; bottom: auto !important; height: auto !important; width: auto !important; line-height: 1.1em !important; font-size: 1em !important; display: block !important; text-indent: -1.5em !important; background-position: 0px 1.1em !important; background-repeat: no-repeat no-repeat !important; "><version>2.0</version>
10.http://www.rockettheme.com/plugins/content/codecitation/styles/wrapping.png) !important; background-attachment: initial !important; background-origin: initial !important; background-clip: initial !important; background-color: initial !important; float: none !important; vertical-align: baseline !important; position: static !important; left: auto !important; top: auto !important; right: auto !important; bottom: auto !important; height: auto !important; width: auto !important; line-height: 1.1em !important; font-size: 1em !important; display: block !important; text-indent: -1.5em !important; background-position: 0px 1.1em !important; background-repeat: no-repeat no-repeat !important; "><description>Allows the addition of custom CSS to your site</description>
11.http://www.rockettheme.com/plugins/content/codecitation/styles/wrapping.png) !important; background-attachment: initial !important; background-origin: initial !important; background-clip: initial !important; background-color: initial !important; float: none !important; vertical-align: baseline !important; position: static !important; left: auto !important; top: auto !important; right: auto !important; bottom: auto !important; height: auto !important; width: auto !important; line-height: 1.1em !important; font-size: 1em !important; display: block !important; text-indent: -1.5em !important; background-position: 0px 1.1em !important; background-repeat: no-repeat no-repeat !important; "><files>
12.http://www.rockettheme.com/plugins/content/codecitation/styles/wrapping.png) !important; background-attachment: initial !important; background-origin: initial !important; background-clip: initial !important; background-color: initial !important; float: none !important; vertical-align: baseline !important; position: static !important; left: auto !important; top: auto !important; right: auto !important; bottom: auto !important; height: auto !important; width: auto !important; line-height: 1.1em !important; font-size: 1em !important; display: block !important; text-indent: -1.5em !important; background-position: 0px 1.1em !important; background-repeat: no-repeat no-repeat !important; "><filename plugin="customcss">customcss.php</filename>
13.http://www.rockettheme.com/plugins/content/codecitation/styles/wrapping.png) !important; background-attachment: initial !important; background-origin: initial !important; background-clip: initial !important; background-color: initial !important; float: none !important; vertical-align: baseline !important; position: static !important; left: auto !important; top: auto !important; right: auto !important; bottom: auto !important; height: auto !important; width: auto !important; line-height: 1.1em !important; font-size: 1em !important; display: block !important; text-indent: -1.5em !important; background-position: 0px 1.1em !important; background-repeat: no-repeat no-repeat !important; "></files>
14.http://www.rockettheme.com/plugins/content/codecitation/styles/wrapping.png) !important; background-attachment: initial !important; background-origin: initial !important; background-clip: initial !important; background-color: initial !important; float: none !important; vertical-align: baseline !important; position: static !important; left: auto !important; top: auto !important; right: auto !important; bottom: auto !important; height: auto !important; width: auto !important; line-height: 1.1em !important; font-size: 1em !important; display: block !important; text-indent: -1.5em !important; background-position: 0px 1.1em !important; background-repeat: no-repeat no-repeat !important; "><config>
15.http://www.rockettheme.com/plugins/content/codecitation/styles/wrapping.png) !important; background-attachment: initial !important; background-origin: initial !important; background-clip: initial !important; background-color: initial !important; float: none !important; vertical-align: baseline !important; position: static !important; left: auto !important; top: auto !important; right: auto !important; bottom: auto !important; height: auto !important; width: auto !important; line-height: 1.1em !important; font-size: 1em !important; display: block !important; text-indent: -1.5em !important; background-position: 0px 1.1em !important; background-repeat: no-repeat no-repeat !important; "><fields name="params">
16.http://www.rockettheme.com/plugins/content/codecitation/styles/wrapping.png) !important; background-attachment: initial !important; background-origin: initial !important; background-clip: initial !important; background-color: initial !important; float: none !important; vertical-align: baseline !important; position: static !important; left: auto !important; top: auto !important; right: auto !important; bottom: auto !important; height: auto !important; width: auto !important; line-height: 1.1em !important; font-size: 1em !important; display: block !important; text-indent: -1.5em !important; background-position: 0px 1.1em !important; background-repeat: no-repeat no-repeat !important; "><fieldset name="basic">
17.http://www.rockettheme.com/plugins/content/codecitation/styles/wrapping.png) !important; background-attachment: initial !important; background-origin: initial !important; background-clip: initial !important; background-color: initial !important; float: none !important; vertical-align: baseline !important; position: static !important; left: auto !important; top: auto !important; right: auto !important; bottom: auto !important; height: auto !important; width: auto !important; line-height: 1.1em !important; font-size: 1em !important; display: block !important; text-indent: -1.5em !important; background-position: 0px 1.1em !important; background-repeat: no-repeat no-repeat !important; "><field name="sitecss" type="textarea" default="30" label="Site CSS" description="The custom CSS to be added to the Site" />
18.http://www.rockettheme.com/plugins/content/codecitation/styles/wrapping.png) !important; background-attachment: initial !important; background-origin: initial !important; background-clip: initial !important; background-color: initial !important; float: none !important; vertical-align: baseline !important; position: static !important; left: auto !important; top: auto !important; right: auto !important; bottom: auto !important; height: auto !important; width: auto !important; line-height: 1.1em !important; font-size: 1em !important; display: block !important; text-indent: -1.5em !important; background-position: 0px 1.1em !important; background-repeat: no-repeat no-repeat !important; "><field name="admincss" type="textarea" default="30" label="Admin CSS" description="The custom CSS to be added to the Admin" />
19.http://www.rockettheme.com/plugins/content/codecitation/styles/wrapping.png) !important; background-attachment: initial !important; background-origin: initial !important; background-clip: initial !important; background-color: initial !important; float: none !important; vertical-align: baseline !important; position: static !important; left: auto !important; top: auto !important; right: auto !important; bottom: auto !important; height: auto !important; width: auto !important; line-height: 1.1em !important; font-size: 1em !important; display: block !important; text-indent: -1.5em !important; background-position: 0px 1.1em !important; background-repeat: no-repeat no-repeat !important; "></fieldset>
20.http://www.rockettheme.com/plugins/content/codecitation/styles/wrapping.png) !important; background-attachment: initial !important; background-origin: initial !important; background-clip: initial !important; background-color: initial !important; float: none !important; vertical-align: baseline !important; position: static !important; left: auto !important; top: auto !important; right: auto !important; bottom: auto !important; height: auto !important; width: auto !important; line-height: 1.1em !important; font-size: 1em !important; display: block !important; text-indent: -1.5em !important; background-position: 0px 1.1em !important; background-repeat: no-repeat no-repeat !important; "></fields>
21.http://www.rockettheme.com/plugins/content/codecitation/styles/wrapping.png) !important; background-attachment: initial !important; background-origin: initial !important; background-clip: initial !important; background-color: initial !important; float: none !important; vertical-align: baseline !important; position: static !important; left: auto !important; top: auto !important; right: auto !important; bottom: auto !important; height: auto !important; width: auto !important; line-height: 1.1em !important; font-size: 1em !important; display: block !important; text-indent: -1.5em !important; background-position: 0px 1.1em !important; background-repeat: no-repeat no-repeat !important; "></config>
22.http://www.rockettheme.com/plugins/content/codecitation/styles/wrapping.png) !important; background-attachment: initial !important; background-origin: initial !important; background-clip: initial !important; background-color: initial !important; float: none !important; vertical-align: baseline !important; position: static !important; left: auto !important; top: auto !important; right: auto !important; bottom: auto !important; height: auto !important; width: auto !important; line-height: 1.1em !important; font-size: 1em !important; display: block !important; text-indent: -1.5em !important; background-position: 0px 1.1em !important; background-repeat: no-repeat no-repeat !important; "></extension>

Let’s break this file down so we can easily understand what’s going on:

The first line is XML declaration, this ensures that everything in this file is considered to be in XML format. The next line is the opening tag for the extensions element, and this contains various attributes: version, type, group, and method.

The version shows this is intended for Joomla 1.7 and the type indicates that this is a plug-in, the group indicates this is a system plug-in, and the method of upgrade means this plug-in can be upgraded rather than having to be un-installed before a new version can be installed.

The next several lines contain elements that describe the name of the plug-in, and the author details etc. The next section of importance is the files element.

The files element can contain filename elements as well as folder elements, but for our simple plug-in we only need a single filename element. It has a single attribute for plug-in that identifies the enclosed filename of customcss.php as the actual plug-in file.

The last block of XML code defines the custom parameters that we want to make available when we edit the properties of this plug-in via the plug-in manager of the Joomla administrator. There are several built-in field types such as text, textarea, radio, select, etc. A full list can be found on the in the Joomla Documentation under Form Fields. In our example, we want to have two textarea fields, one for custom CSS for the frontend site, and one for the back-end administrator. The rows and cols attributes describe the size of this textarea field. It is important to use unique names for the ‘name’ attribute as this is how we will retrieve the saved information from the plug-in itself. The label is displayed in the form, and the description is displayed when you hover over the form label. In this example, we don’t want to have any default values, but in your own plug-ins you may want to pre-populate the fields with some values.

The Plug-in PHP File

The actual functionality takes place in the PHP file. For adding our provided custom CSS this is a relatively simple bit of code:

01.http://www.rockettheme.com/plugins/content/codecitation/styles/wrapping.png) !important; background-attachment: initial !important; background-origin: initial !important; background-clip: initial !important; background-color: initial !important; float: none !important; vertical-align: baseline !important; position: static !important; left: auto !important; top: auto !important; right: auto !important; bottom: auto !important; height: auto !important; width: auto !important; line-height: 1.1em !important; font-size: 1em !important; display: block !important; text-indent: -1.5em !important; background-position: 0px 1.1em !important; background-repeat: no-repeat no-repeat !important; "><?php
02.http://www.rockettheme.com/plugins/content/codecitation/styles/wrapping.png) !important; background-attachment: initial !important; background-origin: initial !important; background-clip: initial !important; background-color: initial !important; float: none !important; vertical-align: baseline !important; position: static !important; left: auto !important; top: auto !important; right: auto !important; bottom: auto !important; height: auto !important; width: auto !important; line-height: 1.1em !important; font-size: 1em !important; display: block !important; text-indent: -1.5em !important; background-position: 0px 1.1em !important; background-repeat: no-repeat no-repeat !important; ">/**
03.http://www.rockettheme.com/plugins/content/codecitation/styles/wrapping.png) !important; background-attachment: initial !important; background-origin: initial !important; background-clip: initial !important; background-color: initial !important; float: none !important; vertical-align: baseline !important; position: static !important; left: auto !important; top: auto !important; right: auto !important; bottom: auto !important; height: auto !important; width: auto !important; line-height: 1.1em !important; font-size: 1em !important; display: block !important; text-indent: -1.5em !important; background-position: 0px 1.1em !important; background-repeat: no-repeat no-repeat !important; ">* @version   1.0
04.http://www.rockettheme.com/plugins/content/codecitation/styles/wrapping.png) !important; background-attachment: initial !important; background-origin: initial !important; background-clip: initial !important; background-color: initial !important; float: none !important; vertical-align: baseline !important; position: static !important; left: auto !important; top: auto !important; right: auto !important; bottom: auto !important; height: auto !important; width: auto !important; line-height: 1.1em !important; font-size: 1em !important; display: block !important; text-indent: -1.5em !important; background-position: 0px 1.1em !important; background-repeat: no-repeat no-repeat !important; ">* @author    RocketTheme http://www.rockettheme.com
05.http://www.rockettheme.com/plugins/content/codecitation/styles/wrapping.png) !important; background-attachment: initial !important; background-origin: initial !important; background-clip: initial !important; background-color: initial !important; float: none !important; vertical-align: baseline !important; position: static !important; left: auto !important; top: auto !important; right: auto !important; bottom: auto !important; height: auto !important; width: auto !important; line-height: 1.1em !important; font-size: 1em !important; display: block !important; text-indent: -1.5em !important; background-position: 0px 1.1em !important; background-repeat: no-repeat no-repeat !important; ">* @copyright Copyright (C) 2007 - 2011 RocketTheme, LLC
06.http://www.rockettheme.com/plugins/content/codecitation/styles/wrapping.png) !important; background-attachment: initial !important; background-origin: initial !important; background-clip: initial !important; background-color: initial !important; float: none !important; vertical-align: baseline !important; position: static !important; left: auto !important; top: auto !important; right: auto !important; bottom: auto !important; height: auto !important; width: auto !important; line-height: 1.1em !important; font-size: 1em !important; display: block !important; text-indent: -1.5em !important; background-position: 0px 1.1em !important; background-repeat: no-repeat no-repeat !important; ">* @license   http://www.gnu.org/licenses/gpl-2.0.html GNU/GPLv2 only
07.http://www.rockettheme.com/plugins/content/codecitation/styles/wrapping.png) !important; background-attachment: initial !important; background-origin: initial !important; background-clip: initial !important; background-color: initial !important; float: none !important; vertical-align: baseline !important; position: static !important; left: auto !important; top: auto !important; right: auto !important; bottom: auto !important; height: auto !important; width: auto !important; line-height: 1.1em !important; font-size: 1em !important; display: block !important; text-indent: -1.5em !important; background-position: 0px 1.1em !important; background-repeat: no-repeat no-repeat !important; ">*/
08.http://www.rockettheme.com/plugins/content/codecitation/styles/wrapping.png) !important; background-attachment: initial !important; background-origin: initial !important; background-clip: initial !important; background-color: initial !important; float: none !important; vertical-align: baseline !important; position: static !important; left: auto !important; top: auto !important; right: auto !important; bottom: auto !important; height: auto !important; width: auto !important; line-height: 1.1em !important; font-size: 1em !important; display: block !important; text-indent: -1.5em !important; background-position: 0px 1.1em !important; background-repeat: no-repeat no-repeat !important; "> 
09.http://www.rockettheme.com/plugins/content/codecitation/styles/wrapping.png) !important; background-attachment: initial !important; background-origin: initial !important; background-clip: initial !important; background-color: initial !important; float: none !important; vertical-align: baseline !important; position: static !important; left: auto !important; top: auto !important; right: auto !important; bottom: auto !important; height: auto !important; width: auto !important; line-height: 1.1em !important; font-size: 1em !important; display: block !important; text-indent: -1.5em !important; background-position: 0px 1.1em !important; background-repeat: no-repeat no-repeat !important; ">// no direct access
10.http://www.rockettheme.com/plugins/content/codecitation/styles/wrapping.png) !important; background-attachment: initial !important; background-origin: initial !important; background-clip: initial !important; background-color: initial !important; float: none !important; vertical-align: baseline !important; position: static !important; left: auto !important; top: auto !important; right: auto !important; bottom: auto !important; height: auto !important; width: auto !important; line-height: 1.1em !important; font-size: 1em !important; display: block !important; text-indent: -1.5em !important; background-position: 0px 1.1em !important; background-repeat: no-repeat no-repeat !important; ">defined('_JEXEC') or die('Restricted index access');
11.http://www.rockettheme.com/plugins/content/codecitation/styles/wrapping.png) !important; background-attachment: initial !important; background-origin: initial !important; background-clip: initial !important; background-color: initial !important; float: none !important; vertical-align: baseline !important; position: static !important; left: auto !important; top: auto !important; right: auto !important; bottom: auto !important; height: auto !important; width: auto !important; line-height: 1.1em !important; font-size: 1em !important; display: block !important; text-indent: -1.5em !important; background-position: 0px 1.1em !important; background-repeat: no-repeat no-repeat !important; "> 
12.http://www.rockettheme.com/plugins/content/codecitation/styles/wrapping.png) !important; background-attachment: initial !important; background-origin: initial !important; background-clip: initial !important; background-color: initial !important; float: none !important; vertical-align: baseline !important; position: static !important; left: auto !important; top: auto !important; right: auto !important; bottom: auto !important; height: auto !important; width: auto !important; line-height: 1.1em !important; font-size: 1em !important; display: block !important; text-indent: -1.5em !important; background-position: 0px 1.1em !important; background-repeat: no-repeat no-repeat !important; ">jimport('joomla.plugin.plugin');
13.http://www.rockettheme.com/plugins/content/codecitation/styles/wrapping.png) !important; background-attachment: initial !important; background-origin: initial !important; background-clip: initial !important; background-color: initial !important; float: none !important; vertical-align: baseline !important; position: static !important; left: auto !important; top: auto !important; right: auto !important; bottom: auto !important; height: auto !important; width: auto !important; line-height: 1.1em !important; font-size: 1em !important; display: block !important; text-indent: -1.5em !important; background-position: 0px 1.1em !important; background-repeat: no-repeat no-repeat !important; "> 
14.http://www.rockettheme.com/plugins/content/codecitation/styles/wrapping.png) !important; background-attachment: initial !important; background-origin: initial !important; background-clip: initial !important; background-color: initial !important; float: none !important; vertical-align: baseline !important; position: static !important; left: auto !important; top: auto !important; right: auto !important; bottom: auto !important; height: auto !important; width: auto !important; line-height: 1.1em !important; font-size: 1em !important; display: block !important; text-indent: -1.5em !important; background-position: 0px 1.1em !important; background-repeat: no-repeat no-repeat !important; ">class plgSystemCustomCSS extends JPlugin {
15.http://www.rockettheme.com/plugins/content/codecitation/styles/wrapping.png) !important; background-attachment: initial !important; background-origin: initial !important; background-clip: initial !important; background-color: initial !important; float: none !important; vertical-align: baseline !important; position: static !important; left: auto !important; top: auto !important; right: auto !important; bottom: auto !important; height: auto !important; width: auto !important; line-height: 1.1em !important; font-size: 1em !important; display: block !important; text-indent: -1.5em !important; background-position: 0px 1.1em !important; background-repeat: no-repeat no-repeat !important; "> 
16.http://www.rockettheme.com/plugins/content/codecitation/styles/wrapping.png) !important; background-attachment: initial !important; background-origin: initial !important; background-clip: initial !important; background-color: initial !important; float: none !important; vertical-align: baseline !important; position: static !important; left: auto !important; top: auto !important; right: auto !important; bottom: auto !important; height: auto !important; width: auto !important; line-height: 1.1em !important; font-size: 1em !important; display: block !important; text-indent: -1.5em !important; background-position: 0px 1.1em !important; background-repeat: no-repeat no-repeat !important; ">public function onAfterInitialise() {
17.http://www.rockettheme.com/plugins/content/codecitation/styles/wrapping.png) !important; background-attachment: initial !important; background-origin: initial !important; background-clip: initial !important; background-color: initial !important; float: none !important; vertical-align: baseline !important; position: static !important; left: auto !important; top: auto !important; right: auto !important; bottom: auto !important; height: auto !important; width: auto !important; line-height: 1.1em !important; font-size: 1em !important; display: block !important; text-indent: -1.5em !important; background-position: 0px 1.1em !important; background-repeat: no-repeat no-repeat !important; "> 
18.http://www.rockettheme.com/plugins/content/codecitation/styles/wrapping.png) !important; background-attachment: initial !important; background-origin: initial !important; background-clip: initial !important; background-color: initial !important; float: none !important; vertical-align: baseline !important; position: static !important; left: auto !important; top: auto !important; right: auto !important; bottom: auto !important; height: auto !important; width: auto !important; line-height: 1.1em !important; font-size: 1em !important; display: block !important; text-indent: -1.5em !important; background-position: 0px 1.1em !important; background-repeat: no-repeat no-repeat !important; ">$app =& JFactory::getApplication();
19.http://www.rockettheme.com/plugins/content/codecitation/styles/wrapping.png) !important; background-attachment: initial !important; background-origin: initial !important; background-clip: initial !important; background-color: initial !important; float: none !important; vertical-align: baseline !important; position: static !important; left: auto !important; top: auto !important; right: auto !important; bottom: auto !important; height: auto !important; width: auto !important; line-height: 1.1em !important; font-size: 1em !important; display: block !important; text-indent: -1.5em !important; background-position: 0px 1.1em !important; background-repeat: no-repeat no-repeat !important; ">$doc =& JFactory::getDocument();
20.http://www.rockettheme.com/plugins/content/codecitation/styles/wrapping.png) !important; background-attachment: initial !important; background-origin: initial !important; background-clip: initial !important; background-color: initial !important; float: none !important; vertical-align: baseline !important; position: static !important; left: auto !important; top: auto !important; right: auto !important; bottom: auto !important; height: auto !important; width: auto !important; line-height: 1.1em !important; font-size: 1em !important; display: block !important; text-indent: -1.5em !important; background-position: 0px 1.1em !important; background-repeat: no-repeat no-repeat !important; "> 
21.http://www.rockettheme.com/plugins/content/codecitation/styles/wrapping.png) !important; background-attachment: initial !important; background-origin: initial !important; background-clip: initial !important; background-color: initial !important; float: none !important; vertical-align: baseline !important; position: static !important; left: auto !important; top: auto !important; right: auto !important; bottom: auto !important; height: auto !important; width: auto !important; line-height: 1.1em !important; font-size: 1em !important; display: block !important; text-indent: -1.5em !important; background-position: 0px 1.1em !important; background-repeat: no-repeat no-repeat !important; ">if ($app->isAdmin()) {
22.http://www.rockettheme.com/plugins/content/codecitation/styles/wrapping.png) !important; background-attachment: initial !important; background-origin: initial !important; background-clip: initial !important; background-color: initial !important; float: none !important; vertical-align: baseline !important; position: static !important; left: auto !important; top: auto !important; right: auto !important; bottom: auto !important; height: auto !important; width: auto !important; line-height: 1.1em !important; font-size: 1em !important; display: block !important; text-indent: -1.5em !important; background-position: 0px 1.1em !important; background-repeat: no-repeat no-repeat !important; ">// we are in the administrator
23.http://www.rockettheme.com/plugins/content/codecitation/styles/wrapping.png) !important; background-attachment: initial !important; background-origin: initial !important; background-clip: initial !important; background-color: initial !important; float: none !important; vertical-align: baseline !important; position: static !important; left: auto !important; top: auto !important; right: auto !important; bottom: auto !important; height: auto !important; width: auto !important; line-height: 1.1em !important; font-size: 1em !important; display: block !important; text-indent: -1.5em !important; background-position: 0px 1.1em !important; background-repeat: no-repeat no-repeat !important; ">$doc->addStyleDeclaration( $this->params->get('admincss',''));
24.http://www.rockettheme.com/plugins/content/codecitation/styles/wrapping.png) !important; background-attachment: initial !important; background-origin: initial !important; background-clip: initial !important; background-color: initial !important; float: none !important; vertical-align: baseline !important; position: static !important; left: auto !important; top: auto !important; right: auto !important; bottom: auto !important; height: auto !important; width: auto !important; line-height: 1.1em !important; font-size: 1em !important; display: block !important; text-indent: -1.5em !important; background-position: 0px 1.1em !important; background-repeat: no-repeat no-repeat !important; ">} else {
25.http://www.rockettheme.com/plugins/content/codecitation/styles/wrapping.png) !important; background-attachment: initial !important; background-origin: initial !important; background-clip: initial !important; background-color: initial !important; float: none !important; vertical-align: baseline !important; position: static !important; left: auto !important; top: auto !important; right: auto !important; bottom: auto !important; height: auto !important; width: auto !important; line-height: 1.1em !important; font-size: 1em !important; display: block !important; text-indent: -1.5em !important; background-position: 0px 1.1em !important; background-repeat: no-repeat no-repeat !important; ">// we are in the frontend site       
26.http://www.rockettheme.com/plugins/content/codecitation/styles/wrapping.png) !important; background-attachment: initial !important; background-origin: initial !important; background-clip: initial !important; background-color: initial !important; float: none !important; vertical-align: baseline !important; position: static !important; left: auto !important; top: auto !important; right: auto !important; bottom: auto !important; height: auto !important; width: auto !important; line-height: 1.1em !important; font-size: 1em !important; display: block !important; text-indent: -1.5em !important; background-position: 0px 1.1em !important; background-repeat: no-repeat no-repeat !important; ">$doc->addStyleDeclaration( $this->params->get('sitecss',''));
27.http://www.rockettheme.com/plugins/content/codecitation/styles/wrapping.png) !important; background-attachment: initial !important; background-origin: initial !important; background-clip: initial !important; background-color: initial !important; float: none !important; vertical-align: baseline !important; position: static !important; left: auto !important; top: auto !important; right: auto !important; bottom: auto !important; height: auto !important; width: auto !important; line-height: 1.1em !important; font-size: 1em !important; display: block !important; text-indent: -1.5em !important; background-position: 0px 1.1em !important; background-repeat: no-repeat no-repeat !important; ">}
28.http://www.rockettheme.com/plugins/content/codecitation/styles/wrapping.png) !important; background-attachment: initial !important; background-origin: initial !important; background-clip: initial !important; background-color: initial !important; float: none !important; vertical-align: baseline !important; position: static !important; left: auto !important; top: auto !important; right: auto !important; bottom: auto !important; height: auto !important; width: auto !important; line-height: 1.1em !important; font-size: 1em !important; display: block !important; text-indent: -1.5em !important; background-position: 0px 1.1em !important; background-repeat: no-repeat no-repeat !important; ">}
29.http://www.rockettheme.com/plugins/content/codecitation/styles/wrapping.png) !important; background-attachment: initial !important; background-origin: initial !important; background-clip: initial !important; background-color: initial !important; float: none !important; vertical-align: baseline !important; position: static !important; left: auto !important; top: auto !important; right: auto !important; bottom: auto !important; height: auto !important; width: auto !important; line-height: 1.1em !important; font-size: 1em !important; display: block !important; text-indent: -1.5em !important; background-position: 0px 1.1em !important; background-repeat: no-repeat no-repeat !important; ">}

The comment block at the top is not required but it’s just good practice to put a similar block at the top of your code.

This define should be included in every Joomla related PHP file, it basically stops the direct access of the file to ensure this file is only used by Joomla. This helps ensure that the file is not used out of context or in unintended ways by unscrupulous people.

The jimport statement ensures the base plug-in classes are loaded up and available.

The class definition is an important part of the plug-in, the naming should use this syntax: plg[plugin-type][plugin-name] and in our case this is plgSystemCustomCSS. This class also must extend JPlugin to ensure all the default plug-in functionality is available to your new plug-in.

The function definition for the onAfterInitialise() method is what allows you to provide custom logic that will be executed when the onAfterInitialise event is fired by Joomla.

These two lines get the current application object and document object that Joomla uses.

1.http://www.rockettheme.com/plugins/content/codecitation/styles/wrapping.png) !important; background-attachment: initial !important; background-origin: initial !important; background-clip: initial !important; background-color: initial !important; float: none !important; vertical-align: baseline !important; position: static !important; left: auto !important; top: auto !important; right: auto !important; bottom: auto !important; height: auto !important; width: auto !important; line-height: 1.1em !important; font-size: 1em !important; display: block !important; text-indent: -1.5em !important; background-position: 0px 1.1em !important; background-repeat: no-repeat no-repeat !important; ">if ($app->isAdmin()) {
2.http://www.rockettheme.com/plugins/content/codecitation/styles/wrapping.png) !important; background-attachment: initial !important; background-origin: initial !important; background-clip: initial !important; background-color: initial !important; float: none !important; vertical-align: baseline !important; position: static !important; left: auto !important; top: auto !important; right: auto !important; bottom: auto !important; height: auto !important; width: auto !important; line-height: 1.1em !important; font-size: 1em !important; display: block !important; text-indent: -1.5em !important; background-position: 0px 1.1em !important; background-repeat: no-repeat no-repeat !important; ">// we are in the administrator
3.http://www.rockettheme.com/plugins/content/codecitation/styles/wrapping.png) !important; background-attachment: initial !important; background-origin: initial !important; background-clip: initial !important; background-color: initial !important; float: none !important; vertical-align: baseline !important; position: static !important; left: auto !important; top: auto !important; right: auto !important; bottom: auto !important; height: auto !important; width: auto !important; line-height: 1.1em !important; font-size: 1em !important; display: block !important; text-indent: -1.5em !important; background-position: 0px 1.1em !important; background-repeat: no-repeat no-repeat !important; ">$doc->addStyleDeclaration( $this->params->get('admincss',''));
4.http://www.rockettheme.com/plugins/content/codecitation/styles/wrapping.png) !important; background-attachment: initial !important; background-origin: initial !important; background-clip: initial !important; background-color: initial !important; float: none !important; vertical-align: baseline !important; position: static !important; left: auto !important; top: auto !important; right: auto !important; bottom: auto !important; height: auto !important; width: auto !important; line-height: 1.1em !important; font-size: 1em !important; display: block !important; text-indent: -1.5em !important; background-position: 0px 1.1em !important; background-repeat: no-repeat no-repeat !important; ">} else {
5.http://www.rockettheme.com/plugins/content/codecitation/styles/wrapping.png) !important; background-attachment: initial !important; background-origin: initial !important; background-clip: initial !important; background-color: initial !important; float: none !important; vertical-align: baseline !important; position: static !important; left: auto !important; top: auto !important; right: auto !important; bottom: auto !important; height: auto !important; width: auto !important; line-height: 1.1em !important; font-size: 1em !important; display: block !important; text-indent: -1.5em !important; background-position: 0px 1.1em !important; background-repeat: no-repeat no-repeat !important; ">// we are in the frontend site       
6.http://www.rockettheme.com/plugins/content/codecitation/styles/wrapping.png) !important; background-attachment: initial !important; background-origin: initial !important; background-clip: initial !important; background-color: initial !important; float: none !important; vertical-align: baseline !important; position: static !important; left: auto !important; top: auto !important; right: auto !important; bottom: auto !important; height: auto !important; width: auto !important; line-height: 1.1em !important; font-size: 1em !important; display: block !important; text-indent: -1.5em !important; background-position: 0px 1.1em !important; background-repeat: no-repeat no-repeat !important; ">$doc->addStyleDeclaration( $this->params->get('sitecss',''));
7.http://www.rockettheme.com/plugins/content/codecitation/styles/wrapping.png) !important; background-attachment: initial !important; background-origin: initial !important; background-clip: initial !important; background-color: initial !important; float: none !important; vertical-align: baseline !important; position: static !important; left: auto !important; top: auto !important; right: auto !important; bottom: auto !important; height: auto !important; width: auto !important; line-height: 1.1em !important; font-size: 1em !important; display: block !important; text-indent: -1.5em !important; background-position: 0px 1.1em !important; background-repeat: no-repeat no-repeat !important; ">}

This is where the actual work happens. Basically the “if” statement is checking to see if we are in the administrator side of Joomla, if so we retrieve the value stored in the ‘admincss’ field for the plug-in parameters. This value is then passed in to the addStyleDeclaration() method on the document object. The addStyleDeclartion() method is a helper method that allows you to add arbitrary bits of CSS code to the HTML document that is presented to the browser.

The “else” part of the if statement does basically the same thing for the frontend site, just referencing the ‘sitecss’ field.

That’s it for the code!

Installation

One of the really handy new features of Joomla 1.7 is the ability to “Discover” extensions that are in the filesystem but not actually installed in Joomla yet. Assuming you created your folder and files under your Joomla site structure, you can just log in to the administrator and navigate to the Extensions Manager from the top menu. Once there simply click on the “Discover” sub-menu item. If you do not see anything listed, click the “Discover” button in the toolbar to refresh the discovery process.

You should see a row in the table for your newly created CustomCSS plug-in. Notice the name displayed is the one you defined in the customcss.xml file. This file is used to describe all the attributes of the plug-in even before it’s fully installed.

To install your new plug-in, simple click the checkbox on the left of the name, and click the “Install” button in the toolbar. You should be confronted with a successful installation message. That’s all there is to install the plug-in.

Configuration and Testing

To configure the plug-in and test it we have to go to the Plug-in Manager under the Extensions menu. If you choose “System” from the “- Select Type -” filter you will see only the System Plug-ins. After installation the plug-in is not enabled nor configured, so click on it to edit the properties.

To test both parts of this plugin I will enter some CSS in the Site CSS block to override a style on the default front-end template:

This CSS will override the leading h2 tag used in the blog-featured view for Joomla. You can see by default the text “Joomla” on the homepage is quite small an unimpressive. With this custom CSS we are changing the font-size to 5em, changing the font to Helvetica (or Arial, sans-serif if Helvetica is not available), and also adjusting the font-weight to bold.

For the Admin CSS block I set the default text size for textarea’s to 11px because I find the default size to be too large for my liking.

Make sure you set Enabled to “Enable” to ensure this plug-in will run. You can then test the results yourself by checking out the results when you load the site and admin sides of your site. You can quickly revert by disabling the plug-in, and see the original output take effect.

Source: Rockketheme Magazine