Visual CSS - property is set in a CCS rule with higher priority

Visual CSS - property is set in a CCS rule with higher priority

  

Hi

When I use visual styling in the latest IDE and want to change the background color of an input widget it seems to be impossible (a help appears on hovering with: "property is set in a CCS rule with higher priority"). Via extended properties this is possible (style). Should that not be possible visual too? 

Regards, Harry 

CCS should read: CSS

Hello Harry

Of course it is possible :)

But you need to define a CSS selector (that will choose your widget) with a higher priority than the one that already exists.

Ex.:

.Class1.Class2 is a selector with a higher priority or specificity than just .Class1

You can read about this here: https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity

Cheers

Eduardo Jauch

Sorry to interrupt... but what is Visual Styling?

@David, it is a visual way of styling CSS. See the release notes.

@Eduardo, I understand only half you're trying to point out. I get the concept but how do I add a class to the existing one (and what is the existing one)? And why can I f. ex set margins, but not a color? And why can I do such a thing by an extended property? Is this not the purpose of the Style Editor? I tried adding a class (first field in the Style editor, nbut nothing changes? Can you give me an example how to do this?

Regards, Harry     

Thanks for the tip.  I was able to locate the Release Notes and then read this...

  • It is now possible to style the widgets with the new Style Editor panel without using CSS. (RICT-461)

I installed the latest release 10.0.715.0 and had to look around a bit before I saw that this area had changed slightly...

There is no longer a dropdown box to the right of CSS.  And... when you click on CSS you now get this...



You can change the Background Color of a Widget with the new Visual Style process.

In your Input Widget property... Style Classes... type in a new Style Class Name... e.g. myClass

Click the CSS button and type in the structure for a class..

.myClass {


}

Put your cursor in between the {} and then click on the "Color" button within the "Layout" section, select a color and that will add the CSS to your new class.


Very nice addition to OutSystems.

Now... if they'd only add the ability to search CSS.

I think I understand your original post now.  You're saying that you can change other aspects of the Input Widget CSS using Visual Styling... e.g. Font Size, Font Color... but that a change to Background Color will not take effect.  Is that right?

As Eduardo points out, your new class, for Background Color, is being over-written by one of the other classes added to the Input Widget.  After I added myClass, the Classes for my Input Widget are now...

myClass ThemeGrid_Width4 ThemeGrid_MarginGutter

You'd have to look into the other 2 classes to see which one is setting the Background Color.  

Or... add !important to your class... which will clobber anything that comes after it.

SyntaxEditor Code Snippet

.myClass {
    font-weight: bold;
    color: #3cb372;
    background-color: #b22222 !important;
}

Hello Harry,

If you want to style your application, you really need to learn to work with CSS (beyond the very basic), and understand how CSS works in OutSystems, like which files with CSS are generated and used in each page, in which order they are loaded, etc.

I recommend you to do an online course on CSS, or even study by the well known W3 School.

In the online training there is also one presentation on themes that you should review.

Besides, usually we use the browser inspector to find out which are the selectors that are forcing a style in the widgets we want to customize, in order to define the best way to overwrite them.

Also, I strongly advise against using !important. It is really a very bad practice (even if in very rare situations we are obligated to use, because someone already used before and we can't change this.

Cheers

Eduardo Jauch

I think it's careful practice... considered practice... use only when needed practice... but not a very bad practice.

Low code goes out the door when I have to spend hours digging through rendered css to find out why I cannot change the background color of an input field.

Hi Davidk,

Bad practice is not forbiden practice :)

To use !Important is a very bad practice beause it defeats one of the main purposes of the CSS that is its ability to easily change style. When you use !important you are killing this ability. Same thing goes to use inline style. Very bad practice for many reasons. 

Personally, with inspect, I never spent more than 5 minutes to find a sneaky selector and the solution to overwrite it.

But the !important already gave me LOTS of trouble...

:)

Cheers,
Eduardo Jauch

Hi Eduardo,

I know how OS is handling CSS. It's more the way the new Visual Style Editor works.

>>Besides, usually we use the browser inspector to find out which are the selectors that are forcing a style in the widgets we want to customize, in order to define the best way to overwrite them.<<

I agree with DavidK that this should not be the case with a low code platform (even if it takes only 5 minutes). Also I think that if I can use extended property 'style' this also should be made possible in the Visual Style. So a 'click  to add a style to this element' apart from the already existing 'click  to add a class to this element' should be added IMO and we'll all be happy (even if one considers it bad practice). Apart from this, thaks again for explaining and sharing thoughts.

Regards, Harry 

I feel something is off with the Visual Style Editor... that it will let me set a value for background-color and not use it.  I've not seen where that hover message is displayed... " "property is set in a CSS rule with higher priority".  Then again, it's just in it's first release so I'm sure there's lot's more great stuff in store.

I think I've run into a !important issue a couple of times in the last 5 years... but nothing too horrible... and it's sure saved the day more than once when rendered systems take over classes.

As I've intimated, it must be used carefully.  In this case... I've not seen a solution proposed that I understand and can follow.  It could be that I'm quite new to OS... but then again not new to CSS etc.

Well...

The only times I had to use !important where when someone used before one, in a place I was not allowed to change, or when they used inline style (another very bad practice). When someone uses an !important or inline style, they make life difficult to everybody else later...

So, I simply don't use it unless someone else already complicated my life using those two bad practices in places I can't change myself to put the way it should be. 

But the time I already spend looking for the selector being applied in order to overwrite it is so small, that this do not bother me.

And, of course, OutSystems has lots of room to growth and improve, and it is being doing this for quite a long time.

Cheers,
Eduardo Jauch

Hello, I can help!

I have a problems with rendering in browser  Mozilla.

I'am using CSS in container : Extended Properties : style : 

"height:100%; background-color:#FFF; !important "


The container it's in the  Header(WebBlock).

The rendering of color occurs only in browser Chrome and in the Mozilla does not work.


Thanks!!


Vanessa Spinola wrote:

Hello, I can help!

I have a problems with rendering in browser  Mozilla.

I'am using CSS in container : Extended Properties : style : 

"height:100%; background-color:#FFF; !important "


The container it's in the  Header(WebBlock).

The rendering of color occurs only in browser Chrome and in the Mozilla does not work.


Thanks!!


Hi,

first of all, you should prevent !important, it's better to fix it from the source than to fix it at the end.

it's really is a band-aid.

check: https://css-tricks.com/when-using-important-is-the-right-choice/

any case, it should be:

background-color:#FFF !important;

notice the semi-colon at the end!


J. wrote:

Vanessa Spinola wrote:

Hello, I can help!

I have a problems with rendering in browser  Mozilla.

I'am using CSS in container : Extended Properties : style : 

"height:100%; background-color:#FFF; !important "


The container it's in the  Header(WebBlock).

The rendering of color occurs only in browser Chrome and in the Mozilla does not work.


Thanks!!


Hi,

first of all, you should prevent !important, it's better to fix it from the source than to fix it at the end.

it's really is a band-aid.

check: https://css-tricks.com/when-using-important-is-the-right-choice/

any case, it should be:

background-color:#FFF !important;

notice the semi-colon at the end!



Ok, thank You!!