Gallery App vs Maps and Apps gallery

257
4
Jump to solution
07-27-2022 08:23 AM
Labels (2)
ChristopherJennings4
New Contributor II

The previous version of the Gallery was much more configurable. The ability to turn off the summary, author, etcetera was very useful. Now it is just a default template with a limited configuration that you cannot style to your environment. I have legacy Maps and Apps Gallery I still deploy on my hub page that now cannot be switched out or configured to match the legacy display on the hub page. Please add the additional configurable ability back.

0 Kudos
1 Solution

Accepted Solutions
KellyHutchins
Esri Frequent Contributor

We have the ability to theme the app on our roadmap. In the meantime if you know css you can also style the app using the custom css options. Here is a quick - not very attractive example- that you could use to play around with. The colors in the example below are defined using hex codes. You can use a tool like this one to find a hex color for various color values: https://htmlcolorcodes.com/color-picker/

If there is a portion of the app you'd like to style that isn't covered by the css below let me know on this thread and I'll see what I can do to help. 

 

/*The background color for the app header*/
.fg__header {
    background: #00bcd4;
}
/*The text color for the app header*/
.fg__header-title-section{
    color:#fff;
}
/*The color of the back of the card that contains the thumbnail and desc*/
.card-gc__container, .card-gc__thumb-container{
    background:#ddd;
}
/*Color for the background of the main area that contains the gallery*/
.fg__row{
    background-color:#738593;
}
/* Text color for the text that shows the # of results*/
.fg-input-area__result-count{
    color:#fff;
}
/*Colors for the navigation buttons at the bottom of the gallery*/
.nav-pager__btn{
    color:#fff !important;
}

 

 

View solution in original post

0 Kudos
4 Replies
KellyHutchins
Esri Frequent Contributor

Hi Christopher

Thanks for the feedback. If you toggle off the Express option at the top of the config panel you'll see that there are options to disable the author, item type, date, view count etc.  There isn't a config option for disabling the summary but we can look into that for a future release.   

Screen Shot 2022-07-27 at 8.44.11 AM.png

However you can turn off the summary using the Custom CSS option that can be found in the Theme and Layout section of the config panel. If you paste this css into the input box it will hide the summary and make the item cards a bit smaller: 

.card-gc__snippet{display:none;} .card-gc__details-container{min-height:200px;}
0 Kudos
ChristopherJennings4
New Contributor II
Thank you, Kelly.
This does make the gallery app more useful as we did not want to obscure the content with a summary. One step further, the ability to add color to the cards and background? This will help with styling in a larger site such as Experience Builder and Hub sites.
Thanks again for the help!
0 Kudos
KellyHutchins
Esri Frequent Contributor

We have the ability to theme the app on our roadmap. In the meantime if you know css you can also style the app using the custom css options. Here is a quick - not very attractive example- that you could use to play around with. The colors in the example below are defined using hex codes. You can use a tool like this one to find a hex color for various color values: https://htmlcolorcodes.com/color-picker/

If there is a portion of the app you'd like to style that isn't covered by the css below let me know on this thread and I'll see what I can do to help. 

 

/*The background color for the app header*/
.fg__header {
    background: #00bcd4;
}
/*The text color for the app header*/
.fg__header-title-section{
    color:#fff;
}
/*The color of the back of the card that contains the thumbnail and desc*/
.card-gc__container, .card-gc__thumb-container{
    background:#ddd;
}
/*Color for the background of the main area that contains the gallery*/
.fg__row{
    background-color:#738593;
}
/* Text color for the text that shows the # of results*/
.fg-input-area__result-count{
    color:#fff;
}
/*Colors for the navigation buttons at the bottom of the gallery*/
.nav-pager__btn{
    color:#fff !important;
}

 

 

0 Kudos
ChristopherJennings4
New Contributor II

Fantastic Kelly. We are very pleased with this solution. It has expanded our customization ability for the gallery.

0 Kudos