Joomla header logo help.
September 4, 2009 10:14 AM Subscribe
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!
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!
Best answer: 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, 2009 [1 favorite]
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, 2009 [1 favorite]
Response by poster: 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, 2009
posted by futureisunwritten at 9:08 PM on September 4, 2009
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, 2009 [1 favorite]
posted by gergtreble at 4:27 AM on September 5, 2009 [1 favorite]
« Older How can I get college football box scores as a... | How to guarantee return postage into the future. Newer »
This thread is closed to new comments.
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, 2009