ArcGIS Hub Row CSS Class

KyleWikstrom

Greetings, everyone,

I am looking for some guidance on how to use ArcGIS Hub, specifically the Row setting's Row CSS Class configuration. My use case is as follows:

I have a Row that contains two Spacers, a Text card, and four Category cards.

Site Theme Settings

• Global Nav Background Color: #ffffff
• Global Nav Text Color: #364c60
• Header Background Color: #364c60
• Header Text Color: #ffffff
• Body Background Color: #ffffff
• Body Text Color: #334219
• Body Link Color: #4d6175
• Button Background Color: #aa613a
• Button Text Color: #ffffff
• Base Font: Avenir Next
• Heading Font: Avenir Next

Row Settings

• Layout: Box
• Text Color: #ffffff
• Background Color: #364c60
• Background Image: none
• Row CSS Class: row-a-white

The Category elements' Link Text typically displays using the color defined in the Site Theme Body Link Color parameter. However, I have deployed the ArcGIS Solution Address Data Management and it comes with a Hub site that uses the Row Setting Row CSS Class and sets it as 'row-a-white' which changes the Category elements' Link Text color. This setting appears to be overriding the default color of the Link Text.

I am unable to replicate this display when editing these configuration settings in a different Hub site. I have included a couple of screenshots.

Successful Row CSS Class screenshot

 

Unsuccessful Row CSS Class screenshot

 

I appreciate any help and guidance from the community. Much appreciated!

KyleWikstrom

After furthering exploring this issue and relying on the configuration of the Address hub provided in the Address Data Management ArcGIS Solution, I was able to determine that the CSS style to overwrite the Row Class is in the site Footer HTML. I copied and pasted the <style>...</style> configuration from the Address hub Footer HTML section and pasted it into my own Hub site's Footer HTML and the Row CSS Class was successfully updated. Below is the <style>...</style> that I used.

<style>

/* Theme Color Variable */
:root {
--theme-color-dark:#292929;
}

.btn {
text-decoration: none !important;
}

.steps-wrapper a {
text-decoration: none !important
}


* Button and Text Styling */
.primary-color {
color: var(--theme-color-dark);
}
.primary-fill {
fill: var(--theme-color-dark);
}

/* Steps 1234 */
.steps-wrapper li::before {
color: var(--theme-color-dark);
border-color: var(--theme-color-dark);
}
.steps-wrapper li::after {
background-color: var(--theme-color-dark);
}
.steps-wrapper {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-flow: row wrap; }

.steps-wrapper li {
counter-increment: pledge-counter;
position: relative;
flex-basis: 25%;
width: 25%;
margin-top: 40px;
padding-top: 40px; }

@media screen and (max-width: 800px) {
.steps-wrapper li {
flex-basis: 50%;
width: 50%; }

.steps-wrapper li::before {
transform: translate(-50%, -50%) !important; } }

@media screen and (max-width: 600px) {
.steps-wrapper li {
flex-basis: 100%;
width: 100%; } }

