====== Customizing the logo ======

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

{{:opengoo_default_logo.png|}}

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

===== Replacing the default logo =====


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.