Skip to Content (Press Enter)
2018-11-07 10-43-31
Hugo Pinheiro
Staff
3380Views
15Comments
HOWTO Change CSS depending on the user in Session
Discussion
CSS
How-to
OutSystems Widgets
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

CssRuntime.oml
14
0
21 Feb 2014
Copy Link
2013-11-21 00-40-55
Curt Raddatz
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. 
0
0
21 Feb 2014
Copy Link
2018-11-07 10-43-31
Hugo Pinheiro
Staff
Thanks for the reply, I added an example OML to the initial post :)
0
0
21 Feb 2014
Copy Link
2018-07-03 08-33-54
Tiago Gafeira
Champion
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.



 
2
0
06 May 2015
Copy Link
UserImage.jpg
nilesh rokade

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

0
0
01 Nov 2017
Copy Link
2016-04-21 20-09-55
J.
 
MVP

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



1
0
01 Nov 2017
Copy Link
2023-06-14 08-52-52
Arkyadeep Bharadwaj

Tiago Gafeira wrote:how to know the base css regularExpression.

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.



 



0
0
17 Aug 2018
Copy Link
2017-03-28 10-50-47
Paul.

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.



 

This is really nice trick. To improve upon that I got another tip.

Instead of removing the Theme styling, you can also place your custom CSS file below it, so it styling takes precedence. By putting it below the Theme CSS file it overrides any style you have set in the theme.


To do this, search for the next line in the script and replace it with your custom CSS + next line.

You can do this by searching for 

"<script id=""_OSrequestInfoScript"""

And replace it by

"<link href='/MyApplication/BrandCSS.aspx?" + DiffSeconds(#2018-01-01 00:00:00#, CurrDateTime()) + "' type='text/css' rel='stylesheet' />
    <script id=""_OSrequestInfoScript"""

I'm also adding a time to the filename to force this file to be loaded each time (instead of being loaded from cache).

The advantage is you can just do custom styling on little parts of CSS code, instead of having to copy the full CSS. The second advantage is you don't need to put "HTML" before every tag anymore.

3
0
01 Nov 2018
Copy Link
UserImage.jpg
anu jacob
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
0
0
21 Mar 2016
Copy Link
2018-07-03 08-33-54
Tiago Gafeira
Champion
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.

1
0
21 Mar 2016
Copy Link
UserImage.jpg
Brit'ne Sissom

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

0
0
03 Apr 2017
Copy Link
2018-11-07 10-43-31
Hugo Pinheiro
Staff

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

0
0
04 Apr 2017
Copy Link
UserImage.jpg
Brit'ne Sissom

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



0
0
04 Apr 2017
Copy Link
2018-11-07 10-43-31
Hugo Pinheiro
Staff

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

2
0
04 Apr 2017
Copy Link
2023-06-14 08-52-52
Arkyadeep Bharadwaj

it is not working.any idea.


0
0
17 Aug 2018
Copy Link
UserImage.jpg
Tomasz M Lipinski

Hi,

Some tip for absolute beginners :-) : when downloading the CSS (Download widget) you must change Mime-type parameter from the default "application/octet-stream" to "text/css".

Regards

Tomasz

0
0
23 Mar 2021
Copy Link
Community GuidelinesBe kind and respectful, give credit to the original source of content, and search for duplicates before posting.