Time for action—display the new header image file
Let's get Joomla! to show our new header image. To do this, you'll first upload the file to your web server using FTP—which is very similar to moving or copying files on your own computer using File Explorer in Windows or the Finder on the Mac. If you've installed Joomla! yourself, you've already used FTP to put the Joomla software files on the web server (see Chapter 2 on installing Joomla!). If you're new to FTP, you can read more on the Web on using FTP software such as FileZilla (www.siteground.com/tutorials/ftp/filezilla.htm).
- Using your FTP program, connect to your web server and find the root directory where Joomla! is installed. Browse to the
/templates/rhuk_milkyway/imagesdirectory. This is the directory that contains the images files for the default Joomla! template, rhuk_milkyway. Upload thesrupheader.pngfile you just created to this folder.Next,we'll take a peek under the Joomla! hood and change a rule in the template files to point to the new image file. Yes, you're going to change a few lines of code—but don't worry, it's really straightforward and we're going to explain this code thing in a minute.
- In the Joomla! Control Panel, choose Extensions | Template Manager. In the Template Name column, click on the name of the default template, rhuk_milkyway.
- Click on the Edit CSS button, select
template.cssand click on Edit. The Template Manager editor screen opens. Scroll down to find the code that starts withdiv#logo. This is the code that tells Joomla! where the logo is positioned on the screen and what image file should be used.
- Change the
background: urlcode to refer to the new image file. This code should now read: background:url(../images/srupheader.png) 0 0 no-repeat; - Change the
widthandheightvalues to reflect the size of the new image. To shift the image a little to the left-hand side, decrease themargin-leftvalue. The three lines ofdiv#logoshould now read:width: 900px; height: 98px; margin-left: 25px;
- Click on the Save button. Click on Preview to see the results on the frontend. If you still see the Joomla! logo press F5 to force your browser to refresh (reload the page).
What just happened?
The new look for your site is beginning to take shape. You have updated the CSS stylesheet of the current Joomla! template to point to your new header file. You've replaced the original logo image with a new image that takes up all of the header screen space.
CSS ... stylesheets? Come again?
You've just changed some code in one of the Joomla! template files. Specifically, you've opened up the CSS file. Editing the CSS file of a Joomla! template is a quick way to change the appearance of your site. But just what is it, this CSS thing?
- You probably know web pages are documents containing HTML code. HTML tells the web browser what content it should display and roughly where this content is placed on the web page.
- These HTML documents can be linked to Cascading Style Sheets (CSS) files. These CSS files tell the web browser how the data in the HTML file should be displayed. CSS is a relatively simple set of rules that define the web pages' colors, fonts, page layout, and more.
As CSS instructions are stored in a separate file, these layout instructions can be linked to (and used by) any number of HTML documents. In other words—changing one line in a CSS file can change the appearance of a number of web pages using that CSS file. You've just seen an example of this when you made all pages on the site display a new logo image by editing the template.css file.
Joomla's built-in CSS editor screen makes it easy to quickly tweak the current template's layout details; however, you do need to have some knowledge of CSS for this. If you're new to CSS you can find a wealth of information on the Web. Just google the phrase "introduction to CSS" or "CSS tutorial" and you'll be presented with some great resources. To get a quick introduction, have a look at www.yourhtmlsource.com/stylesheets/introduction.html.
We'll be exploring CSS in more detail in Chapter 11.
One last thing: Clean up a little whatchamacallit
It's time for one last template customization job. You may have noticed a little… well, a little whatchamacallit in the center of the design, just below the header:
These are two half spheres stuck together. It's what remains of the Top Menu. When the Top Menu is enabled, these two spheres are displayed to the left-hand side and right-hand side of the menu links. Now that you have vigorously removed the contents of the site and disabled the Top Menu module, the template design leaves a few unwanted traces.