Joomla 3.x. How to replace the text logo with image logo on the loading page (Wegy template)

Hello! This video tutorial shows how to replace the text logo with image logo on the loading page in Joomla Wegy template.

There is a default logo which is displayed while the page is loading:

You may want to replace the Wegy logo title with your own image logo.

Let’s learn how to do that.

The tutorial assumes you are already logged into your Joomla admin panel.

1. Navigate to Extensions ->Templates tab:

   

2. Then click the Templates tab at the left hand side of the appeared screen:

   

3. Scroll down to the bottom of the screen to locate the “Theme3092 Details and Files” and click on its title:

   

4. Now that the theme files editing interface appeared, click on “css” folder icon at the left and choose the template.css file from the opened drop-down:

   

5. 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:

.mod-custom__page_loader .logo h1:before {
height: 35px;
width: 35px;
border-radius: 1000px;
content: "";
left: 0;
position: absolute;
top: 0;
}
.mod-custom__page_loader .logo h1:after {
height: 29px;
left: 23px;
top: 4px;
width: 29px;
border-radius: 1000px;
content: "";
opacity: 0.6;
position: absolute;
}

Comment the code out and add the following code right below it:

.mod-custom__page_loader .logo {
background: url("direct_path_to_your_logo_goes_here") 50% 50% no-repeat!important;
}
.mod-custom__page_loader .logo h1 span {
color: transparent !important;
}

Where direct_path_to_your_logo_goes_here is the path to the logo image on your server.

So the code will look as follows after editing:

/*.mod-custom__page_loader .logo h1:before {
height: 35px;
width: 35px;
border-radius: 1000px;
content: "";
left: 0;
position: absolute;
top: 0;
}
.mod-custom__page_loader .logo h1:after {
height: 29px;
left: 23px;
top: 4px;
width: 29px;
border-radius: 1000px;
content: "";
opacity: 0.6;
position: absolute;
}*/
.mod-custom__page_loader .logo {
background: url("images/logo.png") 50% 50% no-repeat!important;
}
.mod-custom__page_loader .logo h1 span {
color: transparent !important;
}

Do not forget to click green “Save” button at the upper part of the screen to apply changes:

Navigate to your site front-end and refresh the page to see changes.

You can see your logo is now successfully displayed while the page is loading:

This is the end of the tutorial. We have learnt how to replace the text logo with image logo on the loading page in Joomla Wegy template.

Feel free to check the detailed video tutorial below: