KB User's Guide - SitePref Tab - CSS for Full View
This document explains how fields in the Full View Layout / CSS screen can be used to modify the look and feel of a KB site.
The Full View Layout/ CSS Screen
Navigation: KB Admin Tools > SitePref Tab > FullView Layout/CSS link > Full View Layout/ CSS screen.
Links at the Top of the Screen
There are three links at the top the Full View Layout/CSS screen. The links lead to the default CSS file of each Site Layout. In the image below, which are provided for you to reference when updating the default values. The links are circled in red.
The table below gives a description of each Site Layout and provides an example.
|Site Layout Name||Site Layout Description||Live Site Example|
|Landing page base layout CSS||Fixed centered search only (without content/ side modules)||Used in Unified Sites like the Wisconsin Knowledgebase|
|Default site base layout CSS||Relative width (100% width up to 3 columns)||Like the UW Arrow Help KB|
|Default site base layout CSS||Fixed width (960px with 1 or 2 columns)||Like the Campus and Visitor Relations KB|
Internal Site Layout/ CSS & External Site Layout /CSS
The next section of the screen includes attributes for the optional "Fixed centered search only (without content/ side modules)" landing page, as well for the two main KB site layouts with 1 to 3 columns. Each Site (Internal and External) have their own set of attributes allowing each site to look distinct from each other.
- Note: The images and field names below reference the External site CSS, but the process is same when working in the Internal site section.
The image below shows a detail of the External "landing page" attributes. These top five attributes are only needed if the "External landing page base layout CSS:" field is set to Fixed centered search only (without content/ side modules).
Below the landing page attributes are six attributes for KB sites of 1 to 3 columns.
In the image below, you will see the attributes selected for the KB User's Guide External Site.
- External landing page logo image path: Click on the Upload button to the right of this field and upload your logo. In the field provided, enter the image path.
- External site logo image size: Enter a height and width for your KB logo.
External site logo image link to: You may enter an alternative KB Logo link here. You logo links to your KB homepage by default.
- External site base layout CSS: Choose one of the two standard layouts provided, or choose "None" if you prefer to use your own CSS to style the entire site (this is generally not recommended unless you have your own resources to provide styling).
- External site custom CSS path: If desired, you may upload and link to a stylesheet that contains custom CSS for your KB site.
- External site custom CSS: Choose from the dropdown menu to enable one of the four fields below. If you have custom CSS entered in the enabled field, it will be added to your site and will overwrite any existing CSS rules from the CSS files referenced above (i.e. your base layout and/or custom CSS).
The Update button next to the top of each Site Layout/CSS section will update any modified fields on the page (even if they were changed under the other section).
Order of Loaded CSS
Your site CSS is loaded in the order specified on this page. This means that the CSS for your base layout loads first, followed by any custom CSS file provided, followed by the contents of any custom CSS in the enabled text field.
This way, you can rely on the base layout options to supply the majority of the site CSS, then overwrite particular rules as needed to customize colors, fonts, etc.
CSS present in individual KB documents (e.g. internal style sheets added to the page or inline CSS) will be loaded last.
KB Admin Tools Custom CSS
At the bottom of the page, there is an option to enable custom CSS for the KB Admin Tools. This is particularly useful if you are relying on custom CSS entered above to style document content, as you can ensure that the same content is similarly styled when those documents are being viewed in the KB Admin Tools.