Change *ALL* green to another color ?

[Barry]

Hi,

I'm using the *Black* skin. Everywhere it uses green as a default (hover and select text in drop-downs, text area borders on select etc.) - I'd like to be able to change it to another color.

I am sure that you have not hard-coded the default green everywhere, and there must be a "master setting" to control it. Where would I find it ?...perhaps a master over-ride setting in the controls properties ?

Thanks,

Bazz

[Bozhidar]

Hi Bazz,

Each of the controls included in the RadControls for ASP.NET AJAX suite is styled by two CSS files that are loaded in a certain order. The first one - ControlName.css, also called the base stylesheet contains CSS properties and values that are common for all skins, i.e. it is layout-specific, not skin-specific. These are CSS float, padding, margin, font-size, font-family, etc. In the general case, when creating a custom skin for a control this file should not be edited, unless the custom skin needs different sizes, paddings or margins.The second file represents the actual skin of the control, and its name consists of the control name plus the skin name, i.e. FormDecorator.Default.css. Upon creating a custom skin for the control, one should edit that particular file, as it contains skin-specific CSS properties, and references to images, colors, borders and backgrounds.

So in order to change all green to another color you have two options.

1. To override the selectors that are using the green color with heavier selectors.
2. To create RadFromDecorator Custom skin based on the embedded Black skin, and to change the green color. You could also use Visual Style Builder to do that.

The green color in the FormDecorator skin specific CSS file is: #9eda29 you could use find and replace to change it with your desired color.

Regards,
Bojo
the Telerik team

[Barry]

Thanks for the info...I'm running into the same issue in FORM DECORATOR and the MENU components...so the below is a bit of cross- pollinization, but the same gist applies to both it would seem (just assume the scenario below for the MENU component as applied to the FOR DECORATOR):


I edited the .CSS file directly (/Skins/Black) replacing all instances of #9eda29 with the color I want, and also placed this onto the top of the page I'm using the control in:

 <style type="text/css">

.RadMenu_Black a.rmLink:hover {

color:#F0CD5B!important;

}

 </style type="text/css">

 and the font colors have chaged - so good there !

------------------------------------------------------------------

I opened the Sprites graphic files in PhotoShop (changed them to RGB), penciled over the left and right arrows with the color I want, switched back to Indexed color, and saved - however, the green arrows are still there when I run the control onscreen...

------------------------------------------------------------------


I'm 1/2 way to where I need to be, but any additional info you may have on editing the existing Black skin graphic set (/Skins/Black/Menu) would be appreciated.

Thanx,

Bazz

[Bozhidar]

Hello Bazz,

I have tested the same solution and it works perfectly. The code I used was the following:

<style type="text/css">
        .RadMenu_Black a.rmLink:hover
        {
            color: #F0CD5B !important;
        }

        .RadMenu_Black .rmRootGroup,
        .RadMenu_Black a.rmLink,
        .RadMenu_Black .rmText,
        .RadMenu_Black .rmLeftArrow,
        .RadMenu_Black .rmRightArrow,
        .RadMenu_Black .rmTopArrow,
        .RadMenu_Black .rmBottomArrow
        {
            background-image: url(rmSpriteNew.png) !important;
        }
    </style>

Attached is SpriteFix.zip containing a small project with editted sprite which overrideds the existing one with the green hover arrows.

Best wishes,
Bojo
the Telerik team

[Barry]

Awesome support....thank you...it worked !

I will of course keep this over-ride method in mind for your other controls...

Thanx,

Bazz