Portal Styling for Flexible Layout
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
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.
- 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.
- 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
3. Change the layout add at right column or change to something completely new
- What's new
- Get started with Parature
- Administer and customize Parature
- Work with modules
- Work with Criteria editor
- Desktop module
- Email module
- Knowledgebase module
- Download module
- Account module
- Customer module
- Product and Asset module
- Ticket module
- Chat module
- Survey module
- Reports module
- Mobile Service Desk
- Social Monitor
- Best practices
- Frequently Asked Questions
- Setup FAQs
- Desktop FAQs
- Email FAQs
- Knowledgebase FAQs
- Download FAQs
- Account FAQs
- Customer FAQs
- Product FAQs
- Ticket FAQs
- Chat FAQs
- Survey FAQs
- Reports FAQs
- Portal FAQs
- Support FAQs
- Sandbox FAQs
- Setup Troubleshooting
- Desktop Troubleshooting
- Email Troubleshooting
- Knowledgebase Troubleshooting
- Download Troubleshooting
- Account Troubleshooting
- Customer Troubleshooting
- Product and Asset Troubleshooting
- Ticket Troubleshooting
- Chat Troubleshooting
- Reports Troubleshooting
- Sandbox Troubleshooting
- Parature Portal Troubleshooting
- Getting support
- Integrate with Parature
- Support Resources
- Topic #: 3-5518
- Date Created: 03/23/2011
- Last Modified Since: 05/26/2016
- Viewed: 8047