Kdybych nebyl GIS profesionálem, vždy jsem si myslel, že skvělou záložní pracovní možností by bylo pojmenovávat barvy laků.<\/A> Samozřejmě jako GIS profesionál si tu a tam hraji s barvami - stylování mapy, navrhování webové aplikace atd. Takže jsem věděl, že to bude zábavný úkol, když mi dříve toto léto GIS tým města Bostonu<\/A> dovolil spolu s LDafner-esristaff<\/A> pomoci s redesignem jejich ArcGIS Online<\/A> stránky, kterou nazývají BostonMaps. A ještě lépe - redesign zahrnoval práci s novým webovým barevným stylem města, který obsahoval nádherně pojmenované odstíny jako Charles Blue<\/STRONG><\/SPAN> a Freedom Trail Red.<\/STRONG><\/SPAN><\/P><\/P>Nějaké pozadí - před několika lety jsme spolupracovali s městem na jejich prvním vydání ArcGIS Online. Chtěli udělat velký dojem a byli velmi pečliví při navrhování své přítomnosti na ArcGIS Online - vytvoření bannerové grafiky, přizpůsobení domovské stránky, vytvoření nových ikon atd. Výsledek byl několik let hojně využíván - ale bylo čas na aktualizaci. Jednou z věcí, která aktualizaci podnítila, bylo to, že město vyvíjelo redesignovanou webovou stránku - pilot.boston.gov<\/A> (nyní vydanou). Byl to zcela odlišný vzhled a pocit - město vyvinulo nové pokyny pro značku<\/A>, včetně nových typografií, log (a samozřejmě barev).<\/P><\/P>Design a branding (zejména v digitálních médiích) se stávají pro místní samosprávy stále důležitějšími a čím dál častěji slyším GIS profesionály zmiňovat, že chtějí vytvářet mapy a aplikace, jejichž design je harmonický se standardy brandingu. Takže jsme dostali naše pokyny - udělat nový design BostonMaps harmonický s webem pilot.boston.gov. Chtěl jsem sdílet podrobnosti o práci, kterou jsme provedli, v naději, že to může být užitečné pro ostatní procházející podobným procesem. Zde je přístup, který jsme zvolili ve třech jednoduchých krocích:<\/P><\/P>1. Bannerová grafika:<\/STRONG> Toto je upoutávač pozornosti domovské stránky ArcGIS Online! Viděl jsem mnoho skvělých příkladů zákazníků, kteří si vytvářejí vlastní obrázky podle těchto pokynů<\/A>. Pro BostonMaps jsme začlenili snímek mapy a přidali vrstvu Optimistic Blue<\/STRONG><\/SPAN> nahoře. Použití značky/logo B<\/STRONG><\/SPAN> (které jsme také opakovali v miniaturách) a označení jako oficiální web města dokončuje vzhled:<\/P><\/P>2. Flat Design:<\/STRONG> Možná jste si všimli, že bannerová grafika a miniatury vypadají jemně odlišně než obvykle - webový tým města požádal, abychom použili flat design a odstranili zaoblené rohy a stíny, aby se odstranily efekty dávající stránce rozměr ve prospěch minimalističtějšího vzhledu (to je již nějakou dobu populární trend webdesignu<\/A>): K tomu jsme šli do nastavení domovské stránky<\/A> a přistoupili k zobrazení zdrojového kódu HTML<\/A>. Věděli jste, že můžete provádět různé úpravy stylů domovské stránky ArcGIS Online vložením HTML/CSS kódu do této sekce? Například tento CSS úryvek odstraňuje zaoblené rohy a stíny z různých prvků domovské stránky:<\/P><\/P><style><\/><\/><\/><\/><\/><\/><\/><\/><\/><\/><\/><\/><\/><\/><\/><\/><\/><\/><\/><\/><\/><\/><\/><\/><\/><\/> <... text truncated for brevity ...> náš oblíbený odstín červené. Výsledek:<\/P><\/P><\/P>Společně měly tyto tři techniky skutečně transformační efekt na domovskou stránku ArcGIS Online města - nyní se poměrně bezproblémově prolíná s ostatními webovými vlastnostmi města a má svěží, moderní vzhled, na který je GIS tým hrdý.<\/P><\/P>Podívejte se sami - můžete navštívit stránku zde: http:\/\/boston.maps.arcgis.com<\/A><\/STRONG><\/P><\/BODY><\/HTML>
<\/P>
Design a branding (zejména v digitálních médiích) se stávají pro místní samosprávy stále důležitějšími a čím dál častěji slyším GIS profesionály zmiňovat, že chtějí vytvářet mapy a aplikace, jejichž design je harmonický se standardy brandingu. Takže jsme dostali naše pokyny - udělat nový design BostonMaps harmonický s webem pilot.boston.gov. Chtěl jsem sdílet podrobnosti o práci, kterou jsme provedli, v naději, že to může být užitečné pro ostatní procházející podobným procesem. Zde je přístup, který jsme zvolili ve třech jednoduchých krocích:<\/P>
1. Bannerová grafika:<\/STRONG> Toto je upoutávač pozornosti domovské stránky ArcGIS Online! Viděl jsem mnoho skvělých příkladů zákazníků, kteří si vytvářejí vlastní obrázky podle
<style><\/><\/><\/><\/><\/><\/><\/><\/><\/><\/><\/><\/><\/><\/><\/><\/><\/><\/><\/><\/><\/><\/><\/><\/><\/><\/> <... text truncated for brevity ...> náš oblíbený odstín červené. Výsledek:<\/P><\/P><\/P>Společně měly tyto tři techniky skutečně transformační efekt na domovskou stránku ArcGIS Online města - nyní se poměrně bezproblémově prolíná s ostatními webovými vlastnostmi města a má svěží, moderní vzhled, na který je GIS tým hrdý.<\/P><\/P>Podívejte se sami - můžete navštívit stránku zde:
Nice example and handy tips, thanks for sharing.
Good One!
Great example!!!
Very nice, great job!
Do you know if there is a way to keep the navigation style (Home, Gallery, Map etc.) also in the respective pages? E.g. when you click on gallery, the style is again default AGOL without your "favorite shade of red" underline.
Hi Annina, thanks for your question. Currently, I believe it is only possible to customize the home page in the manner described in this blog. I expect that we will continue to see more enhancements in future ArcGIS Online releases that allow for further configuring and styling options, however.
Great article! I love the use of the three icons as containers for Applications, Open Data, and Story Maps. I'm curious though, are these just images used as hyperlinks to take the user to the map and app gallery supplied with the local government model? If so, that is a really clever way of making the Homepage streamlined and simple. How were you able to use images as hyperlinks? Is that a common functionality, or did it take some HTML, CSS, and Javascript work in the text box to make it all function?
Great read!
I'm not sure if this is exactly what you are needing, however, another way to provide some added customization to a front facing AGO page is possible using the Mapfolio app from the marketplace. You can highlight items based on tags or "faves" etc.. and present them on a custom page (your logo even custom CSS). This might be another option to consider
Thanks, Nick! Yes, the images are just used as hyperlinks to point to gallery pages. I think this is a really useful way to consolidate content. The way that this is accomplished is by editing the Home Page description with HTML. This blog post by Bernie Szukalski gives a good overview (and actually uses an older version of BostonMaps as an illustration!). I hope this helps!
This helped a lot, thanks again
I know this is kind of an old thread, but I'm currently redesigning our companies Portal. I almost have it all done, but how did you change the color from the blue to red underline on the navigation bar? Would love to make this a green color for company colors.
Best,
Ryan
Hi Ryan!
Here are a few steps to changing the header underline color...
- Download the header underline graphic here (it is a very small red icon) - ldafner.github.io/header_underline.png
- Use a program like Adobe Photoshop or a free site like Pixlr to recolor the icon
- upload/host the icon to get a URL (you can upload it to ArcGIS Online and share it publicly to get the URL)
- In the code below replace the red text with the new URL
- Then add that code to your org!
When I click on this your github link, I get an error.
Thanks,
Ryan!
For some reason GeoNet doesn't like that URL. If you copy the url and paste it in another window you'll be able to access the icon.
Lauri
Thank you very much! I just did that, and now i have it to work! It took a little bit to try and implement this in my other code. You also wouldn't happen to know how to change the text color would you? Maybe change the text to something like white (because I have a black nav bar) and then when hovered the text will change a different color?
Thank you so much!
FYI,
Please take a look at this Esri UK sample called Customiser,
Introducing Customiser — CommunityHub
Hope this helps,
I can't seem to make this work for ArcGIS Online - is it for Portal only?
Hi Danny,
Yes, the sample is for ArcGIS Online. Please see the response on your similar comment on the blog post,
> "... This version is just for ArcGIS Online. Where it says 'upload to portal' it will upload to the portal you logged into - which for now will always be an ArcGIS Online portal."
Hi Derek, in which case it is as i thought. It does not work for me on either Portal (ArcGIS Online or Portal for ArcGIS). A shame as it look very useful.
Přihlášení členové mohou přispívat, sledovat aktualizace a další. Nový zde? Zaregistrujte si bezplatný účet.
Find useful guides, FAQs, and documents to help you navigate and make the most of Esri Community.
