Change Metro Color

[iomega 55]

How can I change the default "blue" color of the metrotouch skin?

I need to have this color as the main color in the metrotouch skin hex #157164

Thanks in advance.

[Tsvyatko]

Hello,

 Are you refering to RadControls for Metro, rather than RadControls for WPF/Silverlight?

Regards,
Tsvyatko
the Telerik team

[iomega 55]

My question is referred for asp.net ajax (RadControls for Metro).

[Bozhidar]

Hello,

You have two options, the first one is not to create a custom skin based on MetroTouch, but to find each one blue colored element, to make its selector heavier, and to apply it the desired color/background color. This is harder, as it will be almost impossible to find all elements.

The second option is to create a custom skin based on MetroTouch skin. And again, under this option you have two sub options:

For both options you should choose a custom skin name, such as MetroTouchCustom, which will best fit your custom skin character.

and next you should choose one of the following options: to edit the CSS files directly, or to edit the SASS files.

1. Editing the CSS files is much easier if you don`t have knowledge about SASS. Just take all the CSS files from the MetroTouch folder, open them and using find and replace option change the default MetroTouch blue color  #25a0da to #157164. Save your files, and load your custom skin. It should use the new color already.

2. Editing the SASS file will allow you to change the #25a0da in only one file, where the SASS variables are stored. Then when saving the file, with will generate all CSS files with your new background color. The file containing the skin variables is called: __skin.MetroTouch.scss. For your convenience attached is MetroTouch.zip containing both SASS and CSS files.

More about SASS you could find at: SASS Lang.

To be able to edit SASS files in Visual Style Builder you will need to add a plugin called Mindspace Web WorkBecnh.

Kind regards,
Bozhidar
the Telerik team

[Hernani]

Hello,

There is provision for customizing theme colors in windows forms application?

Tks.
Hernani

[Bozhidar]

Hello,

Thank you for contacting us, but this actually a thread for customizing ASP.NET AJAX themes for Telerik RAD Controls, and not WinForms.

Anyway, if I understand you, you, you are searching for something like that: http://www.telerik.com/products/winforms/visual-style-builder.aspx

All the best,
Bozhidar
the Telerik team

[Massimiliano]

Where should we look for .scss skin files? I see you attached here the Metro skin with .scss sources but is there a repository with all of them?
Also do you think just setting a bigger (14px) font and relative new line height (20px?) and a font-family will mess up old skins?
Most of them are still very nice but with higher resolutions having a 14px base font and the possibility to use web-fonts would be nice.
So .scss could be a fast method for this kind of massive overhaul for all the skins. 

[Bozhidar]

Hello,

Customers who have the following licenses http://www.telerik.com/purchase.aspx also have source code included.

Since Q1 2013 in the source code for all SASS files are available. In the common case there is a single SASS file which stores all the variables for the skin.

Setting a a bigger (14px) font and relative new line height (20px?) and a font-family to the classic skin (Default, Outlook, Office2007 etc.) will most probably mess the controls layout. Not in each case, but you should check manually each different control. For example, it could change inputs height and it will messed the whole form, but in the case of a label, most probably it will not be breakable.

We have also several new skins which will look nice with higher resolutions - Silk, Glow, MetroTouch - also they have bigger sizes and font sizes and it is safe to experiment with them. Also, using SASS files could be really useful to create easily custom skins. You could even create your own variables to extend the skins appearance on your own.

Kind regards,
Bozhidar
the Telerik team

[Massimiliano]

Thank you Bozhidar! One thing is sure... not only you have the best RAD controls in the world but for sure the best support.

[Emmanuel]

hi, 
I use this, I hope it will be useful :)

copy and paste in your css class

.RadMenu .rmRootGroup {
    background: #157164 !important;
}

.RadMenu .rmRootLink {
    border: 1px solid #157164 !important;
}

[Emmanuel]

all necessary properties


.RadMenu_MetroTouch .rmRootGroup {
    background: #009845 !important;
}

.RadMenu_MetroTouch .rmRootLink {
    border: 1px solid #009845 !important ;
}
.RadMenu_MetroTouch .rmRootLink.rmFocused {
  border-color: white !important;
}
.RadMenu_MetroTouch .rmRootLink:hover {
  border-color: white !important;
}
:root .RadMenu_MetroTouch .rmRootLink:hover {
  border-color: rgba(255, 255, 255, 0.5) !important;
}

[Allen]

I do not see the .sass files in the downloaded skin zip files ( generated by stylebuilder.telerik.com).  Are they somewhere online?  Thank you.

[Vessy]

Hi Allen,

In order to download the source code of the controls (including the sass files), you should go to the download section in your Telerik account. You can navigate to this section by following the steps below:

• Log into your Telerik account.
• Go to Products & Subscription / DevCraft Complete option
• Click on the big blue Download button on the right of the loaded screen
• Find the UI for ASP.NET AJAX section and click the Browse all product files option on its right
• Download the Source code archive of the controls.

I hope this helps.

Regards,
Vessy
Telerik