How to write your own CSS code in Joomla 4 and Joomla 5?

⚠️ This article was created for developers!

To be able to follow the steps, you're required to have coding knowledge. If you're not a developer and can't achieve what you're looking for, consider hiring a developer.

Make sure to carefully follow the tutorial and write correct code. We're unable to provide help with custom coding, or the possible issues that are happening because of them.

Create a plugin with your css codes in it

Step 1

Create a folder inside your "plugins\system\" folder. I will call it "customcss":

plugins\system\customcss

Step 2

Create an XML file with the same name you used for the folder:

plugins\system\customcss\customcss.xml

and make it contain this code:

<?xml version="1.0" encoding="utf-8"?>
<extension version="1.0" type="plugin" group="system">
    <name>Custom CSS Plugin</name>
    <files>
        <filename plugin="customcss">customcss.php</filename>
        <filename>style.css</filename>
    </files>
</extension>

The name and CSS file's filename can be anything; the PHP file's filename and plugin attribute should match the folder's name.

Step 3

Create a CSS file with the same name you used in the xml file:

plugins\system\customcss\style.css

and it can contain the code you would like to have. As a test, it could be:

* {
    color:green!important;
}

Step 4

Create a PHP file with the same name you used in the xml file:

plugins\system\customcss\customcss.php

and make it contain this code, pointing to your css file:

<?php
$document = JFactory::getDocument();
$document->addStyleSheet( JUri::root() . 'plugins/system/customcss/style.css');

Step 5

At your Joomla admin area, go to System -> Discover (under Install):

Step 6

Press Discover extensions to install (or the Discover button on top, if you already have some discovered extensions):

Step 7

Select your plugin and press Install.

Step 8

Go to System -> Extensions (under Manage).

Step 9

Enable your plugin.

That's it, your codes are now running and you can customize the CSS file.

System plugins are running on both the frontend and backend of a website, so customize it well!

Tips

Only load CSS file into the frontend or backend

You can modify the PHP code to only load the CSS file to the frontend or only to the backend of your website:

<?php
$app = JFactory::getApplication();

if ($app->isClient('site')) {
	//frontend	
	$document = JFactory::getDocument();
	$document->addStyleSheet( JUri::root() . 'plugins/system/customcss/style.css');
}

if ($app->isClient('administrator')) {
	//backend	
}

Code won't load

If the code won't load, it means your template's code doesn't have a jdoc head tag:

<jdoc:include type="head"/>

This tag is used by Joomla to call in addStyleSheet codes. Insert it within the head part of your template:

<head>
<!-- other codes -->
<jdoc:include type="head" />
</head>