KB User's Guide - SitePref Tab - Customizing Your Site's Look and Feel

KB Site Components

Key elements of a KB Site are identified in the screen shot below. Most can be customized as needed.

Content Modules

There are three Content Modules that come ready for use (e.g. "delivered"):

1. News and Announcements - Displays news content.
2. Top Documents of the Week - Displays documents that have been most recently viewed.
3. Most Recently Updated Docs - Displays documents most recently edited and set to the status of Active.

The image below shows the three delivered Content Modules and their subsequent fields in the KB Admin Tools.  Content Modules display document and news item links on the Live site(s). The Limit field has a dropdown menu which allows you to display a list of 5 items and 50 items.

 

Below are the descriptions to the Content Module Attributes:

• Module name field - Create a name for this field. Please know this name will appear on the live site(s).  This field is required.
• Internal checkbox - Check to make the Content Module available on the Internal Live site.
• External checkbox- Check to make the Content Module available on the External Live site.
• FullView checkbox- Checkto make the Content Module to appear when viewing on a full desktop/ laptop screen view.
• MobileView checkbox - Check to make the Content Module to appear when viewing on mobile devices.
• Order field- Select what order this Content Modules will appear on your site. Please remember we start with 0, 1, 2.
• Limit of number of items to display - The dropdown list appears in the delivered Content Modules only and defaults to 20 items.
• DocID(s) /URL - (This field appears after a Custom Content Module is created).
  
  - Enter one document ID and display everything in the Body field of that document
  - Enter a comma delimited string of document IDs to display a list of documents you own in the sequence of your choosing.
  - Enter a URL to display
  
  
• Add button - Please be sure to click this button to add the your Custom Content Module to the delivered Content Modules. If you only click on the Update button on the bottom of the screen, your new Content Module will not be added.

The image below shows two Content Modules, a custom content module, "Welcome", and a delivered content module, "News and Announcements".

 

Edit an Existing Content Module

Update the name of a delivered Content Module by:

navigating to the SitePref tab > Content Modules link > Content Modules screen.

Put your cursor in the Module name field and update it to something more relevant to your users. In the image below, a red arrow is pointing to the editable Module name field. Enter text that is more specific to your purposes, for example: "Atmospheric and Oceanic Sciences News", or, "2022 Conference Updates".

The image below shows the delivered News and Announcements content module with a red arrow pointing to the Editable Module name field.

Be sure to click on the Update button on the bottom of the screen to save your work.

 

Create a Custom Content Module

You may create your own Custom Content Module.

Use Cases:

• Welcome users to your new KB space: include introductory text and resource links
• Notify users of amended Holiday hours
• Announce updates to service, maintenance times, expected outages
• List upcoming conference details, display a small table, add images
• Display a Google calendar of regular meetings

Prepare the Content

1. Create a document that has all the information you would like to display in the Custom Content Module. This document can have styled text, images, resource links, tables, collapsing and expanding panels, Google Calendars..anything you can see on any other KB document. While a document has four required fields, only the Body field of this document will display in the Custom Content Module.
2. Set the Priority field of this document to Exclude from search. This will prevent users on the Live site from accidentally "discovering it" (via search keyword search) among your documents / prevent potential confusion.
3. The SiteAccess document setting must be set to the appropriate KB Site, Internal and/ or External. If you set the document to only the Internal site, the Custom Content Module will not display at all on your External Live site, even if you click on the External check box Custom Content Module attribute.
4. Set the document status to Active and write down the document ID number for future reference.

Create the Module

1. Navigate to SitePref > Content Modules.
   
   The image below shoes the Content Modules screen. The Add a custom content module option appears at the top of the screen.
   
   
   
   
2. Enter a Module name, determine which live site to display your Custom Content Module and the order it will appear among your other content modules. Enter the document ID referenced above in the previous section in the DocID(s)/ URL field.
3. Click on the Add button on the far right of the Add a custom content module section.

Custom Modules on the Live Site

