Advanced Portal Styling Portal Example

As previously discussed at “Jessica’s Corner”, you can benefit greatly from utilizing Advanced Portal Styling, a flexible layout offered with the newest release. Since we have already defined some great reasons why you should start utilizing this feature, how do you get started with implementing this?

Before we get started with the implementation process, there are a couple things you should keep in mind:

• In choosing to switch 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
• Under Flexible Layout (no frames), the Forum will still utilize the framed portal style sheet – in sandbox the forum in this mode is still under development

The new layout is very flexible and there are many things you can do with the styling. In order to begin, you will need to have some more advanced knowledge of CSS. To learn more about combining CSS, HTML, and JavaScript, http://www.w3schools.com/ is a helpful resource.

Start with your Sandbox in order to test out your layout before going live. We have provided a default stylesheet here; please note that you will need to be signed in to the portal in order to view this document. When you are ready to get started in your Sandbox, perform the following actions:

1. Log in to your Sandbox system

2. Navigate to Setup; Expand Customization, Customize Portal, and click Portal Interface

3. Select No Frames from the drop-down menu

4. Select Browse and upload the default stylesheet (must be saved to your computer in order to grab)

5. Save Changes

View your Support Portal and confirm that the Portal has changed. Now you are ready to change the logo, banner, and background color in your stylesheet to customize the elements for your page:

1. Open the default template on your desktop in a text editor (Notepad ++ is recommended) to make 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

View the new updated portal, and check that the changes are in line with the steps. Now you are ready to make it your own!

1. Set the font and color defaults under the body class (line 61 in the 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 Flexible Layout. The tutorial above just scratches the surface of what is possible within Advanced Portal Styling. If you would like to do more with your stylesheet, you should consider the following:

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

We’d love to hear your tips on Advanced Portal Styling; to stay updated, be sure to check back with the Parature ’11 Latest Release folder at support.parature.com!