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

dropdown background color

7 Answers 43 Views
ToolBar
This is a migrated thread and some comments may be shown as answers.
Albert Shenker
Top achievements
Rank 1
Veteran
Albert Shenker asked on 14 May 2013, 09:57 PM
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; }

7 Answers, 1 is accepted

Sort by
0
Kate
Telerik team
answered on 15 May 2013, 03:17 PM
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
If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
0
Albert Shenker
Top achievements
Rank 1
Veteran
answered on 15 May 2013, 03:40 PM
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?
0
Magdalena
Telerik team
answered on 20 May 2013, 03:45 PM
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
If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
0
Albert Shenker
Top achievements
Rank 1
Veteran
answered on 06 Jun 2013, 03:54 PM
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.
0
Ivan Zhekov
Telerik team
answered on 11 Jun 2013, 01:34 PM
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
If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to the blog feed now.
0
Albert Shenker
Top achievements
Rank 1
Veteran
answered on 11 Jun 2013, 02:07 PM
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.
0
Ivan Zhekov
Telerik team
answered on 17 Jun 2013, 07:05 AM
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
If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to the blog feed now.
Tags
ToolBar
Asked by
Albert Shenker
Top achievements
Rank 1
Veteran
Answers by
Kate
Telerik team
Albert Shenker
Top achievements
Rank 1
Veteran
Magdalena
Telerik team
Ivan Zhekov
Telerik team
Share this question
or