Hi, If you take a look at \\uniface\\usys\\uweb.ini in your Uniface installation directory you should see how stylesheets are being included. Basically they get pulled in based on the widgets you're using. You can stop the tundra css being imported by removing all reference of it in this file. Bear in mind that if you completely remove tundra like this then you'll need to handle the styling of the field widgets yourself, but all it takes is some basic Dojo themes knowledge. Regards, James

Thanks for the info James. Knowing this i don't think is a good idea to completely remove tundra from my web app, so my question is how can i prioritize my css over the tundra theme? For example i want my buttons green and i can see them green on my editor but the tundra theme change that when uniface autogenerate its own styles and js in the browser

I don't think it's the Dojo CSS that's at fault here, it's possible that when the actual Dojo button is being created it's simply ignoring whatever style rule you defined against the button place holder in your layout. The best approach is going to depend on a few things. How are you making the button green in the editor at the moment? Maybe if you could cut and paste that element from the source view into the thread?

Here is the html in the editor: <input id="ufld:BLOGIN.LOGIN.SEGURIDAD" value="Button" class="btn btn-primary" type="button" />   and the css that i'm using: .btn { border-radius: 0px; } .btn-primary { background-color: #009640; border-color: #003300; }

If you open that page up in your browser and take a look at the HTML that Uniface has generated (using "inspect element" to see the actual DOM rather than just "view source" which will only show you what the server sent to the browser). You'll see that our placeholder input tag has been completely replaced with the markup required to create a Dojo button. There is a button element in there, and the 2 classes added in the layout editor have been transported across onto it. However, it's the parent of the button element that is actually setting the background colour (it's using an image in this case). One way around this is to wrap any buttons you want to change the colour of in a div with a specific class. <div class="green-button"><input id="ufld:BUTTON.DUMMY.DUMMY" value="Button" type="button" /></div> We can then use this to select the span in the button which sets the background image and override it with our colour. .green-button .dijitButtonNode{   background:#009640 !important;   border-color:#003300 !important; } The !important directive is needed if we're using styles directly in the page, but we can get rid of it so long as we ensure our CSS is loaded after tundra.css (you can use $webinfo("CSS") to achieve this).

Thanks for the info!!! Working great

Super!

Just to add more details on this, because it is the main issue when developers try to understand and work with the web development of Uniface. Per my understanding dojo toolkit basically adds in every “widget” a span wrapper in order to control the functionality and RIA events. For example for a simple button in html with a custom class (rounded corners, fade colors, hover up and many more….): <button class="btSelect" id="ufld:CLIENTCON.WEBDUM.DUM_MODEL"></button> That is attached to a custom class contained in a custom css file : button{                         border: 1px solid #FFFFFF;                         border-radius: 6px;                         -webkit-border-radius: 6px;                         -moz-border-radius: 6px;                         -ms-border-radius: 6px;                         -o-border-radius: 6px;                         -webkit-box-shadow: 0 1px 0 0 #57c6ff inset;                         -moz-box-shadow: 0 1px 0 0 #57c6ff inset;                         -ms-box-shadow: 0 1px 0 0 #57c6ff inset;                         -o-box-shadow: 0 1px 0 0 #57c6ff inset;                         box-shadow: 0 0 5px #000;                         color: white;                         font-weight: bold;                         padding: 6px 10px;                         text-align: center;                         text-shadow: 0 1px 0 #153451;                         overflow:visible;                         margin-right:5px; } button.btSelect,button.btSelect:active {                         background:#fdb903;                         background: -webkit-gradient(linear, left top, left bottom, from(#fdb903), to(#e09a03));                         background: -webkit-linear-gradient(top, #fdb903, #e09a03);                         background: -moz-linear-gradient(top, #fdb903, #e09a03);                         background: -ms-linear-gradient(top, #fdb903, #e09a03);                         background: -o-linear-gradient(top, #fdb903, #e09a03);                         background: linear-gradient(top, #fdb903, #e09a03); }   Uniface/dojo generates this at the runtime:   <span>                         <span class="dijit dijitReset dijitLeft dijitInline dijitButton"                                                 dojoattachevent="ondijitclick:_onButtonClick,onmouseenter:_onMouse,onmouseleave:_onMouse,onmousedown:_onMouse"                                                 widgetid="ufld:CLIENTCON.WEBDUM.DUM_MODEL:WD000402.1">                                                                                                 <button class="btSelect" dojoattachpoint="titleNode,focusNode" type="button" value="Σύνδεση χρήστη"                                                                                                 wairole="button" waistate="labelledby-ufld:CLIENTCON.WEBDUM.DUM_MODEL:WD000402.1_label" role="button"                                                                                                 aria-labelledby="ufld:CLIENTCON.WEBDUM.DUM_MODEL:WD000402.1_label" id="ufld:CLIENTCON.WEBDUM.DUM_MODEL:WD000402.1"                                                                                                 tabindex="0">                                                                                                 <span class="dijitReset dijitInline dijitButtonText" id="ufld:CLIENTCON.WEBDUM.DUM_MODEL:WD000402.1_label" dojoattachpoint="containerNode">Σύνδεση χρήστη</span>                                                 </button>                         </span> </span>   It is clear that the first span area contains the css style (dijitButton) and of course there is a reset to developers and browser’s user agent css first (dijitReset). James mention that we can do inline css in html or load your css last. If we choose the second option we must overwrite also the span class because this class also contains css styles that are inherited from its parent. In any case the order of loading of css sometimes is not possible for example when a developer use a dsp container Uniface trims the header information and works with the parents css. The efficient way to totally overwrite the classes of Uniface css is to use !important style in the css file and “clear” the unwanted styles :  span.dijitButtonNode{                         border:none!important;                         background:none!important; }     And of course make your css classes more persistence compared with the css of Uniface with !important style command :   button{                         border: 1px solid #FFFFFF!important;                         border-radius: 6px!important;                         -webkit-border-radius: 6px!important;                         -moz-border-radius: 6px!important;                         -ms-border-radius: 6px!important;                         -o-border-radius: 6px!important;                         -webkit-box-shadow: 0 1px 0 0 #57c6ff inset!important;                         -moz-box-shadow: 0 1px 0 0 #57c6ff inset!important;                         -ms-box-shadow: 0 1px 0 0 #57c6ff inset!important;                         -o-box-shadow: 0 1px 0 0 #57c6ff inset!important;                         box-shadow: 0 0 5px #000!important;                         color: white!important;                         font-weight: bold!important;                         padding: 6px 10px!important;                         text-align: center!important;                         text-shadow: 0 1px 0 #153451!important;                         overflow:visible!important;                         margin-right:5px!important; }   And here we are : 

JTsagara, you're a MYTH! Complicated thing made simple...Fantastic! Thanks a lot! Gianni