How to Change the Joomla! Logo

How to Change the Joomla! Logo

Why should I leave the Powered By Joomla! link? Joomla! is an open source, community based project. If possible, you should leave the link to because when your site visitors see what a pretty site you have, they'll discover the power of open source community projects. You shouldn't feel embarrassed that your site is powered by Joomla! Feel proud to have site powered by an award winning Content Management System!

The Joomla! logo is located at the top of the template to the left.

Header Specs:
File Name: mw_joomla_logo.png
Location: /templates/rhuk_milkyway/images/
Size: 298x75px
Type: Transparent PNG

The logo is known to most web developers as a header. Its the heading of the website. It usually contains the logo of the organization or company that the site represents. This image is in PNG format. The reason for this is because it is transparent.

If the background color behind this header image was changed, the change would be seen in all the areas of this logo that are not solid colors. This is done through CSS Z-Index settings. You don't really have to worry about this, but when you replace this header, it will save you a lot of time and work if you create one that is the same size (298x75px) and same file format.

I'm going to put a header that I created into this area by creating a new image in imaging editing software. The image I use will be the same size as the original, and will also be a transparent PNG file.

After you have created a new header file, and saved it as a transparent PNG, you can then upload the new file to this directory: /templates/rhuk_milkyway/images/

I named my new header: my-new-header.png, and then uploaded it into the template's image directory. Now, you can save yourself some work by naming the file the exact same name as the previous header. This way, you don't have to change any code. The new image just overwrites the previous one. But if you feel like doing things differently (particularly for Search Engine Optimization reasons) you will have to edit the CSS call to the existing header file.


Follow the steps outlined in the Changing rhuk_milkyway's default configurations section of this document to get to rhuk_milkyway's configuration editing screen. At the top there are a number of command icons. One is marked Edit CSS. Click it.

Listed are a bunch of CSS files. Most of them are color specific. The one we are going to have to change will be the main CSS file: template.css.

The CSS file we want to edit is known as the main CSS file. This is because the other CSS files are simply files that add more customization. The main CSS file is the one that contains all the required data for drawing the site in a web browser. The file name is template.css. (In Joomla! 1.0.X it was called template_css.css).

Note: If the file template.css is not writable, you will not be able to save any changes. You must change the permissions of this file to 777 before you can edit it. Using an FTP client, go to this directory: /templates/css/
Make the file template.css writable. The CSS editing screen will display writable indicating that the file is now available for editing.

Select the template.css file by clicking the radio button directly next to it, and then click edit. (See Figure 9)

The next screen you see will be a built-in CSS editor. On line 82 of the template's CSS code, you will see this div tag:

div#logo {
	position: absolute;
	left: 0;
	top: 0;
	float: left;
	width: 298px;
	height: 75px;
	background: url(../images/mw_joomla_logo.png) 0 0 no-repeat;
	margin-left: 30px;
	margin-top: 25px;


As you might guess, the line we want to change is the 7th line in this div tag:

background: url(../images/mw_joomla_logo.png) 0 0 no-repeat;


This line calls the header file mw_joomla_logo.png if we want to call a different file that we've uploaded to the sever, we'll have to change this line. Usually the new image we upload is in the same directory as the current image:



After you've changed the file path so that it exactly reciprocates the new header file's directory, file path, and file extension (type) you can save the change to the code by clicking the save button on the toolbar.

At this point, you should have uploaded a new header file that was the same size as the previous (298x75), saved it as a transparent PNG, and uploaded it to Rhuk_milkyway's image folder. Then, if you didn't name it the same name (mw_joomla_logo.png), you should have changed the CSS call to the header image. If you've done all these things, then the new header image you created should be appearing in the area that the Joomla! logo was.

you can also follow this link to joomla for more details

Members Login