Override CSS per query/form

Contains tips for configurators working with Aware IM
Post Reply
hpl123
Posts: 2579
Joined: Fri Feb 01, 2013 1:13 pm
Location: Scandinavia

Override CSS per query/form

Post by hpl123 »

Hi all,
This is a tip on how to override the CSS in any query or form i.e. you can change any CSS setting for e.g. 1 specific query.

1. Figure out which CSS file the query use. In this example it´s bluebay.css for a Blue bay query. NB: Figure this out by using the browser developer tools.

2. Figure out which CSS class the setting you want to change has. In this example I will change the query header settings and the CSS class is ".x-panel-header-default". NB: Figure this out by using the browser developer tools.

3. In file bluebay.css, create a new CSS class (.myQueryHeaderClass) which will be your override class. Add the class from step 2 to your override class:
.myQueryHeaderClass .x-panel-header-default {background-color:#000 !important;background-image:none !important; }

4. In the query where you want you new settings add:
"config.cls="myQueryHeaderClass";"

NB: With this fix you can change basically all CSS settings for any query or form and you can add multiple classes (step 2 classes) to your override class.
Henrik (V8 Developer Ed. - Windows)
weblike
Posts: 1165
Joined: Sun Dec 02, 2012 12:00 pm
Location: Europe

Post by weblike »

Hi Henrik,
Great post. Since now...we have modified themes css files and we have to be very carefull if more apps used same theme, but your solution is far more elegant and now we can use any custom classes as our imagination can take, only sky is the limit. 😊

Thx a lot.
Thx,
George
________________________________
Developer Edition
AwareIM: v8.5, build 2824
OS: Windows Server 2012
DB: MySql 5.6.42
hpl123
Posts: 2579
Joined: Fri Feb 01, 2013 1:13 pm
Location: Scandinavia

CSS

Post by hpl123 »

Yes this fix is great but it is as you point out, you have to be careful you don´t mess something up and this is fairly new to me as well so testing a lot of things.
Henrik (V8 Developer Ed. - Windows)
hpl123
Posts: 2579
Joined: Fri Feb 01, 2013 1:13 pm
Location: Scandinavia

Info + Walkthrough

Post by hpl123 »

Here is a bit more info on this fix and also a walkthrough of finding the right CSS class etc..

http://www.awareim.com/forum/viewtopic.php?t=7173
Henrik (V8 Developer Ed. - Windows)
Post Reply