Logo in left upper corner

SuiteCRM Forum - English Language SuiteCRM General Discussion
1

Hi,

I wanted to place the icon of my company in SuiteCRM.

So i edited the file _headerModuleList.tpl. The logo is now displayed on the login page. Thats nice, but i want to have to logo in the upper left corner as well.

I deletet the SuiteCRM Text in the System settings. My logo is in the System settings as well, but not in the corner.

How can I solve this issue? Any ideas?

An upload in the System settings is not possible, I always recieve an error message.

Kind regards

2

Hi,

You can do this with the following steps:

Copy the file _headerModuleList.tpl from themes/SuiteR/tpls/
and paste it in the directory location: custom/themes/SuiteR/tpls/
If this location doesn’t exist, then feel free to create it.

In this newly pasted _headerModuleList file, change line 42:
{$APP.LBL_BROWSER_TITLE}
to point to an image file. For example:

You may need to change the height/width of the image, depending on the image’s size itself.
When you have done this, go to Admin > Repair and run “Quick Repair and Rebuild”
The image should show the next time you navigate to another page.

1 Like
3

That’s great, I’m also interested in this.

I tried adding a small logo (our customized favicon) to the left of the text (not just replacing the text).

{$APP.LBL_BROWSER_TITLE}

but the text shows below the image, not on the right of the image.

I’m afraid I’m useless with CSS, can any kind soul please help me get the desired effect, taking care to check if it handles all the screen sizes correctly (responsive design, mobile screens, etc.)?

Many thanks in advance!

4

This was easier than I thought, just a couple of style settings:

        <a class="navbar-brand" href="index.php"><img style="display: inline; margin-right: 5px;" src="custom/themes/SuiteR/images/sugar_icon.ico">{$APP.LBL_BROWSER_TITLE}</a>

Tested on Firefox and Edge, works ok showing small logo + text.

If you don’t have a customized favicon and just want to see how this would look, remove the “custom/” from the path above and you’ll see it with the default SuiteCRM icon (though that icon is 36 x 36px, and mine is smaller, 16 x 16 px).

1 Like
5

Hi!

  1. Go to your current theme folder -> for example: themes/SuiteP/tpls/login.tpl
    (the new installs set the SuiteP by default)

  2. Edit

  3. Find the title and the link at line 54:
    SuiteCRM

  4. If you want you can remove the whole line or edit the link and the alt text.

logo:

  1. find the these files below:

themes/SuiteP/images/p_login_logo.svg")
themes/SuiteP/images/p_login_logo.png")

  1. Remove or change it to your logo or find the style.css in the folder: themes/SuiteP/css

  2. Done!

Your welcome!

6

@w9rld it’s nice of you to leave the tutorial, thanks!, but your recommendations should use the Custom folder to keep everything upgrade-safe:

https://pgorod.github.io/Custom-folder/