Thank you, Bryan: Search and help links on every page via page include

[#1]

If you've visited one of the wiki spaces I manage, you've seen a search box and help links in the upper-right-hand corner of every page:

This feature was first implemented by my predecessor, Bryan, via a page include. I'm so glad he did, because it's heavily relied on by users to search only the current space. Over time, I've made some updates to it and now other space admins are adopting this handy page element. It doesn't require permissions beyond space admin (which is what I am).

Here is how it works: a page to hold the content, some CSS customization for positioning, and inclusion in the space's footer.

First, the content page, "NavLiveSearch," contains three main elements:

• an Adaptavist Div macro, id = NavLiveSearchWrapper, with a Livesearch macro inside, with a parameter to search only that specific space, and containing placeholder text to "Search only this wiki"
• another Div, id = searchall, which contains a tiny hint to "Search all Confluence spaces" with arrows that will point up to the header search box
• another Div, id = helplinks, which contains three hyperlinks.

The page also contains a CSS stylesheet which modifies the appearance and positioning of these elements on the page. It looks like this:

/* style for the Livesearch widget */ 
div.search-macro.search-macro-medium div.search-macro-query {width: 210px;}
/* style for IE */ 
div#NavLiveSearchWrapper {position: absolute; top: 3.5em; right: .5em; width: 20em;}
/* style for non-IE */ 
@media screen and (-webkit-min-device-pixel-ratio:0) { 
    div#NavLiveSearchWrapper {position: absolute; top: 3.5em; right: .5em; width: 20em;}}

/* style for the help links */ 
div.helplinks {width: 200px;}
/* style for IE */ 
div#helplinks {position: absolute; top: 7.25em; right: 2.8em; width: 20em;}
/* style for non-IE */ 
@media screen and (-webkit-min-device-pixel-ratio:0) { 
    div#helplinks {position: absolute; top: 7.25em; right: 2.8em; width: 20em; background-color: #ffffff; text-align: right;}}


/* style for the search all spaces text under header searchbar */ 
div.searchall {width: 200px;}
/* style for IE */ 
div#searchall {position: absolute; top: 0.0em; right: 15.0em; width: 20em;}
/* style for non-IE */ 
@media screen and (-webkit-min-device-pixel-ratio:0) { 
    div#searchall {position: absolute; top: 0.0em; right: 15.0em; width: 20em; text-align: right;}}
/* prevent page elements from overlapping the assistance panels */
h1#title-text {margin-right: 320px;}

(Note, this is mostly Bryan's CSS and I've just tinkered with it while I learn. If you have suggestions for more elegant styling I'm listening!)

Then, once the page was created, I previewed it to ensure the positioning of the elements was as expected and didn't overlap anything else on the page. In particular, I didn't want to interfere with the Edit, Save for later, Watching, Share and Tools icons. (I had to reposition the Livesearch wrapper a couple times as it overlapped the dot-dot-dot or Tools menu and the button couldn't be clicked.)

How it looks on the screen depends of course on the user's screen resolution or browser settings, so I built in a little margin of error.

Finally, the new page elements needed to be visible on every page in the space, even the ones created from a blank page template. I copied this wiki markup:

{include:NavLiveSearch V2}

and went to Space Tools > Look and Feel > Sidebar, header and footer and pasted it into the Footer field.

While I was on this screen, I added Livesearch to the sidebar as well.

{livesearch:additional=page excerpt|id=LiveSearch01|placeholder=Search only this wiki|spaceKey=MyWiki|size=small}

Once that was complete I spot-checked several pages in the wiki space and made a few adjustments to the CSS.

Some customizations and choices that I made:

• I updated the Lifesearch macro parameters to include more types of items in search
• The URLs for Feedback and Access start an email to me, and Help points to a self-help page
• One wiki space also has a link for Search tips which goes to a page about search
• Some wiki spaces also have an "Expand/Collapse All" link (Javascript) to expand all Expand macros on the page at once (content hidden inside the Expand macro is a pet peeve of one of my best contributors.)
• I added the "Search all Confluence spaces" text to reduce user confusion about searching all spaces when they wanted to search only the current one. (I'm looking for the specific instructions to add helper text "Search all spaces" to the header search box, so if you know how to do that, please send!)

In a previous version of the page include, Bryan added widgets or links for favorites, help, glossary and a couple other things. He later removed them, but it illustrates how versatile this technique can be.

Our users gravitate to this search box all the time and they appreciate its accessibility and how it limits the scope of their search. I'm glad to learn from Bryan's example and will continue to tweak it to suit our users' needs. Thanks Bryan!