dropdown background color

[Albert Shenker]

I am using the following css to change the default Metro Skin for the toolbar control. I need the toolbar to be a different color other that white (by the way, white was an odd choice for the primary color of a control that needs to be as prominent as a toolbar). Nevertheless, everything in my style works (I remove the toolbar borders as well), however, now I see that dropdown buttons aren't showing their text. This is because I set the button text color to white so it shows up against the now colored toolbar background. How do I set the background-color and/or text color of dropdown items only (ie dropdown buttons, splitbars buttons, etc.) and leave the main toolbar text as white?

Thanks.

.FullBorderlessToolbar .rtbOuter, .rtbMiddle
{
    background-color: #4BB0E7 !important;
border: 0px !important;
}

.FullBorderlessToolbar .rtbTemplate, .rtbWrap {
  color: #ffffff !important;
}

.FullBorderlessToolbar .rtbSplBtnFocused .rtbWrap,
.FullBorderlessToolbar .rtbItemFocused .rtbWrap,
.FullBorderlessToolbar .rtbItemHovered .rtbWrap {
  background-color: #1485ba !important; }

[Kate]

Hello Albert,

To change the text color of only the elements in the dropdowns in the RadToolBar control you can use the following css class selector:

div.RadToolBarDropDown_Default .rtbWrap,
     div.RadToolBarDropDown_Default .rtbTemplate {
         color: red;
     }

Note that it is applied when the skin is set to the Default one. In case, however, you need to apply any other skin you will need to change the name of the class selector to match the name of the skin as explained here.

Kind regards,
Kate
the Telerik team

[Albert Shenker]

as you can see I am using a custom class to style the toolbar which isn't tied to one specific skin or another. Isn't there a way for me to alter this custom class?

[Magdalena]

Hello Albert,

 To set the background-color and/or text color of drop-down items only you can use the following class selector:

.RadToolBarDropDown .rtbItem{
    background: #1485ba;
}

Regards,
Magda
the Telerik team

[Albert Shenker]

Magda, can you explain why Telerik decided to make the Metro skin version of the Toolbar entirely white? Aside from the inherent aesthetic issues this raises, it represents a departure from the practice of making the toolbar and menu skins "look" similar. The metro menu is blue with white lettering. The metro toolbar buttons sometimes appear blue with white lettering, but in their normal state they are white with grey lettering. This makes it awfully difficult to create consistent and good looking interfaces with both toolbars and menus.

[Ivan Zhekov]

Hi, Albert.

When we first released the Metro skin for RadControls (in all suites), we made it to look that way so we would have a contrasting control (everything else was blue / white).

Usually, the toolbar has the appearance of a button in normal state, while its own buttons are chrome less. On hover and press the buttons of the toolbar should look like the rest of the buttons.

You are however right about the controls not being uniform and this is why we'll be reviewing the Metro skin family this Q (read for 2013 Q3).

Regards,
Ivan Zhekov
Telerik

[Albert Shenker]

Ok. I've almost always used toolbars and menus interchangeably, so for my purposes making them look the same is usually best. I can see how for some others it would benefit to have them contrast somewhat, but I think the stark contrast between the current controls is too much. That being said, I suppose you have a problem since the metro skin is supposed to be fairly monochrome. My suggestion would be that you make the metro toolbar and menu skins look pretty much the same (hopefully not white) and if people need to add contrast, they can use one of the other skins (default, or some other monochromatic skin) in combination with Metro for a menu/toolbar combined interface.

On the topic of the Metro skin... it seems it would be very beneficial to users to be able to make use of this skin but modify the particular colors being used. Let's say I wanted a more or less monochrome skin but with a "red" theme instead of the blue or black themes you use in your current metro-based skins. I am certain that a custom skin based on Metro could be developed, but creating custom skins is a problem waiting to happen. The second you make some sort of structural change to the control or general change to the way skins work (as you have numerous times), the custom skin could be broken. So ideally, it would be nice if there were some way to alter the Metro appearance without creating a custom skin. I don't know what would be required under the hood, but the way it would work is.. the user would specify the Metro skin (or some other name, if that is what is necessary), and then they would set a series of color values. such as PrimaryColor, SecondaryColor, Color3. etc... whatever is necessary for the skin. These color values could be set in declaration, or perhaps in some sort of configuration file. Anyhow, these color settings would be applied to the skin no matter what control used it. In this way, one could modify the look and feel of their app using a small set of color settings and a special skin designed to use them. This would be easy to maintain long term, as opposed to an entire custom skin.

Anyhow, such a special skin would be difficult, if not impossible to implement in general, because of your use of various gradients and sprites. However, I imagine you don't use gradients or sprites for the metro skin since it is monochromatic. Perhaps this means the opportunity is their to create "chameleon" type skin which is like metro, but can be altered by setting a few color parameters.

[Ivan Zhekov]

Hi, Albert.

Point taken. Since we now have the two versions of the Metro skin (Metro and BlackMetro) we could consider revising the toolbar to match the menu)

On the skin variations: it's quite easy actually. With the controls source we ship the skins as well. For some time now, we've been making the skins using a CSS pre-processosor, namely Sass.

In each skin folder we do have such file called __skin.SKINNAME.scss which has the color variables. Modifying the color variables recompiling the code will output a new skin.

Sprites and gradients are a bit different, due to browser implementation. For instance we use CSS gradients where possible. Those CSS gradients are controlled by variables as well vs. the static image gradients for other browsers. Creating image gradients on the fly is something we've been looking into, but so far we have no viable progress.

Regards,
Ivan Zhekov
Telerik