Can I change the Header Link Text COLOR.

3151
8
Jump to solution
06-21-2016 02:05 PM
KennethBusby
Occasional Contributor

Is there a way to change the color of the Header Link Text in a Journal map? I do not see a way in settings and have only been able to do so through Inspecting and changing the color that way but it is only temporary as any refresh and the change is lost. The default color is almost invisible.

Thanks.

Ken

Tags (1)
0 Kudos
1 Solution

Accepted Solutions
OwenGeo
Esri Notable Contributor

Hi Ken,

Sure, no problem. Here you go...

<style type="text/css">.link {
     color: blue !important;
}
</style>

It's the link element you need to change the color on (not linkContainer), and you'll also need to use !important to make sure your style change overrides the existing style.

Some more good examples are in this article, which is linked to in the one I referenced above: Create buttons for main stage actions using the style tag

Owen

 2016-06-24 at 8.39.38 AM.JPG

 2016-06-24 at 8.38.08 AM.JPG

Owen Evans
Lead Product Engineer | StoryMaps

View solution in original post

8 Replies
OwenGeo
Esri Notable Contributor

Ken -- if you've found the right CSS property to override that color you can pass that in via a <style> tag in the HTML editor in any section to make the change permanently.

Check this blog out for more detail on how to do that: https://developerscorner.storymaps.arcgis.com/using-custom-html-in-map-journal-70913cfff66e

Owen

Owen Evans
Lead Product Engineer | StoryMaps
0 Kudos
KennethBusby
Occasional Contributor

This is great to know but does it allow for customization of the header text above the description container?

0 Kudos
OwenGeo
Esri Notable Contributor

Yup!

Owen Evans
Lead Product Engineer | StoryMaps
0 Kudos
KennethBusby
Occasional Contributor

How. Do I put the HTML in the line for the Header link

0 Kudos
OwenGeo
Esri Notable Contributor

Hi Ken,

As that article says, style overrides are global so your can put them (even ones that impact the header) in any section. Just edit a section of your story, go to the HTML Source View, and paste your <style> tag code at the top of bottom.

Owen

Owen Evans
Lead Product Engineer | StoryMaps
0 Kudos
KennethBusby
Occasional Contributor

Maybe I am missing something. can you show me what code I should use. I attempted to put

<style type="text/css">span class = "linkContainer"   {color:blue;}

</style>

&

<style type="text/css">body {background-color:lightgrey;}

div.header {color:black;}

</style>

0 Kudos
OwenGeo
Esri Notable Contributor

Hi Ken,

Sure, no problem. Here you go...

<style type="text/css">.link {
     color: blue !important;
}
</style>

It's the link element you need to change the color on (not linkContainer), and you'll also need to use !important to make sure your style change overrides the existing style.

Some more good examples are in this article, which is linked to in the one I referenced above: Create buttons for main stage actions using the style tag

Owen

 2016-06-24 at 8.39.38 AM.JPG

 2016-06-24 at 8.38.08 AM.JPG

Owen Evans
Lead Product Engineer | StoryMaps
KennethBusby
Occasional Contributor

Thank you

0 Kudos