A sitemap is a useful addition to your website's navigation, providing a clear, clean diagram of the site structure. This can be especially helpful if the side and/or top navigation is contextual, and does not show the full site.
Sitemap is a page control which can be dragged and dropped onto any page from the Search and Navigation tab. There are a number of configuration options, but the result is essentially always the same: a hierarchical list of links showing the site structure.
There are two rendering options for the sitemap: plain HTML or enhanced with Javascript. The plain HTML version outputs as nested lists. The Javascript version outputs as a series of tables. Although the Javascript version has the handy functionality of allowing you to expand or close nodes, it is more difficult to apply custom styling.
However, it is unlikely you will need to do any particularly custom styling of the sitemap. Its strength is its simplicity. For the most part all you will want to do is change link colours and perhaps adjust padding.
Another config option allows you to choose the entry point where the site map begins - so you could create a map of just one section of the site.
HTML Renderer
Below is a live example for this site using the HTML rendering option. It is set to begin at http://resources.easysitecms.net/knowledge-base/design/how-to-style-easysite-page-elements/style-elements/ so shows only that page and its children.
The output HTML looks something like the example given below.
NOTE: Although the wrapper class 'oModuleElementOuter' sounds like a generic, re-usable class, it is in fact only used for the sitemap element. So it can be used with confidence to target this, and nothing else.
As with many Easysite page elements, the Greek alphabet is used incrementally to provide unique names for each level of nested list - in case there is a need to treat top level links differently to some deeper nested level.
So the first UL has the class .site-map-list-alpha. Its child pages are in a nested UL with the class .site-map-list-beta, and so on.
Regardless of its level, each link has the class .oSiteMapLink.
So if you wanted to alter the link properties thoughout the sitemap, you might say:
/* Make links grey */
.oModuleElementOuter a.oSiteMapLink:link, .oModuleElementOuter a.oSiteMapLink:visited { color: #888; }
But if you then want to change just one level of links, you could overwrite the first rule with a more targeted one:
/* Make just second level links darker grey */
.oModuleElementOuter .site-map-list-beta a.oSiteMapLink:link, .oModuleElementOuter .site-map-list-beta a.oSiteMapLink:visited { color: #333; }
Javascript Enhanced Renderer
The Javascript version of the sitemap is an entirely different piece of HTML, sharing only the two top level wrapper classes: .oModuleElementOuter and .oModuleElementInner.
It is rendered in a series of tables, with the indent on the left hand side being one cell, the plus/minus symbol sitting in another cell, and the text in the next. As further levels of the site are shown, more cells are added to the left hand side of the table. As you can probably imagine, this makes it difficult to alter what you might have imagined is simply padding!
Below is an example of a Javascript sitemap, capable of showing the entire site as nodes are expanded:
There is some inline styling of the tables and links, but few class names.
If you wanted to change the link properties you could target them via the top-level wrappers:
/* make links dark grey */
.oModuleElementOuter a:link, .oModuleElementOuter a:visited { color: #333; }
/* red on hover */
.oModuleElementOuter a:hover, .oModuleElementOuter a:active { color: #cc0000; }
Given the limiting nature of this HTML, it isn't practical to adjust much more than that.
