custom.css Trouble Modifying Elements
Timothy_Boyce
Customer IT Monkey ✭
This article is a great starting point, however I am just not comprehending. It is not clicking. Is there a more in depth article on how to identify elements, using the inspect feature of the web browsers, in order to customize the look of the Portal?https://support.cireson.com/KnowledgeBase/View/43#/
Example: I am trying to identify the error text received when a required field is missed. What I have below is not working.
The Element in question of my Request Offering is:
<span class="k-widget k-tooltip k-invalid-msg field-validation-error" data-for="4fa415ad-5209-4933-b5c9-312f2f491489" data-valmsg-for="4fa415ad-5209-4933-b5c9-312f2f491489" id="4fa415ad-5209-4933-b5c9-312f2f491489_validationMessage" role="alert"><span class="k-icon k-i-warning"> </span> This is a required field.</span>
The overall goal is to change the text and boarder of this warning to shades of Red for visability. The modification I placed in the custom.css is:
.k-widget.k-tooltip {
border-color: ##ff0000;
background-color: #fff;
color: #b20000;
}
.k-widget.k-tooltip {
background-image: none;
}
span.k-tooltip {
position: static;
display: inline-block;
border-width: 2px;
padding: 2px 5px 1px 6px;
}
span.k-tooltip {
position: static;
display: inline-block;
border-width: 1px;
padding: 2px 5px 1px 6px;
Best Answer
-
OptionsTimothy_Boyce
Customer IT Monkey ✭
I was able to resolve my issue. It took a lot of trial and error. I am not a web developer \ programmer
@Shane_White led me in the correct directions. I added the following to my custom.css
The class I was looking for was the first three in the highlighted screen shot above.
/* BEGIN CSS text-transform Property 'Alert: "This is a required feild." */
.k-widget.k-tooltip.k-invalid-msg {
background-image: none;
border-color: #ff0000;
background-color: #fff;
color: #ff0000;
}
/* END CSS text-transform Property 'Alert: "This is a required feild." */
0
Answers
Hi @Timothy_Boyce
I think I am understanding what you are after, you need to target the right class in .css
Add this in and let me know if this is what you are trying to accomplish
.k-widget.k-tooltip.k-invalid-msg.field-validation-error {
background-color: red;
}
Thanks,
Shane
@Shane_White
almost, your example changes the title to Red. What I am looking for is for the Info Warning of the required user input which was not filled out. See Screenshot. The text and box for "^ This is a required feild" is the font I am trying to change.
I was able to resolve my issue. It took a lot of trial and error. I am not a web developer \ programmer
@Shane_White led me in the correct directions. I added the following to my custom.css
The class I was looking for was the first three in the highlighted screen shot above.
/* BEGIN CSS text-transform Property 'Alert: "This is a required feild." */
.k-widget.k-tooltip.k-invalid-msg {
background-image: none;
border-color: #ff0000;
background-color: #fff;
color: #ff0000;
}
/* END CSS text-transform Property 'Alert: "This is a required feild." */