Example: The image below, shows a Custom Content Module and a default Content Module:

• The Move to Production and Meetings custom content module displays the content of a single KB document, which contains an embedded Google Calendar.
• The News and Announcements content module is a default content module that displays any active News items.

Display Custom List of Documents

You may display a specific list of documents in the order of your choosing. In the Doc ID(s)/URL field, place a comma delimited list of the documents your would like displayed. In the image below, you will see three comma delimited document IDs for the Custom Module called, "Meteor Data".

• The documents listed must be in the Status of Active.
• The document Site Access of each document must  be set the appropriate KB Site. (In the example above, the "Meteor Data" can be displayed internally, and externally. Therefore, the Site Access of these KB documents should be set to Internal and External).
• Finally, click on the Update button at the bottom of the screen to save your changes.

Content Modules: Expand and/or Collapse 

After creating Content Modules that best suit your KB site, you will see a upward pointing arrow/ chevron in the right corner. This arrow indicates that the Content Module is collapsible and then expandable. The KB will remember what you choose to collapse/expand and remember the next time you visit your Live site.

• Note: The upward pointing arrows/ chevrons are readable by those accessing the KB via a screen reader (by means of the keyboard, specifically the space bar.)
  
  

 The image below shows the arrow/ chevron circled in red.

 

 

A Quick Analogy about Side Modules and their Side Module links

For you visual thinkers, imagine when you create a Side Module, that you are creating a "container" in which you will place Side Module Link(s).

Example: you may create a "container" named "Tech Media" as a Custom Left Side Module.

...inside this "container", you will have Side Module Links of  CNN, Wired, NPR and BBC Mundo.

This is what this Left Side Module would look like on the Live Site.

Side Modules: A Description

There are seven options for Admins to apply "Side Modules".

Navigation: SitePref tab > Side Modules > Side Modules screen.

The image below shows a blank Side Module waiting to be customized. Note the positional options in the aptly named Position field dropdown menu. The image below shows a blank Module field circled in red and also shows all the options available. These options will be further illustrated below.

Positional Options Attributes

You may define as many Side Modules as you would like. After you enable the specifics of your Custom Side Module, click the Add button. Should you only click the Update button at the bottom of the screen, your custom Side Module will not be saved. *The Update button saves edits to existing Side Modules*.

Module name - The name of your Side Module. The name you enter here will be displayed to users if the module position is Menu Bar Dropdown - Under Search, Side Left or Side Right. For the other positions, the module name will only be referenced by admins working on this page in the KB Admin Tools. 

If you are choosing one of the other module positions, such as Link Bar - Between Logo and Search, it is recommended you set the name to something simply like "Link Bar" for easy reference.

Position- The position you choose has a significant impact on the layout of your KB site. Below are descriptions of each position option. 

• Top Left

• Top Right

  Top Left and Top Right Links appear in a bar at the very top of the page in their respective corners. When multiple links are added to a Top Left or Top Right module, they will be displayed horizontally, with the first link appearing the further left and progressing to the right.

  The image below has Top Left and Top Right Links pointed to by blue arrows. 

• Link Bar - Between Logo and Search

  When this position is selected, the search bar will be moved out from alongside the site logo and will instead display in a separate section below, with the Link Bar appearing between the logo and new search areas. When multiple links are added to a Link Bar, they will be displayed horizontally, with the first link appearing the further left and progressing to the right.

  The image below shows a Link Bar between the logo and the search bar.

• Link Bar - Under Logo and Search

  When this position is selected, the Link Bar will appear below the combined logo and search area. When multiple links are added to a Link Bar, they will be displayed horizontally, with the first link appearing the further left and progressing to the right.

  The image below shows a link bar under the logo and search field.

• Menu Bar Dropdown - Under Search

  When this position is selected, the Menu Bar will appear below the combined logo and search area. Each module added with this position represents its own dropdown menu in the menu bar area, ordered left to right, with the name of each module displaying in the menu bar. When a user hovers over the dropdown name in the menu bar, the links will be displayed in a vertical list.

  The image below shows the Menu Bar. Under the "Learn More" menu item, you will see three links to choose from in the dropdown menu.

