This is a migrated thread and some comments may be shown as answers.

Black skin: how to change some green text to red?

2 Answers 85 Views
FormDecorator
This is a migrated thread and some comments may be shown as answers.
Lukasz Kalbarczyk
Top achievements
Rank 1
Lukasz Kalbarczyk asked on 23 Mar 2010, 03:02 PM
I would like to have any other color than this green. The first text is colored by me, but the others are not. How can I do that with the other texts? Now I have:

#cont .rfdSelect_Black:hover .rfdSelectOuter,
#cont .rfdSelectBox_Black li:hover,
#cont .rfdSelectBox_Black .rfdSelect_selected,
#cont .RadForm_Black.rfdButton .rfdSkinnedButton:hover *,
#cont .RadForm_Black fieldset.rfdFieldset legend
{
    color: Red;
}


2 Answers, 1 is accepted

Sort by
0
robertw102
Top achievements
Rank 1
answered on 23 Mar 2010, 04:32 PM
Why not try adding the !important keyword next your color property. Like so:

color: Red !important;

That way any existing styles will not overwrite it.

I hope that helps.
0
Bozhidar
Telerik team
answered on 23 Mar 2010, 04:59 PM
Hi guys,

Robert, thank you for your suggestion. I just want to add some additional information on this:

As I see form the image attached , you would like to style the drop-down list and to define your own colors to be different than the Green in the Telerik skin, that you are using for your project.

Because the embedded styles from Telerik CSS file are applied after the styles that you specified, in the HTML document, they overwrite your new CSS properties and that`s why they could not be applied.

The solution should be to put your new CSS properties between the <head></head> tags of your document and to set them the !important rule to make them heavier than the embedded styles.
Here is an example of the CSS code that you could put in your document. For that example I used colors by my choice that you could change easily .

.rfdSelectBox_Black, .rfdSelectText
    {
        color: Red !important;
    }
.rfdSelect_selected
    {
        color: Blue !important;
    }
.rfdSelectBox_Black li:hover
    {
        color: Aqua !important;
    }

.rfdSelectBox_Black, .rfdSelectText - styles the unselected and mouse out items.
.rfdSelect_selected  - styles the selected item when it is clicked.
.rfdSelectBox_Black li:hover  - styles the on mouse on item.

Note that you could change that colors as you like. Please, find a screen shot of my example that shows the behavior that you would like to have. You could see all three states that were styled with the above CSS rules. You may also find helpful to take a look at Creating Custom Skins Tutorial at Telerik RadControls Help Site.
 
All the best,
Bozhidar Ruzhenov
the Telerik team

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.
Tags
FormDecorator
Asked by
Lukasz Kalbarczyk
Top achievements
Rank 1
Answers by
robertw102
Top achievements
Rank 1
Bozhidar
Telerik team
Share this question
or