nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

#ProTip: Styling Tips for Your Header

Anonymous User

Note: This post, from 2015, covers features that are not present in the newer versions of ArcGIS Open Data.

----------------

One of the easiest ways to start customizing your ArcGIS Open Data site is to start with the header. The this is section at the top of the page that displays your logo and site name.

Screen Shot 2015-03-19 at 9.47.32 PM.png

If you use your browsers developer tools to inspect the generated CSS, these are the classes that style it by default:

<SPAN class="selector token">#header</SPAN>
 <SPAN class="punctuation token">{</SPAN>
<SPAN class="property token">position</SPAN>
<SPAN class="punctuation token">:</SPAN> relative
<SPAN class="punctuation token">;</SPAN>
<SPAN class="property token">width</SPAN>
<SPAN class="punctuation token">:</SPAN> 100%

<SPAN class="punctuation token">;</SPAN>
<SPAN class="property token">min-height</SPAN>
<SPAN class="punctuation token">:</SPAN> 60px

<SPAN class="important token">!important</SPAN>
<SPAN class="punctuation token">;</SPAN>
<SPAN class="property token">height</SPAN>
<SPAN class="punctuation token">:</SPAN> auto
<SPAN class="punctuation token">;</SPAN>
<SPAN class="property token">background</SPAN>
<SPAN class="punctuation token">:</SPAN> #fff
<SPAN class="punctuation token">;</SPAN>
<SPAN class="property token">box-shadow</SPAN>
<SPAN class="punctuation token">:</SPAN> 0
 0
 5px

 #555
<SPAN class="punctuation token">;</SPAN>
<SPAN class="punctuation token">}</SPAN>
<SPAN class="selector token">.header-image</SPAN>
 <SPAN class="punctuation token">{</SPAN>
<SPAN class="property token">float</SPAN>
<SPAN class="punctuation token">:</SPAN> left
<SPAN class="punctuation token">;</SPAN>
<SPAN class="property token">height</SPAN>
<SPAN class="punctuation token">:</SPAN> 50px

<SPAN class="punctuation token">;</SPAN>
<SPAN class="property token">margin-bottom</SPAN>
<SPAN class="punctuation token">:</SPAN> 10px

<SPAN class="punctuation token">;</SPAN>
<SPAN class="property token">padding</SPAN>
<SPAN class="punctuation token">:</SPAN> 0
 20px

 0
 0
<SPAN class="punctuation token">;</SPAN>
<SPAN class="punctuation token">}</SPAN>
<SPAN class="selector token">.site-brand</SPAN>
 <SPAN class="punctuation token">{</SPAN>
<SPAN class="property token">position</SPAN>
<SPAN class="punctuation token">:</SPAN> relative
<SPAN class="punctuation token">;</SPAN>
<SPAN class="property token">display</SPAN>
<SPAN class="punctuation token">:</SPAN> inline-block
<SPAN class="punctuation token">;</SPAN>
<SPAN class="property token">float</SPAN>
<SPAN class="punctuation token">:</SPAN> left
<SPAN class="punctuation token">;</SPAN>
<SPAN class="property token">margin-top</SPAN>
<SPAN class="punctuation token">:</SPAN> 10px

<SPAN class="punctuation token">;</SPAN>
<SPAN class="property token">font-size</SPAN>
<SPAN class="punctuation token">:</SPAN> 1.5em

<SPAN class="punctuation token">;</SPAN>
<SPAN class="property token">color</SPAN>
<SPAN class="punctuation token">:</SPAN> #444
<SPAN class="punctuation token">;</SPAN>
<SPAN class="property token">margin-right</SPAN>
<SPAN class="punctuation token">:</SPAN> 20px

<SPAN class="punctuation token">;</SPAN>
<SPAN class="punctuation token">}</SPAN>
<SPAN class="selector token">.site-logo</SPAN>
 <SPAN class="punctuation token">{</SPAN>
<SPAN class="property token">color</SPAN>
<SPAN class="punctuation token">:</SPAN> #333
<SPAN class="punctuation token">;</SPAN>
<SPAN class="property token">float</SPAN>
<SPAN class="punctuation token">:</SPAN> none
<SPAN class="punctuation token">;</SPAN>
<SPAN class="property token">font-family</SPAN>
<SPAN class="punctuation token">:</SPAN> "
Avenir LT W01 65 Medium"

,Arial
,sans-serif
<SPAN class="punctuation token">;</SPAN>
<SPAN class="property token">font-size</SPAN>
<SPAN class="punctuation token">:</SPAN> 19px

<SPAN class="punctuation token">;</SPAN>
<SPAN class="property token">line-height</SPAN>
<SPAN class="punctuation token">:</SPAN> 1.25em

<SPAN class="punctuation token">;</SPAN>
<SPAN class="property token">margin-left</SPAN>
<SPAN class="punctuation token">:</SPAN> -5px

<SPAN class="punctuation token">;</SPAN>
<SPAN class="property token">margin-right</SPAN>
<SPAN class="punctuation token">:</SPAN> 20px

<SPAN class="punctuation token">;</SPAN>
<SPAN class="punctuation token">}</SPAN>
<SPAN class="line-numbers-rows"><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN></SPAN>

