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
Custom CSS not working
Re: Custom CSS not working
With a screenshot, show where you are applying the css.
Click Here to see a collection of my tips & hacks on this forum. Or search for "JaymerTip" in the search bar at the top.
Jaymer
Aware Programming & Consulting - Tampa FL
Jaymer
Aware Programming & Consulting - Tampa FL
Re: Custom CSS not working
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 wrote: ↑Tue Jun 06, 2023 2:48 pm 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
Henrik (V8 Developer Ed. - Windows)
Re: Custom CSS not working
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.hpl123 wrote: ↑Tue Jun 06, 2023 4:23 pmNot 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 wrote: ↑Tue Jun 06, 2023 2:48 pm 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
But I am not really sure how I can solve this problem. Already emptied the cache.
Re: Custom CSS not working
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.
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.
Re: Custom CSS not working
I tried that, didnt work unfortunately and I got this error for the buttons
Re: Custom CSS not working
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/
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/
Re: Custom CSS not working
joben wrote: ↑Wed Jun 07, 2023 8:13 am 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
Re: Custom CSS not working
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).edvwruhs wrote: ↑Wed Jun 07, 2023 12:15 pmjoben wrote: ↑Wed Jun 07, 2023 8:13 am 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
Henrik (V8 Developer Ed. - Windows)