How to change logo size on Rocket.Chat login screen [5.4.1]

Community Support
1

Description

I would like to edit the size of the displayed logo on the login screen and its margin.
I found the corresponding configuration in css:

  @media all
.rcx-css-13sr1uc {
  max-height: 2.5rem !important;
  margin-inline: -0.5rem !important;
}

which points to:

<img src="https://chat.demo.mydomain.com/assets/logo.png" alt="Logo" class="rcx-box rcx-box--full rcx-css-13sr1uc">

The problem is that after adding:

  @media all
.rcx-css-13sr1uc {
  max-height: 5.5rem !important;
  margin-inline: -0.0rem !important;
}

to custom css nothing changes. I read in a thread on github that “important” entries cannot be overwritten or changed. Is this true?

Server Setup Information

  • Version of Rocket.Chat Server: 5.4.1
  • Deployment Method: docker
  • MongoDB Version: 4.4
2

Hi!

Can you try the code below?

the .rcx-css-something is usually a random generated class, so you should not reference it directly.

 img[alt~="Logo"] {
     max-height: none !important;
 }

Edit: trying to fix the ” != "

Let me know if this helps :slight_smile:

Thanks!

3

Unfortunately, it did not help - nothing has changed. The logo is still small.

4

Any further insights? I’ve got this issue too and would realy glad to see, how this works!

5

That’s strange. This worked for me.

Have you cleared the cache?

Also, try installing the latest 5.X version.

6

I am on Version 5.4.3 and added your code to custom CSS. Also deleted all Browserdata, but nothing changed, Logo is still to small
image

7

Testing

before:
image

after:

image
image717×334 14.3 KB

While copying and pasting the code, what for the “Logo”. I think that was the problem :slight_smile:

it should be " and not ”

img[alt~="Logo"] {
max-height: none !important;
}