Style sheets: Joomla! and CSS

When it comes to the design of a Joomla! site, almost everything is controlled using CSS. Therefore– it can be a daunting task to try and figure out which style sheets control which styles. However, once you get some practice it’s apparent that the approach Joomla! takes is actually very organized and streamlined.

All of the style sheets are found in the templates/rhuk_milkyway/CSS directory.

Essentially, only three of these style sheets are being used at any given time depending on the color template: one serves as a master style sheet, while the other two manage specific color elements. For this example, we went with blue, because I said so.

Photo by Markus Spiske on Unsplash

The three style sheets used to style your Joomla! site are:

  • blue.css
  • blue_bg.css
  • template.css

blue.css

This style sheet contains rules for displaying background images of the menu modules and link styles for the pill menu.

blue_bg.css

This style sheet styles the background images and colors for the header, footer, page background, and the main wrapper for the page.

template.css

Think of the template.css style sheet as the big mama jama (said MAM-UH JAM-UH). This is the master style sheet for your Joomla! site and where your changes will take place. Changing widths, heights, padding, alignments, positioning, etc…will most likely always take place here.

If you are looking for someone to walk you through how to manage your Joomla! site, or if you’re looking for someone to manage it for you, we can help. Head over to our Web Design Site for a deep-dive into what we do.

Need help with your companies computers? Contact Us, we have been providing Small Businesses with affordable IT solutions since 2001. We offer network security services, IT consulting, server management, office relocation services, and more.