KB User's Guide - SitePref Tab - CSS for Full View

• Full View Layout / CSS Screen
• Links at the Top of the Screen
• Landing Page Layout / CSS (Internal & External)
• Non-Landing Page Layout / CSS (Internal & External)
• KB Admin Tools Custom CSS

The Full View Layout / CSS Screen

Navigation: KB Admin Tools > SitePref Tab > FullView Layout/CSS link > Full View Layout/ CSS screen. 

The sections of the page are split between links at the top of the screen and 5 expanding/collapsing panels. Click a panel to expand the content within. The image below shows the 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, which are provided for you to reference when updating the default values. In the image below the links are circled in red.

The table below gives a description of each Site Layout and provides an example.

Layout Descriptions

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

Landing Page Layout / CSS (Internal & External)

The two panels highlighted in the image below include attributes for the optional "Fixed centered search only (without content/ side modules)" landing page. Each Site (Internal and External) have their own set of attributes allowing each site to look distinct from each other.

The image below shows the expanded panel containing the External "landing page" attributes. These attributes are only needed if the "External landing page base layout CSS:" field is set to Fixed centered search only (without content/side modules).

• Note: The images and field names below reference the External site CSS, but the process is same when working in the Internal site section.

• 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 landing logo image width: Enter a width in pixels for your KB logo.
• External landing logo image height: Enter a height in pixels for your KB logo.
• External landing base layout CSS: Dropdown with the following two options:
  • None (same as site layout): landing page is the same as your External Site page. Note that other attributes are not needed if this options is chosen
  • Fixed centered search only (without content/side modules): Used in Unified Sites like the Wisconsin Knowledgebase
• External landing page custom CSS path: If desired, you may upload and link to a stylesheet that contains custom CSS for your KB landing page.
• External landing page background images folder path: Enter the file path to the folder contained within your group's logo folder.  Go to the SitePref tab -> click the Group Logo Folder link in the left side bar to open your group's logo folder. The path to this folder is right above the table of files. The images in this folder path are used in the background of the centered search box.

After updating your desired attributed click the Update button at the bottom of the page.

Non-Landing Page Layout / CSS (Internal & External)

The two panels highlighted in the image below include attributes for KB sites of 1 to 3 columns. Each Site (Internal and External) have their own set of attributes allowing each site to look distinct from each other.

In the image below, you will see the attributes selected for the KB User's Guide External Site. 

• Note: The images and field names below reference the External site CSS, but the process is same when working in the Internal site section.

• 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 width: Enter a width in pixels for your KB logo.
• External site logo image height: Enter a height in pixels 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).

After updating your desired attributed click the Update button at the bottom of the page.

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

The last panel on the page contains 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.

Enable the checkbox, enter your desired custom CSS, and click the Update button at the bottom of the page.