This is a default UX you should enable: Linking your Logo to the HomePage 

One of the most common navigation standards is that when you click on the logo of your site you are taken to the Home Page of your website. Funnily enough there are lots of templates which do not have this functionality implemented automatically. At CollectiveRay, we will show you how to enable this by doing the following steps:

Using ftp software or otherwise, go to the index.php file of you template in joomla/<template>/index.php

Look for something like

<div id="logo"></div> (this is what displays the logo in Joomla 1.5), and change this to

<a href="/index.php"><div id="logo"></div></a>

This  simply creates a link to the default Joomla homepage from your logo!

[How to] Change logo in Joomla Admin / Backend

Customize the Joomla Administrator backend with your own logo or preferred image

Sometimes it may be desirable to replace the Joomla logo with your own customised logo in the administration panel. These can be easily done by manually changing some images in the administration template.

Joomla 3

Using the template manager, using FTP or using the CPanel file manager, go to the ISIS template files, find the images folder and replace the files with a version of your own. Ideally, don't change the names, so don't you don't need to change any code, just rename your new logo to the logo.png and the other names of the files and replace them.

 

Change Joomla logo in Joomla Administration

Joomla 2.5

Using FTP go to the following directory administrator\templates\bluestork and open index.php. Find the following line and remove it completely or change it to suit your needs:

 <span class="logo"><a href="http://www.joomla.org" target="_blank"><img src="/templates/<?php echo  $this->template ?>/images/logo.png" alt="Joomla!" /></a></span>

Using FTP software or some other way to change Joomla files go to the following directory: \administrator\templates\khepri\images, you will see 3 folders called h_cherry, h_green, h_teal. 

You will find all the header images in these files, select the colour you are using and you can replace the images with the new logo images of your choice,

Please note keep the images the same dimensions or you will have to change several bits of code throught the site and CSS. Ideally if you want to change the logo only, keep it the same size, since the template has been designed for that size, and it usually looks best at that size...

Changing the logo in the Joomla default template

One of the very first things we all do in a new Joomla installation is change the default Joomla logo. When you are still a Joomla beginner, this might be a bit of frustrating task, especially when you still have no idea what templates are, and how to go about changing them. Well this tip tries to make things easier :)


Joomla 3

To edit the Joomla 3 logo, you'll need to find the Logo option in the Template Options. Go to Extensions > Templates > Make sure "Styles" are selected > Protostar > Advanced.

change default joomla logo template

There you'll find a Logo option. Click on the "Select" button, and choose your logo image file to display, or upload a new image to use as your logo. 

Joomla 1.5

The logo is defined as part of the rhuk_milkyway template. It is defined in the template.css file. To change it you need to do the following.

1. Using FTP software upload your new logo to /templates/rhuk_milkyway/images. Let's say the name of the new logo is logo-default.png. We have now made the logo available to the template.

2.  You know need to edit the reference to the logo file. This is done as follows. Edit the template.css file found in /templates/rhuk_milkyway/css/templates.css. Find the following CSS entry: div#logo, and there should be a reference to the logo: mw_joomla_logo.png. The full CSS entry is:

background: url(https://cdn.collectiveray.com/joomla/joomla-tips-and-tricks/34-linking-your-logo-to-the-homepage.html/../images/my_joomla_logo.png) 0 0 no-repeat; 

Change this to:

background: url(https://cdn.collectiveray.com/joomla/joomla-tips-and-tricks/34-linking-your-logo-to-the-homepage.html/../images/logo-default.png) 0 0 no-repeat; (or the name of the filename of the logo you have just uploaded)

3. Change the width and height entries in the to the width and height of your logo.

logocs

4. Save the CSS file, and replace the current version.

5. Refresh and voila, you have change the default logo.

One more thing... Did you know that people who share useful stuff like this post look AWESOME too? ;-)
Please leave a useful comment with your thoughts, then share this on your Facebook group(s) who would find this useful and let's reap the benefits together. Thank you for sharing and being nice!

Featured On

Inc Magazine Logo  

Sitepoint logo  

CSS Tricks logo   

webdesignerdepot logo   WPMU DEV logo   

and many more!

Where are we hosted?

This site is proudly powered by FAST VPS InMotion Servers and given an insane speed thanks to MaxCDN!

Web Hosting MaxCDN - Speed up your website

New! DIVI 3.1 WordPress Template + PageBuilder

You'll surely create a perfect website with Divi 3.1!

Get an exclusive 10% OFF for CollectiveRay visitors until

Divi 3

 

WordPress Elementor Sale

Themes for the most popular WordPress page builder from TemplateMonster!

We've got an exclusive 10% OFF for CollectiveRay visitor until - use Coupon Code: collectiveray

TemplateMonster Elementor sale

 

TemplateMonster Bundles

Awesome bundles for awesome websites. $1300 worth of products for $49 only!

We've got an exclusive 10% OFF for CollectiveRay visitors until - use Coupon Code: collectiveray

TemplateMonster Bundles

How to make your website FAST!

Step-by-step - free email course, how to make your website load in less than 1 second 

The Outstanding HungryJPEG Bundles

AWESOMENESS! Bundles of premium font + graphic packs at more than 96% OFF!  Get a bundle for just $9 - ONLY!

The Hungry JPEG Awesome font bundles

 

Advertise on CollectiveRay.com

CollectiveRay (formerly known as DART Creations) is interested in developing partnerships with mutual benefit. If you like the stuff we publish and would like to develop a relationship, we'd be happy to hear from you. Go on - drop us a line - we'd love to hear from you :-)

 

 

Disclosure: CollectiveRay is funded personally out of pure passion for helping people working with websites. We do however generate some income through recommendations of products. This means if you click on a link and purchase an item we link to, we will receive a small sum out of that sale. We usually partner with vendors to make your purchase cheaper than buying direct.

Popular Content

Joomla extensions to take your website to the NEXT level

Is your Joomla website reaching its full potential? We install many of these extensions on almost ALL of our Joomla sites - why don't you check them out our list of Joomla Extensions and see whether you can take your site to the next level?

who are we?

CollectiveRay is run by David Attard - working in and around the web design niche for more than 12 years, we provide actionable tips for people who work with and on websites. We also run DronesBuy.net - a website for drone hobbyists.

David attard

Follow us on Social

Follow us on Facebook   Follow us on Google+   Subscribe to our RSS Feed   Follow us on Twitter