Portal Styling for Flexible Layout

Portal Styling for Flexible Layout

Overview

The purpose of this article is to show you how to get started with the new Flexible Layout (no frames) functionality currently available for preview in the Parature Sandbox.

A more advanced version of this tutorial is available here: Advanced Portal Design Tutorial.

For additional templates in addition to our default template please view this article: Advanced Portal Styling Templates

For information on styling framed versions of the portal view these articles

Getting Started

 

Things to keep in mind:
- If you are switching from a framed layout to Flexible Layout (no frames), you will need to re-apply branding and styling to the new layout. It is not possible to automatically migrate your existing portal style.
- This article will only cover basic styling changes. With the new Flexible Layout, you have complete control over the presentation layer. To learn more combining CSS, JavaScript, and HTML, http://www.w3schools.com/ is a beneficial and helpful resource.
- Other tools - the Firefox browser with the Firebug plugin is useful to find classes and test changes. Notepad++ is a Notepad replacement application that supports CSS and other languages.

Default Flexible Layout
To assist you with transitioning to the new style sheet, we have provided you with a default template that retains the general layout of the current Support Portal. This is just a starting point that you can use to create your Support Portal experience. Download default template.

New Portal Interface Setup
All portal style and layout configuration has been consolidated under Setup > Portal > Aliases > Default Portal. There are several files that can be uploaded, but for this article we will focus changes to the main style sheet only.

- Style Sheet: Controls the look and feel of the Support Portal. Upload any file containing valid CSS content.
- Head: HTML content included in the section of the Support Portal. Upload a document containing valid HTML. You can include Web Analytics tags, references to external CSS files, JavaScript references, etc.
- Top: HTML content included at the top of Support Portal pages. To preserve search engine indexing it is recommended to minimize the amount of code entered here.
- Bottom: HTML content included at the bottom of Support Portal pages. Although this content displays at the bottom of pages by default, you can style the content to appear at a different location.
- Print: Controls the look and feel of content printed from the Support Portal.

Step by Step Tutorial for Rebranding the Default Template

 

In your Parature Sandbox, you can use the new style sheet to plan, preview and implement new Portal customizations before your upgrade to the new Parature release. Following the release upgrade, you can copy these sandbox style sheet changes into your production environment

1. Log in to your Parature Sandbox (how to access sandbox)
2. Go to Setup >  Portal > Portal Interface
3. Select No Frames from the drop-down
4. If not done above - Download the default template
5. Select Browse and upload the default stylesheet
6. Save Changes
7. View your Support Portal – Congratulations on deploying the new Flexible Layout!

Changing the logo, banner, and background color


Next we will work with the CSS to change the brand – logo, banner & background color.

1. Open the default template on your desktop in a text editor (Notepad ++ is recommended) to make a few changes (line numbers below assume that no additions have been made to the default template)
2. Change the background color on Line 65 to #2C3F8E.
3. Change the logo by updating the URL reference in Line 139 to http://d1.parature.com/FileManagement/Download/9e23fdf03c4e4108b13fbe9c6408fe4a
4. Change the banner by updating the URL reference in Line 142 to http://d1.parature.com/FileManagement/Download/7e573923c9d94aaa87feddc62774cd55
5. Save your changes
6. Upload new CSS
7. View an updated new portal

Now to make it your own:
1. Set the font and color defaults under the body class (line 61 in default template) to match your company
2. Use your Company’s logo (you can reference the logo stored on your company site or upload content to the download module)
3. Update the banner (from your company site or Parature Download module)

By completing these steps, you should now have a branded portal using the new Flexible Layout. The tutorial above just scratches the surface of what is possible. If you would like to do more with your Advanced Portal Stylesheet, here are some tasks to consider:

1. Add your company website Header & Footer
2. Use JavaScript to create new interactions
3. Change the layout add at right column or change to something completely new

Knowledgebase

Topic Information
  • Topic #: 3-5518
  • Date Created: 03/23/2011
  • Last Modified Since: 05/26/2016
  • Viewed: 8099