Guide to Confluence and Scroll Viewport

Owned by Craig Melcher (Deactivated)
Last updated: Feb 06, 2022
6 min read

Workflow

To create a page

  1. Create and build the page in staging. Use the + symbol in the lefthand nav, either at the top Pages level or under an existing page

  2. Use comments for page reviews

  3. When it’s approved, use Move (the 3 dots upper right next to Share) to move the page to live.

    1. In the pop-up window, select Shelter’s Digital Framework for space, then toggle the page to the IA location you want. If you can’t get it exactly right, you can also move it once it’s in the live space.

    2. Click Move

  4. Once you’ve reviewed the page in the live space, you can update Scroll Viewport to make it live

NOTE: When you move a parent page, it will also move its children. If you don’t want to move the children, you’ll need to first move them in the Staging IA.

To edit a page

Because any page ‘publishing’ you do in Confluence won’t be reflected on the live site until you update it in Scroll Viewport, it’s fine to make edits and leave comments in a live Confluence page. Any comments unresolved won’t appear in Scroll Viewport.

Top tip: If you’re not sure which macro to use for something, find a page that already uses it (for example, for displaying videos) and open it for editing, to deconstruct how it works.

Updating the live site

  1. In Confluence, from any published or closed page, use the top toolbar to select Scroll Viewport from the Apps dropdown

     

  2. In SV, click Update site upper right. It generally takes around 5 minutes to update.

  3. Once it’s finished, click Go live and then View site

 

Editing the Scroll Viewport theme

  1. In the SV app, click Edit theme upper right

  2. In the theme editor lefthand column, click Templates

  3. In the editor, you can edit the header, footer, or page templates for the home page ('Content Source'), article pages or the search results page.
    NOTE: When you edit a page template, your changes will be reflected in the main part of the editor

  4. Our homepage uses the Content Source template with layout type set to Hero layout. This shows the hero image containing the page title, intro text and search bar.


    The Detail layout displays the hero image at reduced depth with only the search bar, and page title/intro text below it.

     

  5. We’re leaving the tick boxes for News section and Pinned pages section blank as we’re managing blogs differently. See below.

  6. Colour settings are straightforward, and use the brand colours.

  7. UX team asked us to leave the Topics icon name field blank, so no icon displays.

  8. For anything you edit, there’s the option for adding custom CSS to alter the default display. For example, we’ve added custom CSS for the table of contents display, so it only shows H2s on a page. If you need help with what the code should be, you can either ask the k15t support site, or ask the dev team.

Turning the cookies banner on or off

NOTE: This option no longer applies since the CivicUK banner has been added to the framework.

In the Templates lefthand column, scroll down to Cookies notice and click to expand it. Tick or untick the Display box.

Managing the homepage tiles

  • The tiles display the top-level page titles and the excerpt (meta-description) of those pages. If they don’t have an excerpt, the tile displays the first 25 words (or so) of body copy on the page.

  • Tiles display in their order in the top level. If you want to change their order, move their pages within the IA. Just be aware, this will be reflected in the lefthand nav on all live pages.

  • You can hide a page from being displayed as a tile by adding the label scroll-help-center-exclude-page to the page. (Labels don’t take affect until you update the live site).

Building pages

NOTE: Scroll Viewport does not support the layouts option in Confluence. So you can’t display text next to images. You can

  1. Create a new page. Use the + symbol in the lefthand nav, either at the top Pages level or under an existing page

  2. Enter page title

  3. Enter and format your text, including any text links

  4. Add any macros you need, one of 2 ways:

    1. Type a forward-slash and the menu of macros will appear. Type the first few letters of its name to filter the menu

    2. Use the dropdown in right side of the top toolbar. You can filter it using the search

  5. Add any images using the toolbar option. Once you’ve inserted it, you can size the image to fit the full column width or even wider.

  6. Click an image to:

    1. display the Alt text editor and add some alt text

    2. position it to the left, centre or right

    3. link it to a page or external URL

    4. delete it

    5. NOTE: Scroll Viewport does not support image captions in Confluence. If you want to use captions, add them below or above the image.

  7. Add SEO using the Excerpt macro:

    1. Add it at the top of your page

    2. Enter the text that will be your meta-description

    3. Be sure to tick Hide Excerpted Content to the right

    4. NOTE: If the page is at the IA’s top level, your except text will also be displayed in the homepage tile

  8. When your draft page is built, Publish it

Publishing blogs

Because of a product bug in how Scroll Viewport displays listing of the Confluence blog template on the homepage, Dixie has built a workaround:

  1. All blogs have a single parent page.

  2. When you create a new blog page, use the standard article page template (the default) and not the Blog post template:

  3. Create it as a child of the parent.

  4. On the parent page:

    1. Edit the excerpt macro, replacing the previous text with the date and title of the newest blog

    2. Add the new date and title to the body text, above the previous blog post

Moving or copying pages

Use cases:

  • When a page in staging is ready to go live

  • If a page in the live space needs to be removed but you want to keep a copy of it

  1. On the Confluence page, click the 3 dots upper right and select Move or Copy. (Ideally, a page shouldn’t sit in two spaces at once. So the preferred option is to use Move. But there may be times when you need to keep a copy in Staging as a back-up.)

  2. In the new window, use the dropdown to select the space you’re moving/copying to.

  3. Toggle-drag the page to its new location in the IA. If you drag it directly underneath and touching an existing page, that page will become the parent of the new page. (This is a bit fiddly but you’ll get the hang of it.)

  4. Click Save.

Hiding a page from the lefthand navigation

You can keep any page hidden from the nav (like our golden thread long-description page) by:

  1. Go to Space settings in your Confluence space

  2. Under Manage pages click Reorder

  3. Drag and drop the page you want to hide to the top level, eg under the space name ('Shelter’s digital framework')

Overview of the Scroll Viewport help center theme

The Confluence macros and features supported by Scroll Viewport

How to exclude pages from navigation and search

A list of the Confluence macros