Community
Select to view content in your preferred language

Gallery Card Border Red in ArcGIS Hub Initiative

429
12
Jump to solution
08-07-2024 11:58 AM
SarahRadel
by
Occasional Contributor
‎08-07-2024 11:58 AM

Hello, 

I was working in my hub, and I noticed that all of my gallery cards have a red border. I did not do this. Before, my cards did not have a border. Is there any way to fix this?

 

Thank you,

 

Sarah

1 Solution

Accepted Solutions
SarahRadel
by
Occasional Contributor
‎08-08-2024 02:40 PM

@KlaraSchmitt The North Carolina Community Information Portal Team (www.nccip.org) has figured out how to fix this issue.  The issue was that all of the gallery card borders in our initiative had changed to red. Upon inspection @RobHoward found the following: It computes the border accent color from other values on the page. In this case, it computes the borderAccent using the following code:

</> JavaScript

setBorderAccent: (e,t)=>(0,
n.default)(e).isLight() ? (0,
n.default)(t.body.text).lighten(40) : (0,
n.default)(t.body.text).darken(50)

The problem was in the body text color, which was set to a very dark red color, almost black. When the theme generator processed it, it made it 40% lighter since the call to isLight was false.

Solving this was an endeavor!  If I could make a recommendation: expose the border accent as a setting instead of computing it from text color.

Thank you to everyone who stepped in to help us fix this issue.

View solution in original post

12 Replies
Ed_
by MVP Regular Contributor
MVP Regular Contributor
‎08-07-2024 12:12 PM

Have you tried the Hub site on another browser and/or another computer?

Question | Analyze | Visualize
0 Kudos
SarahRadel
by
Occasional Contributor
‎08-07-2024 12:34 PM

Hi Ed,

Thank you 🙂 I have tried the Hub site on other browsers and other computers, and I am still getting the same result 😞

Best,

 

Sarah

Preview file
677 KB
KlaraSchmitt
by Esri Regular Contributor
Esri Regular Contributor
‎08-07-2024 12:56 PM

@SarahRadel Do you have any custom CSS used in your Hub site? Sometimes if you use a CSS selector that is too generic, your CSS will leak out of wherever you put it on the page and affect other elements. This is why we typically recommend at least setting a custom row class and then using that class in front of generic selectors.

.my-special-row .card {border-color: red}

SarahRadel
by
Occasional Contributor
‎08-08-2024 07:39 AM

@KlaraSchmitt I do have a custom header, but I have never had this issue before with it.  When inspecting the page, I can see where the issue is, but it will not accept my changes. Is there any way that you can help me with this? 

0 Kudos
KlaraSchmitt
by Esri Regular Contributor
Esri Regular Contributor
‎08-08-2024 07:44 AM

@SarahRadel Sure. Paste the code you think is responsible. 

When you say it's not accepting your changes, do you mean you cannot click the Apply button in the code editor? Do you see any warning icons in your code editor? (This would signify that you have a validation error and we cannot save code we know would compile in a way that would break things.)

0 Kudos
SarahRadel
by
Occasional Contributor
‎08-08-2024 01:05 PM

Hi Klara,

Thank you so much for taking the time to help me with this issue.  It looks like it is an inline style being defined on the HTML element itself. I do not think that my team and I can change the style at our level. Here is the link to our ArcGIS Hub: www.nccip.org 

 <html lang="en-us" style="--vh: 12.89px; --headerBackground: #ffffff; --headerText: #0f2d50; --headerTextTransparent: hsla(212, 68%, 19%, 0); --headerSecondTierBackground: #e0e0e0; --bodyBackground: #ffffff; --bodyText: #170606; --bodyLink: #2c2c2c; --bodyLinkHoverColor: #121212; --bodyTextAlpha08: hsla(0, 59%, 6%, 0.08); --bodyTextAlpha15: hsla(0, 59%, 6%, 0.15); --bodyTextAlpha20: hsla(0, 59%, 6%, 0.2); --bodyLinkTransparent: hsla(0, 0%, 17%, 0); --bodyBackgroundMed: #f7f7f7; --bodyBackgroundDark: #f2f2f2; --bodyBackgroundAlpha50: hsla(0, 0%, 100%, 0.5); --bodyBackgroundTransparent: hsla(0, 0%, 100%, 0); --bodyBorderAccent: #b93030; --bodyTextLight: #3f1111; --bodyTextLighter: #7c2020; --bodyContrastSafeLink: #2c2c2c; --bodyContrastSafeLinkTransparent: hsla(0, 0%, 17%, 0); --bodyContrastSafeText: #170606; --bodyLinkAlpha60: hsla(0, 0%, 17%, 0.6); --bodyLinkForWhiteBackground: #2c2c2c; --fontsBaseFamily: Avenir Next; --fontsHeadingFamily: Avenir Next; --globalNavBackground: #172c4d; --globalNavText: #ffffff; --buttonBackgroundHoverColor: #121212; --buttonBackgroundAlpha08: hsla(0, 0%, 17%, 0.08); --header-height: 173px; --logoSmall: https://water.ecu.edu/wp-content/pv-uploads/sites/292/2021/09/NSF-CoPe-logo-1024x328.png; --footer-height: 46px;" hydrated="" class="hydrated" calcite-hydrated="">

Ed_
by MVP Regular Contributor
MVP Regular Contributor
‎08-07-2024 12:44 PM

Hmm that's interesting yeah because I don't see this on my end. Maybe @KlaraSchmitt from the ESRI Hub Team might be able to help you on this 🙂

Question | Analyze | Visualize
0 Kudos
SarahRadel
by
Occasional Contributor
‎08-08-2024 08:01 AM

@Ed_ Thank you 😊

Ed_
by MVP Regular Contributor
MVP Regular Contributor
‎08-08-2024 08:23 AM

No worries, I am glad that I was able to point you in the right direction and @KlaraSchmitt is an excellent resource 🙂 Good luck! 👍

Question | Analyze | Visualize
0 Kudos