Configure It Out: A recurring series where we discuss how to foster and apply creativity, out of the box thinking, problem solving, and more to app configuration and design.
J: Five posts into our series and we’re already breaking the mold. Usually, Dylan and I ramble on for a little bit and then offer up a challenge to our readers as a creative project. This time, however, Dylan threw down the gauntlet for us.
D: Well, I threw down the gauntlet for you, at least. I had this idea for a little bit of friendly competition between the two of us, centered around testing our respective skills at learning-by-doing, exploring a tool or capability that neither of us have touched before.
Unfortunately, as fate would have it my ‘day job’ got unbearably busy right around the time we put out our Waffle blog (link), and hasn’t let up since. Or maybe my dog ate my homework. I haven’t quite settled on a good excuse yet.
J: Yeah, you totally weren't feeling the pressure of competing against me or anything like that.
D: ….I’ll just go ahead and set the scene with the original premise of the ‘challenge’ I laid out for us. In ArcGIS Hub, there is an obscure setting when configuring a Row in your site layout that allows you to set up a CSS class for your Row. In theory, this would allow you to target the Row element itself with CSS styling and rules, and I thought it would be fun to see what kind of interesting uses we could come up with for this setting.
I have to admit, there was more to this challenge than just trying to push our abilities. I think it’s a great opportunity to discuss how Jen and I approach unknown tools.
I’m a huge proponent of learning anything by getting in there and trying things. Esri tech is so broad that I don’t think it is reasonable, or possible, to know what every button, setting, or configuration is useful for. Because of this, I think it’s so important to carve out space to just click the button, apply the setting, etc – and see what happens. As we explained in our first ever Configure it Out blog post, a “GIS-MacGyver” mindset of “what does this do, and how can I apply that to my problem?” beats a mindset of “how is this supposed to be used” every time.
How did you approach the Hub-Row-CSS-gauntlet, Jen?
J: I struggled a bit at first to come up with an idea. I had only used this setting previously to hide rows based on screen sizes, and that’s not very fun or creative. I wanted to explore what additional functionality this setting can provide. Sure, I could add custom CSS, but I could already add custom CSS to my ArcGIS Hub sites via text cards. So, what is new or different about adding it to the row?
The biggest difference I saw was that adding CSS to the row allowed me to control the background of the entire row, as opposed to only the background of a text card. The row settings UI already allows you to change the background color or add an image as the background, so I needed to come up with something MORE. After a lot of trial and error and scrapped ideas, here’s what I came up with.
I shall have boring rows....Nevermore!
D: (thinking): Am I missing something? I don’t see it…
J: I LOVE how this turned out. I’m so tickled by it. It is subtle and easy to miss. Now that I had the general idea ironed out, I decided to take it up a notch...
Truly the twilight years of plain hub rows is upon us.
And then another notch.
Sunsetting static hub rows from now on
Boy the image compression here is killing my big reveals. 😭
Anyway, in all three examples, I have a background image with some strategic transparency and am using the row CSS to change the background color using some animations.
Adding color animation with keyframes
Every few seconds the background would animate. In this case, that animation was simply changing the background color. This color change would be visible through the transparent portions of my background image, creating some fun visuals.
This was my first time playing with keyframes and animations, so it was quite the educational experience. Another win for my just mess around approach to learning.
D: These turned out SO cool. I bet that the developers for Hub never anticipated that the Row CSS class setting would be used to animate sunsets, stars, and ravens. And, you showed me something else new – CSS animations.
I did have one last question, though. It’s going to drive me insane. What did you animate in the first image, of the raven? I still don’t see it!
J: I guess you just don't have a very observant EYE.
Raven eye changing colors
Challenge
It’s the Hub Row CSS Challenge. Shocking, we know. Share your experiments in the comments, as we would love to see what other ideas folks have for this capability.
Check out the rest of the Configure It Out series for more tips, tricks, and discussions on creative problem solving and out of the box thinking in ArcGIS.
