Smart View logo requirements

jcollier1

We are trying understand if there are any guidelines or restrictions such as dimensions, dpi, image resolution etc when trying to update the customers Smart View global header icon / logo?

It's my understanding the logo currently is "height: 24px; width: 220px;" but can this be updated to anything?

Ferdinand Prantl

The logo is centred in a box of 280x58 pixels (16.2.9) or 422x58 pixels (21.1). As you see, it varies in different CS versions. See the selector .binf-widgets .binf-navbar-brand>.csui-logo" in the browser. Any image size that fits this box will work well. There are no other limitations. Mind the dark blue background when designing the logo.

The size of the actual image may vary in different versions of CS. It was 280x32 pixels in 16.2.9 and 422x32 pixels in 21.1, for example.

This is an example themes/alberi from the csui-style-override-kit.

/* Replace company logo image */
.binf-navbar .binf-navbar-brand .csui-logo .csui-logo-image {
 background-image: url(images/alberi.company.logo.png);
 height: 38px;
 width: 144px;
}

If you need a greater width of the box around the image, you can override the style with the selector ".binf-widgets .binf-navbar-brand>.csui-logo". Do not change the height, because the application header is 60 pixels high.

The csui-style-override-kit is released with each CS version, but it seldom changes. You can have a look at the version 20.4, for example.