#HEADER is the id for the entire block element.

When customizing the CSS, we only need to add the rules that we want to override. So first, lets make the background red, since that our official organization color. Next, we want to change the height of our header to be 120px tall. Then, lets get rid of the drop shadow.

<SPAN class="selector token">#header</SPAN> <SPAN class="punctuation token">{</SPAN>
&nbsp; <SPAN class="property token">min-height</SPAN><SPAN class="punctuation token">:</SPAN> 120px <SPAN class="important token">!important</SPAN><SPAN class="punctuation token">;</SPAN>
&nbsp; <SPAN class="property token">background</SPAN><SPAN class="punctuation token">:</SPAN> #b41710<SPAN class="punctuation token">;</SPAN>
&nbsp; <SPAN class="property token">box-shadow</SPAN><SPAN class="punctuation token">:</SPAN> none<SPAN class="punctuation token">;</SPAN>
<SPAN class="punctuation token">}</SPAN>
<SPAN class="line-numbers-rows"><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN></SPAN>

Screen Shot 2015-03-19 at 9.54.10 PM.png

Next, let's adjust our .header-image to take advantage of the increased header height. To figure out the maximum height without having to adjust anything else, make the .header-image 20px less than your header height. In our example, that would be 100px.

<SPAN class="selector token">.header-image</SPAN> <SPAN class="punctuation token">{</SPAN>
&nbsp; <SPAN class="property token">height</SPAN><SPAN class="punctuation token">:</SPAN> 100px<SPAN class="punctuation token">;</SPAN>
<SPAN class="punctuation token">}</SPAN>
<SPAN class="line-numbers-rows"><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN></SPAN>

Screen Shot 2015-03-19 at 9.59.23 PM.png

Our site name needs a little work now, so we'll edit the classes for the .site-logo next. Our organizations official colors are red and yellow, so lets change the color to #ffed86. We'll also want to increase the font-size and adjust the line-height to keep it centered.

<SPAN class="selector token">.site-logo</SPAN> <SPAN class="punctuation token">{</SPAN>
&nbsp; <SPAN class="property token">color</SPAN><SPAN class="punctuation token">:</SPAN> #ffed86<SPAN class="punctuation token">;</SPAN>
&nbsp; <SPAN class="property token">font-size</SPAN><SPAN class="punctuation token">:</SPAN> 32px<SPAN class="punctuation token">;</SPAN>
&nbsp; <SPAN class="property token">line-height</SPAN><SPAN class="punctuation token">:</SPAN> 2.5em<SPAN class="punctuation token">;</SPAN>
<SPAN class="punctuation token">}</SPAN>
<SPAN class="line-numbers-rows"><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN></SPAN>

Screen Shot 2015-03-19 at 10.07.05 PM.png

That's starting to look better. However, when I roll over the site name, the color to indicate its link hover state is still dark gray. Instead, let's just make this a slightly darker shade of our bright yellow when we add the .site-logo:hover rules.

<SPAN class="selector token">.site-logo:hover</SPAN> <SPAN class="punctuation token">{</SPAN>
&nbsp;&nbsp;&nbsp; <SPAN class="property token">color</SPAN><SPAN class="punctuation token">:</SPAN> #d9c52e<SPAN class="punctuation token">;</SPAN>
<SPAN class="punctuation token">}</SPAN>
<SPAN class="line-numbers-rows"><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN></SPAN>

