Portfolio App custom logo

chrijo_nrw

Hey! I want to change the default logo settings:

- logo size

- logo aligned on right side

However, I can't figure out the css element and settings. Btw, is there any documentation of css tags and settings for instant apps? Would be a great resource.

Thx

Chrijo

RyanLibed

Hi @chrijo_nrw, 

You should be able to control the width/height of the header and logo with the 'Custom CSS' setting within the Instant Apps configuration window (Theme & Layout > Theme > Custom CSS).

The properties that you use will be based on the logo scale that was set. 

Example:

instant-apps-header {
  --instant-apps-header-logo-height--logo-scale--s: 80px;
  --instant-apps-header-logo-width--logo-scale--s: 80px;
  --instant-apps-header-height--logo-scale--s: 100px;
}

There is documentation of CSS properties for the instant-apps-components throughout the app (header, social share, etc.), but currently, not every part of the UI for each app.

Documentation on the header specifically can be found here: 
https://github.com/Esri/instant-apps-components/tree/master/packages/instant-apps-components/src/components/instant-apps-header#css-custom-properties

Hopefully this helps!

Best regards,
Ryan