how to build a custom css file
TRANSCRIPT
How to build a custom CSS file
“Which CSS file should I change for a particular Joomla extension?”
Some people suggest that you directly edit the original CSS files that were installed with that extension. This is actually very bad advice—and that’s not just my personal opinion.
A presentation by Michael Russell
Never directly edit or replace the original Joomla source files including the .CSS files!
Any changes you make will be overwritten when you upgrade or re-install them.
Why you should not directly edit the original Joomla extension CSS files?
Most Joomla extensions install their own CSS files (or minified versions of them)
You can edit these files if you really have the enthusiasm to wade through pages of often not-very-well documented code
Any changes that you make to these files will be lost when you install new versions of those extensions or re-install (or downgrade from) the version that you are currently using.
Options Add extra lines to the end of your Joomla site
template file.
• If you update your Joomla site template file you may also find that any changes you make there will be lost, too.
Create your own custom CSS file and add it to your Joomla site template.
• Better way of addressing the problem but also, if you update your Joomla site template file, you may have to add one line of code again afterwards. Generally-speaking, however, people do not often change their Joomla site template files.
Tools to help you design your own CSS rules
Several aids to developing your own CSS:
• Most are free. • Most modern web browsers include these tools as standard
(although some browsers require you to install add-on software). Firebug for Firefox IE Developer Tools for Internet Explorer DevTools for Google Chrome Web Inspector for Safari Dragonfly for Opera
After you have crafted your CSS rule(s) for your site, copy the code and paste it into a standard text editor (e.g. Notepad) and you are ready to build your own custom CSS file.
Where to add custom CSS rules
Most of the better commercial Joomla templates include a file where you can add your own custom CSS rules.
• You will normally find this file in the folder <joomla-root>/templates/<template-name>/css/ and the file is often called custom.css.
• Joomla Protostar template does not have a custom.css file
Create a custom CSS file for the Kunena forum component
Benefits of having your own styleshet
Benefits:
1. Simpler and easier to maintain.2. Future-proof against loss because of
upgrades3. Better organised4. If done properly, the styles established in
your “extension stylesheet” will override specific styles in the site template as well as other stylesheets installed by the extension(s) you may have.
Create a custom stylesheet: Template Manager
Extensions » Template Manager Edit the Protostar Template Create a New File
Edit your “index.php” file:Template Manager
Open index.php in the Joomla editor
Look for the line
Add the following line
// Add Stylesheets$doc->addStyleSheet('templates/'.$this->template.'/css/template.css');
$doc->addStyleSheet('templates/'.$this->template.'/css/custom_kunena.css');
