• Home
  • Learn Joomla
    • Roadmap for New Users
    • Joomla Lingo
    • Joomla Installation
    • Joomla Administration
    • Joomla Documentation
    • Tutorials
  • How-to Videos
    • Index to Videos
    • Site Basics Videos
    • FAQ Videos
  • How Do I?
  • Links
    • Links Home
    • Template Sources
    • Sample Sites
    • General Joomla Sites
    • Official Joomla Sites
    • My Favorite Extensions
    • Joomla Documentation
    • Joomla Tutorial Sites
  • Site Showcase
  • Blog
  • Contact

How to I change the logo on my template?

PDF | Print | E-mail

 
This applies to Joomla 1.0.13 and 1.5
 
When Joomla is first installed, the default template that is used is called “rhuk_solarflare_ii,” generally just called “Solar Flare.”

If you decide to build your website using this template then you will no doubt want to change the main banner or logo of the site to replace it with your own.  This banner is a graphic image, and to change it you need to create a new graphic to take its place.

This requires a few tools other than Joomla to accomplish.  First of all, you need to have some type of graphics editor in order to modify the graphic (or create a new one).

Next, you will need to upload your modified graphic to your Joomla website to replace the original graphic.  This cannot be done from within Joomla itself without the installation of an add-in (available for free).  In this example, I will use an FTP program to re-upload the image to the web server, but you could also use your hosting account control panel file manager, if you have access to that.

Note:  while these instructions refer specifically to the default template of Joomla 1.0.13, the same principles are used with almost all other templates.

Step 1: Figure out the name and location of the logo image file

The first things to do is to get a copy of the image file onto your computer and find out the name and location of that file.   To do this, hold your mouse over the graphic and do a right click.  On the right click menu, choose <View Image> in Firefox, <View Background Image> in Internet Explorer.

This will load that single image in your browser window.  In the browser address bar you can see the name of the graphic file and you can also see where in the Joomla directory structure that file is located.

So, for example, this graphic is called header_short.jpg and it is located in the /templates/rhuk_solarflare_ii/images/ folder.  That is the file we need to modify.

Step 2:  Save the file onto your computer

Next we want to save this file onto your computer so you can edit it.  Do a right click on the image and choose “Save As …” and save the file (keeping the same name) onto a folder on your computer.  I recommend making a folder just for your Joomla edits, perhaps in “My Documents” or in “My Graphics” so you can easily find these things.

Step 3:  Edit or Create Your Graphic File

Once you have the file on your computer, you can open that file using a graphics editor and modify it as you see best.  You may even want to erase everything on the image and start totally from scratch, or start with a totally new image.  If so, then create a new image file with the same dimensions as the original logo file that you going to replace.  In the case of the header_short.jpg, the size is xxx by xxx pixels.

After you have edited the picture, save it with the same name as the original graphic file that you downloaded.

Need recommendations for a graphics editing programs?  See this article.

Step 4:  Save the changed graphic back up to your web server

The final step is transferring the changed graphic file that you have edited back up to your web server.  As I mentioned earlier, this cannot be done from within Joomla itself without an add-in extension.

Let’s see how to do this using an FTP program.

Log into your account using your FTP program, and navigate to the \templates\rhuk_solarflare_ii\images folder.  Next, do a right click on the folder name and choose “Upload.”  In the next box, specify that you want to upload a file, and then point the program to the graphic file that you have edited that you want to transfer to your webserver.  Confirm that you want to do the upload.  You may be asked if you want to over-write the file on the webserver.  Answer “Yes”

Once this is done, you should go back to your Joomla site.  Refresh the page by pressing <F5> (or even better, <Control> <F5> to force your browser to reload all graphics).   It may take a few refreshes, but your new graphic file should appear in place of the old one.

It often takes several tries to get the graphic right and to get things to  properly.  And, you will certainly want to develop some skill with your graphic editing program.    But, that is the basic process.

 
New? Start Here ...
  • Roadmap for New Users
  • Joomla Basics
  • How Do I Do This?
  • Free Templates
  • Joomla Tutorial Sites
  • Find the Joomla Documentation
  • Templates & Design Issues
  • FAQ Videos
  • Joomla Books
Quick Access
  • What's New / What's Hot
  • Recent Good Stuff
  • John's Joomla Toolbox
  • Template Sources
  • Recommended Joomla Tutorials
  • John's Real Job
  • Site Feedback / Contact
  • Site Credits
Recent "Good Stuff"
  • How to use the expanded user profiles in Joomla 1.7
  • A new template from JoomlaShine and an update to their slide show
  • 2 simple plug-ins for administrator approval of new users
  • A new version of the free template JA Purity - Wow!
  • A very nice, "lite" administrative template
  • A very easy way to keep your Joomla install up to date
  • Add new power to your administrative control panel
  • A couple of great modules for your site
  • A Great Free Template from JoomlaShack: Optimus
Featured Articles
  • Joomla Lingo
  • Why Should I Use Joomla?
  • How do I change the footer text in a template?
  • What is the difference between a component, a module and a mambot / plugin ?
Joomla 1.5 Featured Articles
Top "How Do I?" Articles
  • How do I create a quick "logout" button for users?
  • How to change the Joomla date format
  • How do I "move" a Joomla website from one folder to another?
  • Where does Joomla keep the articles?
  • Changing the text of messages in Joomla
  • How do I put a picture in an article?
  • Module Installation for Dummies
  • Making GIMP look like Photoshop
  • How to I create a custom page for a user to see after they submit a "contact us" message
  • Set up a demo site that allows many people to use the same login
home | site map | contact

Welcome to Joomla is an interesting side project by John Muehleisen.  Who is this guy, anyway?

The Joomla!® name is used under a limited license from Open Source Matters in the United States and other countries.
WelcomeToJoomla.com is not affiliated with or endorsed by Open Source Matters or the Joomla! Project.