Time for action—remove the whatsis
We won't use the top menu on our site, so we want to remove all traces of it. To do this, we'll have to delete a few lines in the template stylesheet:
- Navigate to Extensions | Template Manager and click on rhuk_milkyway. Click on the Edit CSS button and select the CSS file
template.css
. Click on the Edit button. - Find the CSS code that starts with
/* horizontal pill menu *//
. - Now, select all code of the
horizontal pill menu
styling: from thetable.pill
style to the stylepill # menu a # active_menu-nav
. - This last style definition ends with
background-position: 0 0;}
. - Because we will never use the horizontal menu in this site, we will remove these styles. Press the Delete key.
- Click on Save and then click on Preview. The header looks nice and clean.
What just happened?
You've changed the template stylesheet to remove some unnecessary formatting. Again, you've experienced how easy it is to use the built-in CSS editor to tweak the current template's layout.
Have a go hero—explore layout settings
As you've seen, there are two ways to influence the look and feel of your current template. The first way is tweaking the template parameters; the second is editing the template stylesheet. Have a go and experiment a little with the built-in template parameters. Get a feel for the effects that the different parameters have by trying out some width settings and color combinations. Pick your flavor, click on Apply, and click on Preview to see the output on the frontend.
You'll notice that template parameters only allow you to change a limited set of options. It's far more powerful to take a look under the hood and edit the template CSS files in the Joomla! editor. That way, your layout options are only limited by your CSS skills. Take a scroll through the template editor CSS files to get a feel for what coding in CSS is like—you'll notice that CSS rules are, for the most part, written in plain English and don't look at all difficult to understand.