Tip:
Highlight text to annotate it
X
Let's take a look at all of the different places that CSS resides within our
Joomla! system. We are going to use our Firefox Web Developer toolbar to go to
CSS > Edit CSS. And as I mentioned previously, this pulls up all of the
external style sheets and the embedded styles that are associated with this
particular web page. The first style sheet of interest is default.css.
This style sheet is the one that we generated with the custom template that we
have built on this particular website. To learn more, make sure you take a look
at the Joomla! creating and editing custom templates on the lynda.com website.
Now also notice that we have two other style sheets here, called system.css and
general.css. These are style sheets that are associated with the Joomla! system
itself and it provides a baseline level of styling for a number of items on the
website. This helps with styling some of the WYZIWYG editors, editing web pages
from the front end, Balloon pop- ups and other items within Joomla.
Finally, if you install the extension such as FireBoard, a very popular
discussion board that integrates easily in Joomla!, or XMap, a great site
mapping tool, these also come with external style sheets that are associated
with these particular extensions. Some of these components and modules will
come with their own style sheets while others will not. You will just have
to check depending on which ones you install. In any case, you can generally override
any of the styles that come from system.css, general.css or any of the
other style sheets associated with Joomla! extensions via the style sheets that
are attached to the template that's controlling the web page you are working
on. In general, you will only need to edit one
style sheet within Joomla!. That's default.css. The styles in default.css will
override any settings that you may have in system.css or general.css or any style
sheet associated with an extension, provided that you make your style
declaration specific enough.