nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

Gallery App vs Maps and Apps gallery

ChristopherJennings4

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.

Find more posts tagged with

Category Gallery

Minimalist

Accepted answers

khutchins

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;
}

All comments

khutchins

You can use this url param to set the sortOrder to descending

https://fairfaxcountygis.maps.arcgis.com/apps/instant/filtergallery/index.html?appid=10af9929a4d2415793f475547c8f20e5&sortOrder=desc

&sortOrder=desc

khutchins

I don't see a way to do this via custom css or the app config.

swoiak

Also, is there a way to set the sorting of items to be reverse (descending) by title?

swoiak

Perfect! Thank you! Since you're an expert on this 😊, perhaps you also know if the hover over display can be adjusted. So, instead of seeing "Open in new tab", it could display the item summary, but still functionally launch the app when clicking on the thumbnail.

CategoryGallery2.jpg

khutchins

Looks like there was a typo in the custom css with an extra closing brace } located after the title logic.

I made a few other updates to the css - can you try replacing all of your css with this:

.card-gc__container, .card-gc__thumb-container{
    background:#eaeff1;

}

.fg__row{
    background-color:#eaeff1;
}

.fg-input-area__result-count{
    color:#d13636;
}

.nav-pager__btn{
color:#d13636;
}
.card-gc__title, .card-gc__sub-container, .card-gc__details{display:none;} 
.card-gc__details-container{
  min-height:130px;
}

khutchins

I can take a look if your app is public and you send the link. Also are you using Online or Enterprise? If Enterprise which version?

swoiak

Thanks for the quick response. This did not work for me, though. Any other suggestions?

khutchins

You should be able to hide that using this custom css:

.card-gc__sub-container{
display:none;}

swoiak

This thread has been really helpful. Is there a way to completely remove the icons at the bottom of the cards? I'm currently seeing the authoritative badge & the app launch icon (which is unnecessary because the thumbnail launches the app) & I'd like to not have these or the extra space at the bottom of the card. Attaching image. Thanks!

CategoryGallery.jpg

rozekc_washtenaw

Thanks for the CSS! How do you get the SVG icons in the bottom right corner to change their color? Also, is there a way to change the height here to get rid of empty space?

Update: Looks like I can get the icons with this. Please let me know if there's a more specific way.

/*Colors for icons on cards*/
svg {
fill:#344c5f !important;
}

ChristopherJennings4

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

khutchins

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;
}

ChristopherJennings4

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!

khutchins

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;}

Join the Conversation

Signed in members can post, follow updates, and more. New here? Register a free account.

Quick Links

Community Help
Find useful guides, FAQs, and documents to help you navigate and make the most of Esri Community.