I have an aspx page with 3 Telerik RadGrids on it. On one of them I need to override the default styling which I have done with this code:
<style type="text/css">
.RadGrid .rgHoveredRow {
background: #25A0DA !important;
color: white !important;
}
.rgAltRow, .rgRow {
cursor: pointer !important;
}
</style>
The problem is that this is applying the to all the radgrid controls. How could this code be changed to apply it to only the radgrid control called Radgrid1?
You should prefix the selectors with the grid's id
<style type="text/css">
#Radgrid1.RadGrid .rgHoveredRow {
background: #25A0DA !important;
color: white !important;
}
#Radgrid1 .rgAltRow,
#Radgrid1 .rgRow {
cursor: pointer !important;
}
</style>
Depending on the resultant HTML you may need to change the first selector to #Radgrid1 .RadGrid .rgHoveredRow notice the extra space
"radgrid control called Radgrid1" you mean it's its name? if so -
.RadGrid[name=Radgrid1] .rgHoveredRow {
background: #25A0DA !important;
color: white !important;
}
Related
I want to customize the placeholders which comes inside the modal i.e , those comes under class styled-input.
I tried with the following CSS but it doesn't seems working.
.styled-input::-webkit-input-placeholder {
color: blue !important;
}
.styled-input:-moz-placeholder {
color: blue !important;
}
.styled-input::-moz-placeholder {
color: blue !important;
}
I'm using ZK and I want to make use of the ZK sclasses for the items in my .zul files.
I saw that you can use things like :
<style>
div.z-tree {
background: none !important;
background-image: none !important;
border: none !important;
}
div.z-tree-body {
background: none !important;
}
tr.z-treerow-seld, tr.z-treerow-over {
background: #00533f !important;
}
div.z-treecell-cnt {
color: #5555ff;
}
.test-class div.z-treecell-cnt {
color: #ff5555 !important;
}
</style>
Where can I find all those styles, like z-tree-body that I can use and all the attributes I can assign to them or how to search for them?
When I need to override some CSS, I always search the specific CSS classes with the browser developer tools.
Because you want to override the CSS of some nodes but not all, try to use sclass to a specific class of your own.
Example :
<style>
.red {
color:red;
}
<style/>
<label sclass="#load(empty vm.property?''':'red')" />
You don't need to use the zk classes if it's for particularisme cases. For overriding them all, you can beter use the zk classes.
In the HTML below, there are three <style> blocks. The second block is the unwanted one, which makes the image disappears when mouse hover. The first two blocks are un-editable. We have to use the third block to cancel out the effect of the second block. Given an example of the third block below, but that does NOT work.
<!DOCTYPE html>
<html>
<head>
<style>
a {
display: inline-block; width: 280px; height: 32px;
background-image: url('http://www.w3schools.com/images/w3logotest2.png');
}
</style>
<style>
/* some bad guy did this */
a:hover {
background-image: none;
}
</style>
<style>
/* to revert what the bad guy did */
/* but this is NOT work! */
a:hover {
background-image: inherit !important;
}
</style>
</head>
<body>
</body>
</html>
Thanks very much for you inputs.
Note that, (sorry, i didn't make it clear enough), this is just an example. In the real case, there are many <a> with the first block setting them to different images. Just Only One second block ruins them all. As there are many (unlimited in fact, as it is a dynamic page) <a>, it is impossible to handle them one by one. I wish to have only one third block, that can revert the effect of the evil second block. Thanks a lot.
write:
<style>
a:hover {
background-image: url('http://www.w3schools.com/images/w3logotest2.png');
}
</style>
It's a typo: you have one extra } in your style, remove this.
a {
display: inline-block; width: 280px; height: 32px;
background-image: url('http://www.w3schools.com/images/w3logotest2.png'); }
}
it should like this:
a {
display: inline-block; width: 280px; height: 32px;
background-image: url('http://www.w3schools.com/images/w3logotest2.png');
}
And also provide background-image url because inherit just inherits from it's parent not previously defined.
I think I understand you now.
Each anchor has a different background image.
Some guy went and set that url to none on hover. (and you obviously have no access to the markup)
Now you want to return that url on hover.
Well, sorry, but as far as I know you can't do this in CSS.
CSS has no 'undo' in this context.
See this SO answer.
If this is the only block of anchor elements you could use nth-child to target the second one.
a:nth-child(2):hover {
background-image: url('http://www.w3schools.com/images/w3logotest2.png'); }
}
FIDDLE
The anchor element in question must have a value for href so you could target that via the attribute selector
a[href="http://your-website"]:hover {
background-image: url('http://www.w3schools.com/images/w3logotest2.png'); }
}
FIDDLE
If you hover over the second element in the above fiddle, you'll see that hovering over it doesn't make it disappear.
Try this:
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<style>
a {
display: inline-block; width: 280px; height: 32px;
background-image: url('http://www.w3schools.com/images/w3logotest2.png');
}
</style>
<style>
/* some bad guy did this */
a:hover {
background-image: none;
}
</style>
<style>
/* to revert what the bad guy did */
/* but this is NOT work! */
.toggle-a:hover {
background-image: inherit !important;
}
.toggle-a a{
float: left !important;
}
.bg-hover{
background-image: inherit !important;
}
</style>
</head>
<body>
<div class="toggle-a">
<a class="overwrite" href="http://www.w3schools.com/"></a>
<div>
<script>
$(function(){
$('.overwrite').mouseover(function(){
$(this).addClass('bg-hover');
}).mouseout(function(){
$(this).removeClass('bg-hover');
});
});
</script>
</body>
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
Is it possible to give a whole set of styles supreme importance?
Ie, early on you might have the following default css:
<link rel="stylesheet" href="/style.css" type="text/css" media="screen" />
and inside it has
body {
background: #000;
}
h1 {
color: #fff;
}
But then(!) you decide to make things exciting and have some more css inside the tag that is the same but different:
<style type="text/css">
body {
background: #fff;
}
h1 {
color: #000;
}
</style>
For whatever reason, the styles inside style.css that are linked in take importance over the ones I'm putting in statically.
What I'd like to know is, is there a way of umbrella'ing a whole bunch of styles so they take the highest importance? The best I know is
<style type="text/css">
body {
background: #fff !important;
}
h1 {
color: #000 !important;
}
</style>
Which starts to get a bit tedious if there are many styles.
add a single class to body, ie body class="stylecatcher" or whatever
then you can style (and override default styles) easily
<style type="text/css">
body.stylecatcher {
background: #fff;
}
.stylecatcher h1 {
color: #000;
}
</style>
I didn't find it to be a good practise to use the !important selector.
What you need is called specificity. From the w3 here and here and adobe link
Typically in CSS if you add a selector that is the same further down in the document, the one closest to the end (the highest line number) will be taken into effect.
<style type="text/css">
body {
background: #000;
}
h1 {
color: #fff;
}
body {
background: #fff;
}
h1 {
color: #000;
}
</style>
The background would be white and the font color black.