AnsweredAssumed Answered

2.0 - Custom Header Question

Question asked by sjacksonesriaustralia-com-au-esridist Employee on Feb 17, 2017
Latest reply on Apr 15, 2019 by BRollison-esristaff

Just brushing up on how the newer v2.0 templates can be customised.  Forgive me for the noob CSS/HTML "skills".

 

If I create a new OD site, and enter the style editor and add a logo and tweak some colors I can achieve this:

 

 

I know that I am going to want some greater control over other elements in the page, so I enable 'Use custom HTML/CSS' in the Header.

 

This then gives me, by default, two new DIVs - navbar-header and navbar-brand along with the original header (minus my logo, but there is now a placeholder for this on the navbar).

 

 

I essentially want to retain the look of the first screenshot and want some guidance on the most elegant way to do this.

 

  • I assume you cannot remove the bar with My Data on (possibly with CSS, but user needs to see My Data)?

 

  • I could easily just remove the populated HTML from the new row it creates, and strip out the populated CSS.

But then I don't think I can edit the HTML of the row that has My Data on it, and therefore cant easily place a logo div onto it?

 

So how would you go about enabling custom CSS (for doing stuff with other elements on the page) but keeping the look and feel of the first screenshot?

 

Very easy to replicate, but if it helps, this is the sandbox site I am playing with.

Outcomes