Translations of this page?:

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.

Discussion

PLEASE NOTE: Comments to the wiki should only contain suggestions and questions that help us to improve the manual (and not the software). These comments will be deleted as soon as the information has been integrated into the manual.

Posts that do not contribute to the DOCUMENTATION of the project will be DELETED.

Ask QUESTIONS on the product here.
Report BUGS here.
Propose NEW FEATURES here.


Enter your comment
 
logo.txt · Last modified: 2013-02-27 18:06 (external edit)
 
Except where otherwise noted, content on this wiki is licensed under the following license: CC Attribution-Noncommercial-Share Alike 3.0 Unported


Terms of Service | Privacy and Security policies | Copyright © 2014 fengoffice.com