Restyling/rebranding HR9.1/Tools 8.50 January 12, 2010
Posted by Duncan in Look and Feel, PeopleTools 8.50.trackback
I’ve spent a couple of days doing a rebranding job on one of our v9.1/Tools 8.50 environments and it’s a lot harder than it used to be pre-8.50.
Previously, if you had a rough idea of how it all fits together and knew the colour scheme that you were moving to you could do it in a day or two. Now however, I think it’ll take a bit longer. Here’s why:
The routine used to be:
- Clone the delviered style sheets
- Locate the HTML code for the colour you wish to change
- Locate the HTML code for the colour you wish it to become
- Convert both into the database equivalents (using Hex functions in Excel is normally easiest)
- Update the database, replacing all instances of the old colour with the new colour where the style class is within your new style sheets
- Repeat until all colours have been swapped
- Then, go through each image and make the colour consistent
Since I did this last there’s a plugin for Firefox called FireBug that makes the whole process of identifying which Style Class is responsible for the colour of an on-screen element, so the process should be much quicker (no more than a day or two).
With Tools 8.50 came the advent of FreeForm Style sheets. While these might be quicker to write and more flexible for entering complex CSS (and I’m sure the Tools 8.50 UI couldn’t have been delivered without them) it makes it a lot harder to track down where an element is inheritting its style from.
Freeform style sheets are the equivalent of a straight text CSS file, but they are stored in HEX in PSCONTENT. This means that you can’t search them easily or do a find and replace on a colour code using SQL very easily, so for every colour that you need to change within a FreeForm style class you have to manually find it and change it.
The job I’ve just finished required me to change 14 different style sheets, 6 of which were FreeForm.
You also have to bear in mind that if you’re rebranding portal, whenever content is drawn from another application (in this case HR), you have to apply the style changes to that database also.
Comments
Sorry comments are closed for this entry
The PeopleSoft Tipster Blog 
Thanks. This is a great tip. I will definitely pass it on.
Bye, Bye, Corpoprate Identity?
Hi Duncan, I actually find branding easier in PT 8.50. Using Firebug’s HTML tab and style sidebar, you can prototype the entire UI online real time. When you are done, you switch to the CSS tab, use the file name drop down to identify the CSS file you are interested in, copy the contents, and then paste it into the same free form stylesheet in App Designer. Using Firebug, I can brand a server in a couple of hours.
The Style sidebar of the HTML tab gives you the source file name and shows which file overrides which style, so you know what to change to get the desired result.
And, when it is all said and done, I actually find the easiest way to brand is to ignore all the PeopleSoft delivered stylesheets and create your own. For the homepage, all you have to do is add a stylesheet link just before the end head tag and point that link at a custom stylesheet (file based, IScript, etc). Anything you define in the final stylesheet overrides whatever is delivered. For actual pages, you can use PT_PAGESCRIPT, PT_COPYURL, etc to override delivered stylesheets by using the JavaScript I posted here: http://jjmpsj.blogspot.com/2007/01/importing-custom-stylesheets-into.html.
You are right in saying it is different, but I actually wish they would get rid of the structured stylesheets altogether. I find native CSS far more appealing.
One more thing about colors… You don’t actually have to convert colors to hex. You can use the RGB macro in free form CSS instead: rgb(255,0,0), etc. I find the easiest way to handle colors is to take a screen shot and then use the dropper in a program like WinGIMP/GIMP, Photoshop, etc. These programs give you RGB, HTML/HEX, etc.
When I brand homepage tabs, I eliminate the table based design with IMG tags and replace it with div’s or li’s (depends on how I feel at the time) with background images. background images are much easier to override through CSS than the IMG tag (which requires JavaScript replacement code or server side URL rewriting).
I really like the way component page tabs are styled in PT 8.50. They use a derivative of the “sliding doors” technique, which means they use one image and two elements: an “a” parent and a “span” child. The first element’s background controls the left side image, and the child/second element’s background controls the right side image. This design gives you a significant amount of freedom in styling your tabs. Even better, it allows you to override the delivered style without touching delivered stylesheets (see my comments above).
About being able to search for colors, etc across stylesheets… Interesting idea. It would be a good enhancement. In the mean time, I recommend Firebug’s Style information. I haven’t found myself searching for style information across stylesheets because Firebug tells me exactly which stylesheet provides an element’s styling information.
I hope this additional information helps.
Thanks for your response Jim. I agree that Firebug does make it significantly easier, however the mix of structured and freeform stylesheets does slow me down. When a PeopleSoft Stylesheet contains substyle sheets, the CSS tab in Firebug that you mention only shows the parent style sheet (at least the way I was using it). I then found myself rummaging through 6 or 8 freeform style sheets trying to find the appropriate style class to override.
If all style sheets were structured I could find each of the colours I wanted to change (and there’s probably only 20 or 30 unique shades of blue in the delivered PIA) and use SQL to update every instance of each colour. That way, when a single colour appears many times (if it’s a border colour it’ll appear at least 4 times), I only have to update once.
My reference to converting to Hex was that this is the only way I’ve found to update the database tables. I use the colour dropper from a graphics program (Paint Shop Pro) to select my colour, take the Hex value and then convert this to the value needed for PSSTYLEDEFN. The Hex value is a intermediary step to getting these values.
You’re definitely right about the changes in page Tabs. I did intend to put this in my post, so thanks for reminding me of the omission. The sliding doors approach that’s used now is far, far preferable to the old method of branding tabs.
I do like your idea about appending an ‘override’ style sheet. That does sound a much quicker way of doing things. I might have to try that method when I come to do this next.
Thanks!
Ah Duncan, you are so right about SQL updating the structured stylesheets. I had not considered that. It is also true that Firebug only shows the parent stylesheet.
I do recommend the CSS override, because it eliminates all the CSS hunting. You can even source an IScript as a stylesheet, which would allow you to derive portions of the CSS at run time (user configurable themes perhaps?). Using a ServletFilter, you can cache the IScript results, so it performs as well as a static stylesheet.
This is a good discussion Duncan.
I found the original project on the Allinity site many years ago.
We absolutely love being able to identify which database we are in by color.
It prevents T.I.P.’ing (Testing In Production)…LOL
We are in the process of upgrade to FSCM 9.0. PTools 8.50
Once completed, we will be sure to apply the new format.
Can hardly wait.
I was incorrect about something I mentioned above. I stated that it’s difficult to search freeform style-sheets for instances of text for the purpose of find and replace. I was looking at the stylesheet translated to HEX in PSCONTENT.
I was typically complicating something that is simple. There is a new value in the drop-down in ‘Find In…’ dialogue in App Designer that allows you to ‘Find String in Freeform Stylesheet’.
Hi,
I got a question on this… I’m using the Portal Entreprise to test the branding. I’ve done a new Theme and then assign it to a role. In the assemble branding theme I’ve change the Style Sheet Name to use my one CSS. The result of this is that the style change but only for the Administration and Investor TABS, not for the My page TAB… If I look with Firebug, if found my CSS but apparently, on the My page TAB, it’s overwritten by ‘?tab=DEFAULT #4’… do you have any idea how to change this behavior?
Same things for my custo TABS, everytime I’m creating a new tab, it’s overwritten, it’s only work for Adrministrator and Investor TABS, and I don’t know why.
Thanks for the answer