How to give custom style to dojo ValidationTextBox?
We need to override the default css applied to dojo ValidationTextBox. Currently when the field is required, it shows some yellow background and a exclamation mark around the textbox.
See below
Or is it possible to remove the yellow background and the exclamation mark and just keep the tooltip error message?
.tundra .dijitSelectError .dijitButtonContents,
.tundra .dijitTextBoxError,
.tundra .dijitTextBoxError .dijitButtonNode {
border-color: #d46464;
}
.tundra .dijitError {
background-color: #d46464;
}
.tundra .dijitValidationTextBoxError .dijitValidationIcon {
background: url('http://cdn.sstatic.net/stackoverflow/img/sprites.png?v=5') no-repeat -55px -66px;
}
http://jsfiddle.net/cswing/Yytzj/
Related
I am trying to set the background color to transparent for this page:
.page-id-714 .container-fluid {
background-color: transparent;
}
But I do not seem to be able to address the correct class or item. Can anyone point me in the right direction?
You are setting it on the wrong class. You need to set it on
.top-stripe {
/* Current, it's set to background-color: #fbfbfb; */
background-color: transparent;
}
Make sure you declare the above after the selector which I've shared below, else you need to make your selector more specific, or you need to use !important which I would not recommend, or better, you remove top-stripe from that declaration altogether.
Here's the declaration on your webpage..
Try this:
.top-stripe {
background-color: transparent!important;
}
Hi I have this current CSS for fullCalendar (v 1.6.4):
.full-calendar .fc-content .fc-event-container .fc-event {
background: #ef6262!important;
border-color: #eb3d3d!important;
color: #fff!important;
border-radius: 0;
}
When I add a new Class to an event (based on some programming calculations) I do this:
event.className = 'paused-event';
calendar.fullCalendar('updateEvent', event);
My paused-event CSS is this:
.paused-event,
.paused-event div,
.paused-event span {
background: #71CCBF;
border-color: #65B7AB;
}
The background color changes correctly, the border stays the same as the default CSS.
Expectancy:
The event color AND border should change when the paused-event class is present.
The !importants are overriding the latest class properties. You could try to add !important to .paused-event properties as well, but the best would be to avoid any !importants and simply override by impacting with a deeper selector (although it's weird the background does change considering the important):
.class1 vs div.class1.class2 (deeper one)
Anyways, if you simply need to solve that and fast you can try:
.paused-event,
.paused-event div,
.paused-event span {
background: #71CCBF;
border-color: #65B7AB !important;
}
Yesterday I decided to try Polymer 1.0 and I'm already facing difficulties when trying to styling the paper-toolbar.
The documentation says that the background colour can be changed by using:
--paper-toolbar-background
But how can I use it on CSS?
I tried the following:
paper-toolbar {
--paper-toolbar-background: #e5e5e5;
}
Also this:
paper-toolbar {
--paper-toolbar {
background: #e5e5e5;
}
}
But neither worked. What is the correct way to do it?
Thanks.
If you are styling it on your main page, then you have to apply styles using <style is='custom-style'>. This is to make Custom CSS Properties work.
Applying is relatively easy. paper-toolbar provides 2 custom properties and one mixin. --paper-toolbar-background is a property that changes the background color of the toolbar while --paper-toolbar-color changes its foreground color. --paper-toolbar is a mixin applied to the toolbar.
To use these properties is just the same as applying styles in your elements. As an example
<style is="custom-style">
paper-toolbar {
--paper-toolbar-background: #00f; /* changes the background to blue*/
--paper-toolbar-color: #0f0; /* changes the foreground color to green */
--paper-toolbar: {
font-size: 40px; /* Change default font size */
}; /* Notice the semicolon here */
}
</style>
I couldn't find a solution to this problem either until recently. I have two toolbars and I didn't want to change the CSS for all toolbars just the header toolbar.
To change the CSS for every toolbar, in your external css file add the following:
paper-toolbar.paper-toolbar-0 {
background: orange;
color: red;
}
However, that doesn't address the problem. To change a single paper toolbar based on a class like the following:
<paper-toolbar class="header">
...
</paper-toolbar>
The above uses the class called "header" so in my CSS I added:
paper-toolbar.header {
background: orange;
color: red;
}
... and it worked! Yay! That means with this you should be able to override any CSS of any of the other elements doing the same thing. This is completely untested but I think it should work like:
<elementName>.<classname> {
...
}
Hope this all helps!
I want to set style for required and invalid fields for KendoUI items (for example different background color for required input).
Style that I am using is here:
.k-textbox>input[required],
.k-picker-wrap .k-input[required],
.k-datepicker .k-input[required],
.k-dropdown-wrap .k-input[required] {
background-color: yellow;
}
.k-invalid {
background-color: pink !important;
}
Here is jsfiddle: http://jsfiddle.net/spuljko/wTev8/8/
DatePicker works OK, but I can't set style for required or invalid combo box.
Try this,
.k-input, input.k-textbox, textarea.k-textbox, input.k-textbox:hover, textarea.k-textbox:hover, .k-textbox > input{
background-color: yellow !important;
}
.otherCombo .k-dropdown-wrap .k-input{
background-color: blue !important;
}
Demo:http://jsbin.com/ivoqup/12/edit
I have a textbox with some css property created by formHandler method.
When I check the textbox is empty and I applied another css class for red color in the border through jquery code is below
$('a,button').click(function () {
if($("#FHE_0_first_name").val()=="")
{
$("#FHE_0_first_name").addClass("errorCSS");
}
});
and my css is below
.errorCSS
{
clear:both;
border:1px solid #ff0000 !important;
background-color:#ffeeee !important;
}
The red color and background color just come and disappered how can i keep the neww css .
appreciated all suggestions
First you'll need to change your $(a,button) selector to $(a.button).