Joomla header logo help.

September 4, 2009 10:14 AM

How do I add a header logo to my Joomla site?

I'm building a website with Joomla and I'm using the JS Education template because it's free and I can do drop down menus on it (actually, this part is already done).

The one thing that has me stumped is how to add our organization's logo to the header (instead of the text that's already there). There are tutorials out there that explain how to do this on the default template, but since I'm not using that, they're of little use to me.

I'm doing all this on local host, if that matters. And I'm a total noob and I don't know much about css/html, so please be gentle. Thanks!

posted by futureisunwritten to computers & internet (4 comments total)

I haven't used Joomla in a long time, but this is probably gonna require some research on your part. What I would do is open up the main html and css files and search for the link that the header is using (http://demotemplates.joomlashack.com/school/index.php?option=com_frontpage&Itemid=1) OR the text in the header (Education Template Demo). Then I would figure out the code needed to insert an image (basic html or css), delete the code with the header text and link, and insert new code for your new header image.

It will probably take some trial and error, but I'm not a Joomla pro so thats how *I* would have done it.
posted by Sufi at 11:24 AM on September 4

Try this:
1. access the template files using your FTP client (i.e. Filezilla or joomlaXplorer, a nifty FTP component that lets you access your files within your Joomla control panel). The bundled site images are located here: /[joomla root folder]/templates/js_education/images.
2. To replace the background image (the grey image with the red border at the bottom), upload your own image and name it site-bg.jpg (be sure to rename the exisiting image as site-bg_bck.jpg).
3. One way to add a banner is to replace the default background tile (site-bg.jpg) with a full banner (somewhat of a hack, but it would work). Go to the template manager within the control panel (extensions > template manager) and click on the js_education template in the list of installed templates. Click 'Edit CSS' in the upper left. Select 'template_css.css.' Scroll down to "#site-container'. You'll see the location of the site-bg.jpg image listed (edit this if you uploaded a different file type, such as a gif) followed by a repeat command (this tiles the image). Replace this with 'no-repeat.' Preview the site to see the results. If the banner is the correct size, it *might* look the way you want.
4. You can also search the CSS file (or perhaps HTML file) for the default text (H1 and H2). Edit these to your liking (or remove 'em if you don't want to display the text).

Another general tip that'll help you place content: You can display the module positions for any template by adding /index.php?tp=1 to the end of the URL. Example: Education template positions.
posted by prinado at 12:46 PM on September 4 [1 favorite has favorites]

prinado, I replaced the background image with my own logo...worked like a charm. Thank you.
posted by futureisunwritten at 9:08 PM on September 4

If you use firefox I find the extension firebug is great for troubleshooting CSS and site layouts.
posted by gergtreble at 4:27 AM on September 5 [1 favorite has favorites]