Portfolio App custom logo

392
1
08-03-2023 04:39 AM
Labels (1)
chrijo_nrw
New Contributor

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

1 Reply
RyanLibed
Esri Contributor

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/com...

Hopefully this helps!

Best regards,
Ryan

 

0 Kudos