Screen Shot 2015-03-19 at 10.10.39 PM.png Last, if we want to get tricky and add a background image to the header, we can add just a couple rules to our #header css to pull in the image, center it and make it always scale with the width of the browser.

<SPAN class="selector token">#header</SPAN> <SPAN class="punctuation token">{</SPAN>
&nbsp; <SPAN class="property token">min-height</SPAN><SPAN class="punctuation token">:</SPAN> 120px <SPAN class="important token">!important</SPAN><SPAN class="punctuation token">;</SPAN>
&nbsp; <SPAN class="property token">background-image</SPAN><SPAN class="punctuation token">:</SPAN> <SPAN class="token function">url</SPAN><SPAN class="punctuation token">(</SPAN>
<SPAN class="property token">http</SPAN><SPAN class="punctuation token">:</SPAN>//vignette4.wikia.nocookie.net/en.futurama/images/3/32/New_New_York_Cityscape.jpg<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>

&nbsp; <SPAN class="property token">background-position</SPAN><SPAN class="punctuation token">:</SPAN> 50%<SPAN class="punctuation token">;</SPAN>
&nbsp; <SPAN class="property token">background-size</SPAN><SPAN class="punctuation token">:</SPAN> cover<SPAN class="punctuation token">;</SPAN>
&nbsp; <SPAN class="property token">box-shadow</SPAN><SPAN class="punctuation token">:</SPAN> none<SPAN class="punctuation token">;</SPAN>
<SPAN class="punctuation token">}</SPAN>
<SPAN class="line-numbers-rows"><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN></SPAN>

Screen Shot 2015-03-19 at 10.20.29 PM.png

Hope this helps! If you customize your site's header, add a screenshot below and show us how you did it!

Encuentra más publicaciones etiquetadas con

Comentarios

Anonymous User

The changes you make to the header will persist throughout the site. However, If you want to change the page background, there's another tip you need to do so: #ProTip: Changing the page background color on your Open Data site

GeorgeReece_Jr_

Thank you for this information. It will definitely come in handy when I set up an organizational site.

Reynaldde_Castro

How about the result page? I changed the css to hide the map and search sections. I would like to do the same thing with the result page.

JulieK

thanks Erich!

Anonymous User

Correct. When making changes in the Dev Tools, that how I just make sure the rule I'm changing is the right one. They are not saved.

You just need to add that class and the new rule to your Custom CSS inside the Admin Layout Editor.

(This doc will point out where to find the Custom CSS field if you haven't found where we hid it. #ProTip: Changing the page background color on your Open Data site )

JulieK

Thanks Erich

I was inspecting the element on the Design layout page but I understand that it should be done on the preview site. The edits made on the Dev Tools are not saved but just for viewing purposes right? How do I go about to save the changes ? I am missing something here:(

Anonymous User

In Chrome, right click on a part of the page and select Inspect Element form the menu that appears.

Screen Shot 2015-03-20 at 2.48.15 PM.png

The Developers Tools window should pop open and give you a view like this:

Screen Shot 2015-03-20 at 2.49.04 PM.png

(Safari looks very similar)

Screen Shot 2015-03-20 at 2.57.47 PM.png

Here, I've inspected the search field which is in #title-bar-region. In the right pane under the Styles tab you can see what rules are affecting the element, separated by the classes and rules. This is a great place to start tinkering as Dev Tools will let you make changes right in this interface and show you the results in real-time.

In this example, if you want the search field to be taller, you would add this to your custom css:

#title-bar-region #gsearch {

height: 80px;

}

If you click on the Computed tab, you can see the full list of every single CSS rule that is touching that element in some way or another.

JulieK

Hi ,

This would be a great start but how do I see inspect the generated CSS? I use the developer tools in chrome but the code looks different from your screen shot. How to go about this? Please help.

Únete a la Conversación

Los miembros registrados pueden publicar, seguir actualizaciones y más. ¿Nuevo aquí? Regístrate para una cuenta gratuita.

Enlaces Rápidos

Community Help
Find useful guides, FAQs, and documents to help you navigate and make the most of Esri Community.