psadmin.io Stylesheets for Fluid

Last year we released a set of stylesheets to brand your non-production environments. Those stylesheets were built for the Classic UI and not for Fluid. Today we are releasing Fluid versions of the stylesheets.

The main colors are the same, but since Fluid uses a darker color for UI the themes are darker than the Classic versions. Here screenshots of the Fluid Homepage with each theme:

Blue

Green

Grey

Orange

Purple

Red

Yellow

Improvements

One change the stylesheets make beyond the color is adding a button style around the Homepage Tab selection. This should improve the usability of the homepage (thanks to Kyle for idea and CSS).

Environments

Use the colors however you want, but the list below is how I’m using the colors:

  • DEV1 – Green
  • DEV2 – Light Blue
  • DEV3 – Purple
  • TST – Red
  • QA/UAT – Grey
  • SBX (Sandbox and Nightly Refresh) – Yellow

Installation

Installing these scripts is simple. All of the changes are included in a single Data Migration project, so you can import all the styles with the Data Migration Workbench.

  1. Download the latest IO_STYLES_FLUID.zip
  2. Unzip the IO_STYLES_FLUID.zip to your Data Migration file location.
  3. Navigate to PeopleTools > Lifecycle Management > Migrate Data > Data Migration Workbench
  4. Select “Load Project From File”
  5. Select the file location and the IO_STYLES_FUILD project.
  6. Select “Submit Project for Copy”

After the Migration Project is loaded, change the theme for your application.

  1. Navigate to PeopleTools > Portal > Branding > Branding System Options
  2. Select the IO_THEME_xxx you want.
  3. Click OK.
  4. Log out and log back in to see the changes.

Change the Logo

To change the logo, you can upload a new image file to use. You have two options:

  1. Replace the IO_WHITE_32 logo with your own image
  2. Upload a new image and change the Theme Macro Set value for PT_LOGO_IMAGE_NAME and PT_LOGO_IMAGE_NAME_SMALL

Community Thanks

A huge “Thank You” to Sasank Vemana for his excellent blog posts on Branding Fluid and Kyle for his feedback and sharing some of his CSS with the project.

2 thoughts on “psadmin.io Stylesheets for Fluid

  1. Pingback: #89 – Gotchas

Leave a Reply

Your email address will not be published. Required fields are marked *

To create code blocks or other preformatted text, indent by four spaces:

    This will be displayed in a monospaced font. The first four 
    spaces will be stripped off, but all other whitespace
    will be preserved.
    
    Markdown is turned off in code blocks:
     [This is not a link](http://example.com)

To create not a block, but an inline code span, use backticks:

Here is some inline `code`.

For more help see http://daringfireball.net/projects/markdown/syntax