• Side Left

• Side Right

  When one of these positions is selected, a column will be created to the right and/or left the main content area. Each module added with this position will be a separate grouping of links in the column, ordered top to bottom. The module name will be displayed at the top of the link grouping, and an expand/collapse arrow will appear next to the module name.

  If a user collapses a side module, their selection will be stored in a browser cookie, and this will be retained if the user goes back to your site in the same browser session. Additionally, UW-Madison sites configured with the new UW Theme layout will have side modules auto-collapse at smaller screen widths.

  These downward pointing arrows/ chevrons are accessible to those accessing the KB via a screen reader by means of the keyboard, specifically the space bar.

  • Note: For information about adjusting your Side Module width, please see [Link for document 30020. is unavailable at this time.]

Visibility Settings

• Internal - Check/enable for Side Module availability on the Internal Live site.

• External - Check/enable for Side Module availability on the External Live site.

• FullView -Check/enable for the Side Module to appear when viewing on a full desktop/ laptop screen view.

• MobileView - Check/enable for the Side Module to appear when viewing on mobile devices.

• LandingPage - Check/enable for the Side Module to appear on the homepage. (recommended)

• DocPage -Check/enable so the Side Module will appear on all other pages within your KB.

  In the image below, you see that the Side Modules appear whenever you pull up a document. If your content is better presented using the full screen, then do not check DocPage.

• Order - Select what order the Side Modules will appear on your site.

• *Add button - Please be sure to click this button to add the your Custom Side Module. If you only click on the Update button on the bottom of the screen, your new Custom Side Module  will not be added. The Update button only updates existing content.

How to Create a Side Module

1. Navigation: SitePref tab > Side Modules > Side Modules screen.
2. Put your cursor in the Module name field and enter a name for your Side Module.
3. Choose a position in the Position drop down menu where you want this side module to appear.
4. Determine whether you want this Side Module to appear on the Internal/ or External site by checking the appropriate boxes.
5. Click on Fullview, Mobileview, LandingPage and/ or DocPage check boxes as you see fit.
6. In the Order field, enter a number. This field determines where this Side Module will appear in the sequence of current Side Modules.
7. Click the Add button to save this Side Module that you just created.

     Note: Scrolling to the bottom and clicking Update does not save your Side Module.

 

Side Module Links: A Description

Navigation: SitePref tab > Side Module Links link > Side Module Links screen.

The image below shows a blank Side Module Link waiting to be customized. Note the red circled arrow leads to a dropdown menu of the names of already existing Side Modules. This image shows "References" as the Side Module name.

• Module name - which specifies the Side Module in which you'd like the link to appear
• Link name - Name you would to appear when (required field)
• Link URL - Enter link url here (required field). If linking to a KB document, you need only enter the document ID number
• Internal - Check for the Side Module Link to be available on the Internal Live site.
• External - Check for the Side Module Link to be available on the External Live site.
• Popup - which specifies if you'd like the link to open in a new window/ tab in your browser.
• Order - sequence in which the links are to be displayed within the Side module
• *Add button - Please be sure to click this button to Add the your Custom Side Module Link. If you only click on the Update button on the bottom of the screen, your new Custom Side Module Link will not be added. The Update button only updates existing content.

 

See Also:

• KB User's Guide - Advanced HTML - Adding a Twitter Timeline to your Homepage (Classic Editor - Right Side Module)
• KB User's Guide - SitePref Tab- Quick Search Options and Side Modules
• KB User's Guide - SitePref Tab - Displaying KB Pre-defined Features via Side Module Links
• KB User's Guide - General Info - Embed a Google Calendar into a Document
• KB User's Guide - General Info - Embed an Office 365 Calendar in a Document
• KB User's Guide - SitePref Tab - Uploading a New Site Logo
• KB User's Guide - SitePref Tab - Site Header and Site Footer