HOWTO Change CSS depending on the user in Session

HOWTO Change CSS depending on the user in Session

  
Dear Community,

I want to share with you a scenario that is easy to implement but took me some time in research:

Recently, I worked in a customer, where they had a requirement of having a different look & feel in a single app depending on the user that accesses the app.

In order to accomplish this, there is some requirements that you need to do first:
  • Identify the css classes that you want to change, we are going to replace the color in runtime;
  • Have an header web block in your style guide eSpace, that contains the logo of your application.
Now the solution:
  1. First of all we created a set of entities to support our idea, something like this:
     
  2. Created a backoffice that allow to specify what is the primary and second color per different customer;
     
  3. Action used to generate the CSS:
  4. Why do you need the html tag before each class? This is the trick used to override the styles on runtime;
     
  5. Now that you have a CSS per customer, you just need to set it on the header web block:
     
  6. AddStyleSheetTag explanation:
     
  7. Download Theme preparation:


Now you have all the necessary to accomplish this solution, of course you can change this approach.

Best Regards,

Hugo Pinheiro
OutSystems

This is really a good idea as I can think of many scenarios where it would be useful.  Can you post an example OML file that has this done?  I'm sure it would be a great help to many. 
Thanks for the reply, I added an example OML to the initial post :)
If the "new" CSS is intended to replace completely the "old" one, there's no need to use the html prefix trick. Simply remove the reference to the "old" CSS using the AddPostProcessingFilter action of HTTPRequestHandler. Unfortunately it is only available in .NET installations.



 
Hi ,
Does this solution work with java platform. I would like to change the CSS based on customer or any other condition.

thanks in advance
Hi Anu,

The solution decribed by Hugo should work. The one I described not, since AddPostProcessingFilter action is not implemented for the Java Stack.


Regards,
Tiago Gafeira.


I know this is really old so I apologize but what is CustomerUser for? I'm trying to understand why it's necessary but I'm having trouble. Thanks

Hello,

this was used for an ISV (independent software vendor) customer, so they had built a portal, to be sold to their customers, so in order to avoid changing the code every time that there was a new customer (new logo, new colors...), they had to create this customization layer above the app. Hope this can clarify your question.

Best Regards,

Hugo Pinheiro

I know but in this example how is CustomerUser used? Why not just have the UserId in the Customer entity? It might be standard database setup, but I'm new to databases so I don't know much about convention yet.


Hugo Pinheiro wrote:

Hello,

this was used for an ISV (independent software vendor) customer, so they had built a portal, to be sold to their customers, so in order to avoid changing the code every time that there was a new customer (new logo, new colors...), they had to create this customization layer above the app. Hope this can clarify your question.

Best Regards,

Hugo Pinheiro



Hello,

If I recall, was because there were several admin users configured per Customer, but you can disregard that part, just the technical part of how to change the style inline matters, you can adapt to your own data model!

Best Regards,

Hugo Pinheiro

Tiago Gafeira wrote:

If the "new" CSS is intended to replace completely the "old" one, there's no need to use the html prefix trick. Simply remove the reference to the "old" CSS using the AddPostProcessingFilter action of HTTPRequestHandler. Unfortunately it is only available in .NET installations.



 

Hi Tiago,


AddStyleSheetTag adds css link to start of page. How we can add this link to end of head section. Base cass is automatically added with some number like example below .

/SG_Theme/Theme.SG_Theme.css?37905

Number 37095 changes with every environment . Can you please help how we can change this sequence of adding new css to end of head tag

nilesh rokade wrote:

Tiago Gafeira wrote:

If the "new" CSS is intended to replace completely the "old" one, there's no need to use the html prefix trick. Simply remove the reference to the "old" CSS using the AddPostProcessingFilter action of HTTPRequestHandler. Unfortunately it is only available in .NET installations.



 

Hi Tiago,


AddStyleSheetTag adds css link to start of page. How we can add this link to end of head section. Base cass is automatically added with some number like example below .

/SG_Theme/Theme.SG_Theme.css?37905

Number 37095 changes with every environment . Can you please help how we can change this sequence of adding new css to end of head tag

that's the regex-part