Table of Contents

Customizing the logo

The procedures described on this wiki page allow you to change the following logo displayed on the top left:

It's a good practice to apply these changes not to the default theme but to your own theme. (Read how you can create your own theme.)

The simplest way to change the logo is to replace the file public/assets/themes/default/images/layout/logo.png with the logo you want to use. It should be in PNG format and 40 x 40 pixels in size.

Editing the CSS

If you know CSS you have more flexibility to edit the logo. Edit the file public/assets/themes/default/stylesheets/general/construction.css and search for the following rule: 

#logodiv {
    background-image: url(../../images/layout/logo.png);
    position: relative;
    margin: 5 auto;
    text-align: left;
    background-repeat: no-repeat;
    height: 45px;
    width: 45px;
    margin-left: 15px;
    margin-top:6px;
}

By changing the background-image property you can configure which image will be used as the logo. Now you can use any image format. For example, you could place your JPG logo in public/assets/themes/default/images/layout/logo.jpg and change the background-image property to url(../../images/layout/logo.jpg).

You can change the width and height properties to configure how much of the logo will be showed. Note that this doesn't resize the logo, but clips it. By changing the margin-left and margin-top properties you can configure how many pixels away from the top-left corner it will be placed.