Portfolio App custom logo

chrijo_nrw — Thu, 03 Aug 2023 11:39:11 GMT

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

Re: Portfolio App custom logo

RyanLibed — Thu, 24 Aug 2023 16:07:56 GMT

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

topic Re: Portfolio App custom logo in ArcGIS Instant Apps Questions

Portfolio App custom logo

Re: Portfolio App custom logo