ArcGIS Hub Row CSS Class

KyleWikstrom — Fri, 22 Jul 2022 17:06:01 GMT

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!

Re: ArcGIS Hub Row RSS Class

KyleWikstrom — Fri, 22 Jul 2022 17:05:47 GMT

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>

topic Re: ArcGIS Hub Row RSS Class in ArcGIS Online Questions

ArcGIS Hub Row CSS Class

Re: ArcGIS Hub Row RSS Class