Human Readable Sitemap

When web designers talk about sitemaps they often mean XML sitemaps for search engines and PanPage can create those too (look here), but this sitemap is human readable and shows, graphically, the structure of your website, with a link to every page, every page except fixed excluded pages that is.

Create the Sitemap Page

The sitemap usually goes into a page of its own so create a new page - this can be content managed or fixed, it doesn't really matter - we'll assume a regular managed page here.

Create a column on the page. Since the sitemap usually sits alone on the page you can use a colFullWidth column - PanPages themes do just that.

Create a Raw/HTML Item and copy & paste the following code into it...

[ select all ]

Styling the Sitemap

The PanPage RenderSiteMap function creates a table containing links to every page in the site and the following CSS rules make it look convincing. Copy and paste these into your site's style sheet...

/* sitemap... */
table.pp_sitemap    {margin:0; padding:0; border-collapse:collapse;}
table.pp_sitemap td {vertical-align:top; text-align:left; padding:0; margin:0;}
/* colour to suit your site... */
table.pp_sitemap a  {padding:0 1px; color:#000; background-color:#fff; text-decoration:none;}
table.pp_sitemap a:hover {color:#0099cc;}
table.pp_sitemap td.top    {padding:0.1em 5px 0.5em 15px; background:url(sitemap_top.gif) left top no-repeat;}
table.pp_sitemap td.topend {padding:0.1em 5px 0.5em 15px; background:url(sitemap_topend.gif) left top no-repeat;}
table.pp_sitemap td.mid    {padding:0.1em 5px 0.5em 15px; background:url(sitemap_mid.gif) left top no-repeat;}
table.pp_sitemap td.midend {padding:0.1em 5px 0.5em 15px; background:url(sitemap_midend.gif) left top no-repeat;}
table.pp_sitemap td.onl    {padding:0.1em 5px 0.5em 15px; background:url(sitemap_onl.gif) left top no-repeat;}
table.pp_sitemap td.onlend {padding:0.1em 5px 0.5em 15px; background:url(sitemap_onlend.gif) left top no-repeat;}
table.pp_sitemap td.btm    {padding:0.1em 5px 0.5em 15px; background:url(sitemap_btm.gif) left top no-repeat;}
table.pp_sitemap td.btmend {padding:0.1em 5px 0.5em 15px; background:url(sitemap_btmend.gif) left top no-repeat;}

[ select all ]

Download the Tree Graphics

Unzip and copy these graphic files into your theme folder (or edit the CSS rules above and download them where ever you like). They show the tree outline in dark grey - edit them if you need a different colour.

Here's what it looks like...

Human readable sitemap

The perfect alignment comes from using tables (yes they do still have a place in web design) and the tree graphics are used as background images for flexibility. The tree can expand as new pages are added tho the tree images are finite and you might have to extend them if your tree grows too too big!

sitemap • terms & conditions