Skins (sorry I'm new!)

[dougbowski]

Hi,

Sorry if this has been asked before or is blatantly obvious but I'm wanting to know how easy it is to change skins, or rather is it possible to have multiple skins accessed at once.

So at present our thinking was to create a default skin for the first few login screens etc. however once you selected a company/product to work with we were wanting to then brand the screens going forward for COMPANY A with their logo, fonts, colours etc.
We were hoping if you then hit exit it would take you back out of that to the default skin and if you selected to work with COMPANY B the following screens would have their logo, fonts and colours etc.

Is this something that is possible or not?

Like I said apologies if it's obvious or duplicate!

[Scott Klement]

I would suggest using a .CSS file for each company. Design you screens to use CSS classes where appropriate, and then based on the company selected, load a different CSS file so that you can give things a different look/feel for each company.

I'm not sure if that is what you meant by "skin" or not?

In our Genie product, we have a specific feature referred to as a "skin." This could also be used, but switching skins in Genie isn't the best performance-wise as it does a lot more than just load a CSS file, it reloads everything from the server including the entire runtime, javascript files, css, images and more. So if you're just looking to change the styling on a company basis, this would probably be overkill. (Plus, since you didn't post this in the Genie forum, I'm assuming you didn't mean a Genie Skin)

[dougbowski]

Hi Scott, it was the Genie Skin and the Genie Skin Administrator I was playing around with so maybe I have posted this in the wrong place.

We're looking to create our own default skin that replicates the styling of one of our similar systems so our advisers are seeing some consistent branding across our systems but once you've selected a company to work with you would pull in individual logo and branding per company and once you'd finished and hit exit it would revert back to the default skin.

I had assumed that I would be able to simply add a .css file per company or maybe even better, that once you'd selected to work with a company then there would be something within the page to identify that, so for example if you had a list of COMPANY A-Z and you selected to work with COMPANY K, then once you got to those specific screens either the body id or some wrapper id/class was added to allow you to target whatever you wanted. I can't see a way of doing this and not too sure if it's possible, so for example you can only have the one logo running with each skin, regardless of any sub-companies (for want of a better word).

As I said I'm new to this and was only asked to look at it a few hours ago so maybe this already exists and I'm just not seeing it.

Thanks

[Scott Klement]

We're looking to create our own default skin that replicates the styling of one of our similar systems so our advisers are seeing some consistent branding across our systems but once you've selected a company to work with you would pull in individual logo and branding per company and once you'd finished and hit exit it would revert back to the default skin.

My opinion is that skins aren't really the best solution for this. Skins include all of the changes made to to the screens, all of your custom JavaScript, as well as CSS, etc. It'd be possible to do it with a skin, but I think it'd be overkill, etc, as I described in the previous post.

Instead, I'd just create a CSS file with each company's theme, you can load it when they access that company, and unload it to revert to the default. You can use a CSS class to set things like the logo as well so that logos will switch.

I had assumed that I would be able to simply add a .css file per company or maybe even better, that once you'd selected to work with a company then there would be something within the page to identify that, so for example if you had a list of COMPANY A-Z and you selected to work with COMPANY K, then once you got to those specific screens either the body id or some wrapper id/class was added to allow you to target whatever you wanted. I can't see a way of doing this and not too sure if it's possible, so for example you can only have the one logo running with each skin, regardless of any sub-companies (for want of a better word).

In Genie, you are displaying 5250 screens. How would it know which company you had selected in that case? It seems to me that if you want this to be something in the screen you can query, you'd have to code that. So perhaps you could code it in JavaScript, or include it in the fields on the 5250 screen, etc.

Genie does change the id of one of the screen divs when you switch screens, so you could write CSS selectors for each specific screen if you wish. You could, of course, change this yourself or apply custom css classes as well. All of this stuff with CSS and Javascript is just web stuff that is built-in to the browsers, so isn't really specific to Profound UI, and won't be in the Profound UI documentation -- but since Profound UI runs in the browser, it's all completely available.

As I said I'm new to this and was only asked to look at it a few hours ago so maybe this already exists and I'm just not seeing it.

To me, this sounds very particular to the way your company does things, I haven't really heard of something like this before. So you would write it into your custom code.

We do supply JavaScript APIs called pui.loadCSS() and pui.removeCSS() that I think would be helpful for this, so you can add/remove a CSS file to help change the styling. This is easy to do. I don't understand your specific rules for how the user selects a company or exactly how your code for this works... but if you can just call pui.loadCSS when they select a company, and pui.removeCSS() when they're done and you want to unload that company's theming, it seems like that would get you most of the way there.