Required syntax for the Row CSS Class ArcGIS Hub

[Alex_B]

Hello, 

First time poster on here 🙂

I was hoping to seek some guidance on the required syntax for the creation of a "Row CSS Class" statement. 

I am looking to apply a background linear gradient to an image contained within a layout using a CSS snipit something like this.

Example: background: linear-gradient(black, white); 

Where I am stuck is how I apply this to a given layout, I have tried to use the above CSS in the 'Row CSS Class' box and noted no change.

I have also tried calling the class that the contains the image (using inspect elements I found this was the 'ember-view' class.) with no luck.

.emberview {
        background: linear-gradient(black, white); 

}

Any suggestions or help on how would go about resolving this would be much appreciated 🙂

If I missed out on any details required please let me know and I'll update in the comments.

Thanks,
Alex

[KlaraSchmitt]

Hi @Alex_B,

Please do not use emberview as your class. We strongly advise against using any of the auto-generated classes in our framework as these control our CSS for the application and could cause problems with your styling in the future.

The intention of the Row CSS Class is so that you can give the row a unique class name and then target that class name in <style></style> tags within your Text Card CSS. You will not be able to paste your gradient into the row class field as it's only for a class name. So say you name your row black-white-gradient, this will be applied to the row HTML and then in your Text Card, you want to switch to HTML mode and add your embedded styles:

<style>
.black-white-gradient {
   background: linear-gradient(0deg, rgba(255,255,255,1) 0%, rgba(4,12,18,1) 100%);
}
</style>

You may also find that you need to change the row background color to transparent, you'd do that by typing transparent into the row background color field in Row Settings.

[Alex_B]

Hey Klara,

Thank you, that makes sense 🙂

I do have a follow up question as it relates to applying this.

The image I am trying to apply this too has been set as a background image contained within the Layout section of the page. I don't appear to be able to access the HTML associated with the layout in the same way I am able to interact with other widgets and directly apply HTML changes. 

Any further advice or guidance would be much appreciated 🙂

[KlaraSchmitt]

You are correct. Hub does not provide access to its HTML and CSS in the same way that a self-hosted CMS might. You are able to use the HTML mode of the Text Card to do embedded stylesheets on our sites/pages that can be used to target unique row classes containing cards, but you will not be able to modify the HTML of the cards themselves, only the CSS. You should be able to apply the background image to the row in the same way we applied the gradient if you are looking for more flexibility in CSS attributes.