This tutorial will show you how to change the header, footer and pre-loader logo in Joomla templates.
In order to change the header and footer image logo, please, do the following:
- Log into the administration panel of your Joomla website and go to Extensions > Template Manager.
- Then, go to Extensions -> Templates -> Styles, and click on theme####-Default.
- Open the Layout tab and navigate to Logo settings/Footer Settings sections.
- Use the Select button to browse your custom logo image.
- Depending on your logo dimensions you might need to change the logo block width. To do this, please, locate a Logo Width option. Here you will be able to set up the width of the logo’s container. Select the needed number of columns (up to 12) and save the changes for the section.
Note, that you need to change logo and it’s container width for each style under Extensions -> Templates -> Styles -> theme####.
Now feel free to check your website, the logo should be changed.
Preloader logo text can be changed same as the main logo text in System -> Global Configuration -> Site name section.
To change the preloader spinner, please, do the following:
- Navigate to Extensions ->Templates tab.
- Then click theTemplates tab at the left-hand side of the appeared screen.
- Scroll down to the bottom of the screen to locate the “ThemeXXXX Details and Files” and click on its title.
- Now that the theme files editing interface appeared, click on “css” folder icon at the left and choose the template.css file from the list.
- Click on the area with the file code and use the CTRL+F/CMND+F key (Windows OS/Mac OS) to find the following block of code:
Comment the code out and add the following code right below it:
Here direct_path_to_your_logo_goes_here is the path to the logo image on your server.
- After that, click the green “Save” button at the upper part of the screen to apply your changes.
- Navigate to your website frontend and refresh the page to see the changes. You can see your custom logo is now successfully displayed while the page is loading.
We hope this article helped you to learn how to change the header, footer and pre-loader logo in Joomla templates.
