KB User's Guide - UW Theme for KB: Features

This document will review the features and improvements in the new look and feel for KB Live Sites.

When the KB made its debut in the year 2000, it started with what is now known as the Classic Theme.

ClassicKBLayout.png

UW Theme for KB: Adherence to Accessibility Recommendations

In 2018, the UW WiscWeb Team, launched its UW Theme for all UW Departmental WordPress Sites. The KB Team soon updated its look and feel to follow suit.

DemoofUWThemeforKBapplied.png

New Font and Improved Headers Easier to Parse

  1. Verlag font for text-based logo (only image required is UW Crest)
  2. Modern UW color scheme
  3. KB Site Name can have upper lower case letters and extended to 80 characters
  4. Improved code class styling (<code></code>)

    headingtagsh1throughh6.png

  5.  KB document site title and document title now display in Header 1 
  6.  Side module headings and links appear in H3


Site Elements to Display as Uppercase

  1. Top right links and Top left links
  2. "XML   JSON   OL" buttons that display in the three default content modules.

uppercaseletters.png

An Improved Responsive Design

  1. Images and tables now adjust visually from desktop to tablet and mobile widths
  2. Default styling for all tables including those appearing in that topic description area and cascading tiles
  3. Improved functionality from keyboard for those using Assistive Technologies



Test KB Doc for Mobile friendliness

Enter a kb doc url in this mobile-friendly test 

Concerns about White Space in the UW Theme

More white space was added to the UW Theme for KB to create a more elegant and clear presentation of content while improving user experience.

Article displays without Left side Modules
Navigation: Site Pref > Side Module link > de-select Side Left/ Fullview checkbox

withoutleftsidemodules.png

Article displays left side modules
Navigation: Site Pref > Side Module link > select Side Left/ Fullview checkbox

displaywithleftsidemodule.png

Network Services KB

Current State (Classic Layout) : https://kb.wisc.edu/ns/internal/5335

Identify their exact concerns about current state white space (do they really like the Classic Layout article presentation and are afraid they will lose it, or...?)

If the concern is the left and right white margins are too wide - say that you will check with Leah if a customization can be applied, just for their KB Space.

The image below shows an inspect element of "middle-sect". The default max-width is 75, the image below shows the max-width increased to 90.
End result: more narrow right and left white space margins.

adjustmiddle-sect1.png


CSS:

#middle-sect1, #middle-sect2, #middle-sect22, #middle-sect3 {
    margin: auto;
    max-width: 90rem;
    padding:1rem 0;
}

    

Notes from the UW Theme CSS file

CSS file: https://kb.wisc.edu/images/group251/shared/css/uw-theme-kb-v4.css

Aug 2019 - New heading sizes & normal case headings, including h1 doc title

Mar 2019 - Contrast and styling improvements for site header/banner (preformatted)

Sept 2020 - Improved code class styling (<code></code>)

Dec 2020 - Fix for list styling

Jan 2021 - Table styling in topic meta - descriptions

Mar 2021 - Normal case for site names, link/menu bar, and side modules; added fix for site name spacing

May 2021 - Site name field extended to 80 characters (<--this should be added to the notes)



Keywords:new theme layout look and feel css file classic theme   Doc ID:112371
Owner:Collin K.Group:KB User's Guide
Created:2021-07-14 13:00 CDTUpdated:2021-12-01 10:08 CDT
Sites:KB User's Guide
Feedback:  0   0