Small size logo

[evant89]

Description:

After updating the server to version 1.0.2, the size of the logo has decreased. In Layout - Custom CSS I have

: root {     --sidebar-footer-height: 90px; }

but nothing changes

Expected behavior:

Actual behavior:

Server Setup Information:

• Version of Rocket.Chat Server: 1.0.2
• Operating System: Ubuntu 16.04 64bit
• Deployment Method: tar
• Number of Running Instances: 1
• DB Replicaset Oplog: Enabled
• NodeJS Version: 8.11.4
• MongoDB Version: 4.0.9

Additional context

[Abraka]

Its small only in rocket chat client or in browser too?

[evant89]

in client and browser

[Abraka]

Same here, after update to 1.0.2 :-1:

[gannebamm]

Any news here? Maybe just share a small CSS snippet you could use to make it bigger?

in the footer section here, eg: https://your.rocket.chat/admin/Layout

[robbyoconnor]

Still an issue

Version: 3.2.1

[robbyoconnor]

Desktop client and electron aren't mutually exclusive as they use the same code.

[reetp]

Any news here? Maybe just share a small CSS snippet you could use to make it bigger?

Add these sort of things in layout custom CSS - I think you can add height & width to the sidebar__footer

.side-nav .footer img {
content:url("/assets/logo.png");
}

.sidebar__footer:not(:empty) {
    margin-left: auto;
    margin-right: auto;
}

(There may be a better place so YMMV - use a browser inspector to look and test)

[reetp]

Still an issue

Yo dude ;-)

That's OK, unless you have say a square logo, or one that is vertically taller than wide. I do think there needs to be more flexibility here. Rocket does not really consider corporate branding by default.

I think the only thing you can do is have some admin settings that allow people to properly dictate size and position of their logo.

Left/right/centre justify, width, height, lock/unlock ratio.

[robbyoconnor]

@reetp worked okay-ish

.side-nav .footer img {
content:url("/assets/logo.png");
  object-fit: cover;
}

.sidebar__footer:not(:empty) {
    margin-left: auto;
    margin-right: auto;
}

[luixxiul]

https://github.com/RocketChat/Rocket.Chat/issues/16418#issuecomment-595450861

this is a case of taste and our designer has aligned the logo to the left on purpose.

Users can change the logo aliment using the custom CSS setting on the admin if they prefer.

:)

[saurabhd]

.sidebar__footer:not(:empty) {
    margin-left: auto;
    margin-right: auto;
    padding: 0px 22px;
}

Works fine for me, put in layout->custom CSS

[dquelch]

Hi, it looks as though this solution no longer works in the latest (3.18.0 at the time of this writing). Logo was centered and sized perfectly prior to the update but now is back to its tiny version. I pulled the latest code down from Github to investigate and have tried various mods to the custom CSS code to no avail. Anyone more knowledgeable have any ideas?

[reetp]

Use a browser like Chromium, hover over the image, right click, Inspect and then look for the html for the image.

The old code was like this

<footer class="sidebar__footer">
    <img src="/assets/logo.svg">
</footer>

Look on the right for the CSS styling, and have a play around.

[dquelch]

Here's the new html code for 3.18

<footer class="rcx-box rcx-box--full rcx-css-1gardq0 rcx-css-1583vym"><a href="/home"><img src="assets/logo.png"></a></footer>

The specific style for the image seems to be referenced by

.rcx-css-1gardq0 img { max-width: 100%; height: 100%; }

I can modify the style directly from the browser and correct the image sizing and it works but when I copy it to the Custom-CSS it has no effect. Does it need to be referenced differently from the Custom CSS panel?

[dquelch]

As a followup to this, it looks as though the custom CSS is most likely being overridden by the html/javascript so I have added a !important to the properties and that seems to work.

[reetp]

I presume something like this:

.sidebar__footer:not(:empty) {
    margin-left: auto !important;
    margin-right: auto !important;
    padding: 0px 22px !important;
}

Odd because you needed !important for other styles, but not for this (I can see it in my servers). They must have changed stuff slightly.

[iFloris]

@reetp this worked for me

.rcx-css-1gardq0:not(:empty) {
    height: auto !important;
    width: auto !important;
}