How to override rules of style.css

Flow
1

Hello,

In my project I wanted to change the colour of the penal-headers. I tried to put the new CSS-rules into the styles.scss file at the following place:

[code]
@import “mytheme.scss”;
@import “addons.scss”;

.mytheme {
@include addons;
@include mytheme;

HERE
}
[/code]And then applied the CSS-Class via component.addStyle(Stylename). But unfortunately the rules I declare are always overriden by the valo style-rules. I tried to change it with the >-operator or the !important modifier. Nothing of this works, how can I change the color of the header of a panel?

2

Have you remembered to specify @Theme(“mytheme”) in your UI class?

3

Hello Tobias,

Assuming that there is a panel with a style name of
my-panel-style
 added to it, such as:

Panel myPanel = new Panel(); myPanel.addStyleName("my-panel-style"); To customize the apperance of the header you could add

.v-panel-caption-my-panel-style

 to your
style.scss
 to target the panel header:

.v-panel-caption-my-panel-style {
   // custom header style
}
4

Yes that’s what I already did. I thought this would be the right way, but the outcome is always the same, it doesn’t change anything. My style.scss looks like this:

[code]
@import “mytheme.scss”;
@import “addons.scss”;

.mytheme {
@include addons;
@include mytheme;

.v-panel-caption-my-panel-style {
background-image: linear-gradient(to bottom,#01DF3A 2%, #f6f6f6 98%);
}
}
[/code]And the Java-Code:

        Panel panelData = new Panel("Allgemeine Daten");
        panelData.setWidth("725"); 
        panelData.addStyleName("my-panel-style");

But there is no change. This is how it looks when I inspect the header. The style is simply overriden by the theme CSS:

5

Seems like you are not correctly using linear-gradient mixin.
Try with this in your scss

  .v-panel-caption-my-panel-style {
       @include linear-gradient(to bottom,#01DF3A 2%, #f6f6f6 98%);
  }
6

This is how it is made in the original style.css:

.mytheme .v-panel-caption { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; padding: 0 12px; line-height: 36px; border-bottom: 1px solid #d5d5d5; background-color: #fafafa; background-image: -webkit-linear-gradient(top, #fafafa 2%, #f6f6f6 98%); background-image: linear-gradient(to bottom,#fafafa 2%, #f6f6f6 98%); color: #464646; font-weight: 400; font-size: 14px; -webkit-box-shadow: inset 0 1px 0 white, inset 0 -1px 0 #eeeeee; box-shadow: inset 0 1px 0 white, inset 0 -1px 0 #eeeeee; text-shadow: 0 1px 0 rgba(255, 255, 255, 0.05); border-radius: 3px 3px 0 0; } I tried your way but that doesn’t lead to anything unfortunately.

7

That’s weird. Just tried it and got it working.
With the above code in styles.css I have the following rule overriding .v-panel-caption

.mytheme .v-panel-caption-my-panel-style { background-color: #01DF3A; background-image: -webkit-linear-gradient(top, #01DF3A 2%, #f6f6f6 98%); background-image: linear-gradient(to bottom,#01DF3A 2%, #f6f6f6 98%); } I attached some picture with my results

Marco

27206.png
27207.png

8

Thank you, that works perfectly!

What is the reason behind it? Why did it not work the way I did it since it looks almost the same.

9

Hi Tobias,

in your .scss code you got this

.v-panel-caption-my-panel-style { background-image: linear-gradient(to bottom,#01DF3A 2%, #f6f6f6 98%); } This way you are not using the linear-gradient mixin and after scss compilation the result (as you can see from your screenshots) is

background-image: linear, to bottom, #01DF3A 2%, #f6f6f6 98%; that is not a valid css rule (notice also the chrome warning sign).

Using the mixin in .scss file as following will produce the expected css rules after compilation

  .v-panel-caption-my-panel-style {
       @include linear-gradient(to bottom,#01DF3A 2%, #f6f6f6 98%);
  }

Let me know if the explanation is clear enough.

Marco

10

Yes thank you.
But now i stumbled upon a new problem: I wanted to resize a TextField but somehow element.style always overrides all CSS-rules I tried.

I tried to tag it with !important or set the width in the Java-Code itself, but elemnts.style always wins.

How can I alter the width without elements.style overriding my changes?

11

AFAIK TextField should not have stlye on element directly.
Could you give some more information (java code, screenshot of the applied css, etc)?

12

Hi Tobias,

The style of a text field can be modified via the
.v-textfield
 class (
text field documentation
). For example, the following with set the width to 400px (see attached image).

.v-textfield { width: 400px; } You could also add a custom style name to the text field and then customize it, but again this depends on what you have and what you want to achieve.

Hope this helps,
Goran
27301.png

13

Thank you
This did the trick for me:

.v-textfield { 
  width: 400px;
}
14

You are welcome.