Change Logo in Joomla: How to Change Logo in Joomla Template?

Each website must have a unique attractive logo. When you installed Joomla for your website, you will find the default logo of Joomla. But you need to replace the default logo with your company or website logo. Changing logo in Joomla is simple and easy. This page explains in short the ways to change the logo of your Joomla website.

Steps to change logo in Joomla template:

Follow the following steps to change logo in Joomla template:
  1. Create a logo of your website using Photoshop or paint or any other photo editingsample logo software or program. For example, we create a logo myLogo.png and it looks like the followings. After creating the logo, upload the logo to the image directory of the template.
  2. Log in to your websites' admin control panel and access Extensions | Template Manager.
  3. Select the template which your are using and click on Edit option.
  4. Click on Edit CSS option to access the template’s CSS code.
  5. A list of templates will be listed and choose template.css for changing the logo of the website. Choose that and click on Edit link
  6. Find the code block of logo and replace the logo name with your uploaded logo name in the url section. In the following, you will find the change format of CSS after changing the logo name.
    div#logo {
    position: absolute;
    left: 0;
    top: 0;
    float: left;
    width: 298px;
    height: 75px;
    background: url(../images/myLogo.png) 0 0 no-repeat;
    margin-left: 30px;
    margin-top: 25px;
    }

  7. Finishing the above steps, click on Save button to to change the logo. After saving the code, refresh your website and you will find the changed logo in your website.
Outlook of the template, after changing the logo

Following the above steps, you can easily change logo of the Joomla website. Hope, you will be able to do that. Moreover, if you face any problem during the time of changing of the template logo, just mention it to the comment section.

No comments:

Post a Comment