Custom CSS not working

edvwruhs

I have 3 buttons in a formular that I want to style independently with custom css. I assign a css class to each button and I created a custom css file in the AwareIm folder (AwareIM/Custom/CSS/MyFolder).

The problem is when trying to style (box-shadows, text-weight, etc.) the buttons nothing happens, why?

Is this because the KendoUI overwrites my changes?

Just to see what would happen I went to the kendo.bootstrap.min.css and added a box-shadow and voila it changed.

Any ideas how can I get this to work?

Best Regards

Jaymer

With a screenshot, show where you are applying the css.

hpl123

edvwruhs wrote
I have 3 buttons in a formular that I want to style independently with custom css. I assign a css class to each button and I created a custom css file in the AwareIm folder (AwareIM/Custom/CSS/MyFolder).

The problem is when trying to style (box-shadows, text-weight, etc.) the buttons nothing happens, why?

Is this because the KendoUI overwrites my changes?

Just to see what would happen I went to the kendo.bootstrap.min.css and added a box-shadow and voila it changed.

Any ideas how can I get this to work?

Best Regards

Not sure why the style isn´t applied, try emptying cache and see if something happens then? Another thing you can do is, use the browser inspector to go through the styles applied for a particular button and if the browser has the CSS styles etc. "loaded", you should see the class/style you are trying to apply and see if it has been applied or not and in many cases, you can also figure out why it hasn´t been applied.

edvwruhs

Jaymer wrote
With a screenshot, show where you are applying the css.

I applied the css class in the button settings and then I created a css-file in the CSS Folder (AwareIM/Custom/CSS/MyFolder/MyCssFile)

edvwruhs

hpl123 wrote
edvwruhs wrote
I have 3 buttons in a formular that I want to style independently with custom css. I assign a css class to each button and I created a custom css file in the AwareIm folder (AwareIM/Custom/CSS/MyFolder).

The problem is when trying to style (box-shadows, text-weight, etc.) the buttons nothing happens, why?

Is this because the KendoUI overwrites my changes?

Just to see what would happen I went to the kendo.bootstrap.min.css and added a box-shadow and voila it changed.

Any ideas how can I get this to work?

Best Regards

Not sure why the style isn´t applied, try emptying cache and see if something happens then? Another thing you can do is, use the browser inspector to go through the styles applied for a particular button and if the browser has the CSS styles etc. "loaded", you should see the class/style you are trying to apply and see if it has been applied or not and in many cases, you can also figure out why it hasn´t been applied.

I tried that, the only thing I could see what maybe causes the problem is in the Network Section of the Browser Inspector (Google Chrome), it shows that my CSS-file got the Status 304, wich basically means that the client redirection response code indicates that there is no need to retransmit the requested resources, it is an implicit redirection to a cached resource.

But I am not really sure how I can solve this problem. Already emptied the cache.

joben

CTRL+SHIFT+R will force the website to load with cache emptied.

If that doesn't work, try renaming the CSS file. As far as I know, AwareIM will load the CSS file regardless of its name, as long as it resides in the correct folder.

edvwruhs

joben wrote
CTRL+SHIFT+R will force the website to load with cache emptied.

If that doesn't work, try renaming the CSS file. As far as I know, AwareIM will load the CSS file regardless of its name, as long as it resides in the correct folder.

I tried that, didnt work unfortunately and I got this error for the buttons

joben

What about hpl123's suggestion?

When using the element inspector on the button, you should be able to see all CSS rules that are being applied.

If you can see the rules from your custom CSS file but they are striked through, it is because another rule takes precedence. (See orange lines in the screenshot above for example how striked through looks like).
Then you have to use a more specific way to target the button.

If you can't see any references to your CSS file at all when inspecting your button, it is because the CSS file is wrong in some way.
The CSS file name is displayed in green circle in the screenshot above.
Maybe you spelled the class name wrong, or maybe there is a syntax error in your CSS file so that some rules are not being loaded properly. You can use the Jigsaw service to validate your CSS file: https://jigsaw.w3.org/css-validator/

edvwruhs

joben wrote
What about hpl123's suggestion?

When using the element inspector on the button, you should be able to see all CSS rules that are being applied.

css.png

If you can see the rules from your custom CSS file but they are striked through, it is because another rule takes precedence. (See orange lines in the screenshot above for example how striked through looks like).
Then you have to use a more specific way to target the button.

If you can't see any references to your CSS file at all when inspecting your button, it is because the CSS file is wrong in some way.
The CSS file name is displayed in green circle in the screenshot above.
Maybe you spelled the class name wrong, or maybe there is a syntax error in your CSS file so that some rules are not being loaded properly. You can use the Jigsaw service to validate your CSS file: https://jigsaw.w3.org/css-validator/

Unfortunately there is no reference to my CSS file, I checked the spelling of my file and the syntax, I also did the CSS file validation, it worked perfectly and everything is correct, but for some reason it still doesnt work :?

hpl123

edvwruhs wrote
joben wrote
What about hpl123's suggestion?

When using the element inspector on the button, you should be able to see all CSS rules that are being applied.

css.png

If you can see the rules from your custom CSS file but they are striked through, it is because another rule takes precedence. (See orange lines in the screenshot above for example how striked through looks like).
Then you have to use a more specific way to target the button.

If you can't see any references to your CSS file at all when inspecting your button, it is because the CSS file is wrong in some way.
The CSS file name is displayed in green circle in the screenshot above.
Maybe you spelled the class name wrong, or maybe there is a syntax error in your CSS file so that some rules are not being loaded properly. You can use the Jigsaw service to validate your CSS file: https://jigsaw.w3.org/css-validator/

Unfortunately there is no reference to my CSS file, I checked the spelling of my file and the syntax, I also did the CSS file validation, it worked perfectly and everything is correct, but for some reason it still doesnt work :?

If you find no reference to the file, try doublechecking the folder name and also make sure the CSS file is directly in the folder and not in a subfolder i.e if your app name is MyApp the folder has to be called "MyApp" and be placed in the right place (Custom/CSS/MyApp).