.steps-wrapper li::before {
box-sizing: border-box;
content: counter(pledge-counter);
display: inline-block;
line-height: 1;
text-align: center;
border-radius: 50%;
padding: 8px;
position: absolute;
top: 0;
transform: translate(-50%, -50%);
z-index: 4; 
font-size: 40px;
left: 50%;
height: 56px;
width: 56px; 
border: 1px solid;
background-color: #fff; }

.steps-wrapper li::after {
content: '';
display: block;
border-radius: 0;
height: 10px;
width: 100%;
position: absolute;
top: 0;
transform: translateY(-50%);
z-index: 2; }

.steps-wrapper li:first-of-type::after {
border-radius: 10px 0 0 10px; }

.steps-wrapper li:last-of-type::after {
border-radius: 0 10px 10px 0; }

.step-content {
box-sizing: border-box;
margin-top: -18px;
padding: 0 24px; 
text-align: center; 
}

a.svg-links:hover {
filter:brightness(85%);
}

a.svg-links:focus {
outline:#ffffff solid 2px;
}

/* Edge to Edge picture and text */
.edgetoedge-imgdiv {
padding:0px;
margin-top:-15px;
margin-left:-15px;
}
.edgetoedge-img {
object-fit:cover;
width: calc(100% + 30px);
max-height:80vh
}
.edgetoedge-text {
padding-left: 5%;
}

/* Row CSS Classes: Overrides site Theme colors for links in Category Cards, Summary Statistic Cards, and Contact Cards. 
Overrides <hr> color in Summary Statistic Cards, and email SVG in Contact Cards. 
Allows Cards to be used on rows with dark theme backgrounds that are other wise the same color as the Theme's Links. */

.row-a-white hr.ss-title-spacer {
border-color: #ffffff
}
.row-a-white .category-panel .category-card, .row-a-white .backtotop, .row-a-white .contact-card, .row-a-white .contact-card .svgstore-image {
color: #ffffff;
text-decoration: none;
fill: #ffffff;
}
.row-a-white .summary-statistic-card a:link, .row-a-white .category-panel .category-card:link, .row-a-white .backtotop:link, .row-a-white .contact-card a:link {
color: #ffffff;
}
.row-a-white .summary-statistic-card a:visited, .row-a-white .category-panel .category-card:visited, .row-a-white .backtotop:visited, .row-a-white .contact-card a:visited {
color: #ffffff;
}
.row-a-white .summary-statistic-card a:hover, .row-a-white .category-panel .category-card:hover, .row-a-white .backtotop:hover, .row-a-white .contact-card a:hover {
color: #d0cacd;
outline-color: #ffffff;
}
.row-a-white .summary-statistic-card a:focus, .row-a-white .category-panel .category-card:focus, .row-a-white .backtotop:focus, .row-a-white .contact-card a:focus {
color: #d0cacd;
outline-color:#ffffff;
}
.row-a-white .category-panel .category-card:focus-visible {
color: #d0cacd;
outline: #ffffff solid 2px;
}

.row-a-white .category-panel a:focus {
outline: #ffffff solid 2px;
}

.row-a-white .summary-statistic-card a:active, .row-a-white .category-panel .category-card:active, .row-a-white .backtotop:active, .row-a-white .contact-card a:active {
color: #d0cacd;
}




/* Manual Statistic Summary Text Card */
@media (max-width: 412px){
.mobile-stats {font-size:15.4vw} 
}
@media (min-width: 413px) and (max-width: 512px){
.mobile-stats {font-size:15.7vw} 
}
@media (min-width: 513px) and (max-width: 767px){
.mobile-stats {font-size:80px} 
}
@media (min-width: 768px) and (max-width: 991px){
.mobile-stats {font-size:36px}
}
@media (min-width: 992px) and (max-width: 1199px){
.mobile-stats {font-size:48px}
}
@media (min-width: 1200px){
.mobile-stats {font-size:60px} 
}

/* HTML Bookmarks
--- fix for html bookmark focus on sites with fixed headers---
*/
:target::before {
height: 120px;
margin-top: -120px;
visibility: hidden;
content: '';
position:relative;
display:block;
z-index:-1;
}
.navbar-contents a {
position: relative;
z-index:0;
}
/*end fix*/

/* Footer */
.contact-info-alignment {
text-align: center; 
}
.logo-title-alignment {
margin-left : auto;
margin-right: auto; 
}
@media (min-width: 768px) {
.contact-info-alignment {
text-align: right;
}
.logo-title-alignment {
margin-left : initial;
margin-right: initial
}
}

/*accessibility*/


*:focus-visible:not(a.ember-view, .svg-links) {
border-style: solid;
border-width:3px;
text-decoration:none;
}

/* Honors user device preference for no animation */
@media (prefers-reduced-motion: no-preference) {
html,
body {
scroll-behavior: smooth; /*note - smooth scrolling not supported in Safari */
}

/*Bookmarked content subtle highlight */
:target {
animation: focused-anchor 6s ease-in-out 1;
text-shadow: none;
}
@keyframes focused-anchor {
0% { 
text-shadow: none; 
}
25% { 
text-shadow: 0 0 1px black, 0 0 25px yellow, 0 0 10px yellow
}
50% {
text-shadow: none; 
}
75% { 
text-shadow: 0 0 1px black, 0 0 25px yellow, 0 0 10px yellow
}
100% { 
text-shadow: none
}
}
}
p {
font-size:16px;
}

.backtotop {
position:relative;
float:right;
font-size:12px
}
mark {background-color:#fff3ab}
</style>