Style Default button in Expression

Style Default button in Expression

  
Hey guys, 

I have an application that contains a way for the user to create a custom style. This style gets saved in the DB and loaded on a page with an expression. However, I can't seem to style the Default buttons in an expression. I've tried the following: 

.Is_Default {
    background-color: " + GetStyleByTenantId.List.Current.Style.DefaultButton + ";
}
.Button .Is_Default {
    background-color: " + GetStyleByTenantId.List.Current.Style.DefaultButton + ";
}
But that doesn't seem to work. The only thing that does work is adding the style in the extended properties, but I'd prefer getting it to work with an expression as that means I can copy and paste it in all my screens, which saves me some time. 

EDIT: It appears that custom styling in an expression is somewhat problematic. I've replaced the non-default button hover as well as the text color of labels, but they never seem to get applied - only some CSS, but never everything (although there are no issues in the Expression). Does anyone know why this is? 

Kindest regards,
Robrecht
Hi Robrecht,

Did you use the browser's developer tools to a) check what's actually in the page source and b) check what CSS is applied in what order?
Kilian Hekhuis wrote:
Hi Robrecht,

Did you use the browser's developer tools to a) check what's actually in the page source and b) check what CSS is applied in what order?
 
 Hey Kilian, 

Thanks for your reply. I did check the source code to make sure I was using the proper CSS classes. I know that the CSS should be applied somewhere - I've currently set the .MainContent's background color to bright red (for testing purposes) and whenever I load a page I can see a flash of that red before it applies the default theme colors. Note that it applies the default theme colors in some, but not all, instances. My header text and background color and my html text color are replaced, but if I want to replace for example a label's text color (both with the label and .MandatoryLabel selector) it doesn't apply my css. How can I be sure my CSS is applied last? 

Kindest regards,
Robrecht
Hi Robrecht,

You didn't answer my questions :). CSS is applied in order, so you need to make sure that your CSS comes after any platform CSS. I would expect that to be the case if you put an expression on a page. However, you really should use the devtools to check why your CSS isn't applied. Chrome/IE/FF show this very nicely.
Kilian Hekhuis wrote:
Hi Robrecht,

You didn't answer my questions :). CSS is applied in order, so you need to make sure that your CSS comes after any platform CSS. I would expect that to be the case if you put an expression on a page. However, you really should use the devtools to check why your CSS isn't applied. Chrome/IE/FF show this very nicely.
 
 Thanks Kilian, I think you pointed me in the right direction - the expression containing my CSS is in WebBlocks that I'm including in a different module, and odds are they are overwritten by the CSS from that module. I'm gonna see if that's indeed the case. 

Thanks again! 
and you can also check out this guide for guidance to make it a more easier approach insteaf of using expressions etc..

http://www.outsystems.com/forums/discussion/10133/how-to-translate-arabic-or-any-right-to-left-script-in-outsystems-apps/
J. wrote:
and you can also check out this guide for guidance to make it a more easier approach insteaf of using expressions etc..

http://www.outsystems.com/forums/discussion/10133/how-to-translate-arabic-or-any-right-to-left-script-in-outsystems-apps/
 
 I'm reading through it now, very handy! I also found the issue - I'm using TokyoTheme, which has a seperate .desktop class when on a browser. Appending this to my styles made them all apply. Thanks again for the help, all! 

Robrecht