Change Metro Color

13 posts, 1 answers
  1. iomega 55
    iomega 55 avatar
    64 posts
    Member since:
    Dec 2004

    Posted 26 Aug 2012 Link to this post

    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.
  2. Tsvyatko
    Admin
    Tsvyatko avatar
    832 posts

    Posted 27 Aug 2012 Link to this post

    Hello,

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

    Regards,
    Tsvyatko
    the Telerik team

    Explore the entire Telerik portfolio by downloading Telerik DevCraft Ultimate.

  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. iomega 55
    iomega 55 avatar
    64 posts
    Member since:
    Dec 2004

    Posted 27 Aug 2012 Link to this post

    My question is referred for asp.net ajax (RadControls for Metro).
  5. Answer
    Bozhidar
    Admin
    Bozhidar avatar
    677 posts

    Posted 29 Aug 2012 Link to this post

    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
    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.
  6. Hernani
    Hernani avatar
    1 posts
    Member since:
    Jan 2013

    Posted 19 Feb 2013 Link to this post

    Hello,

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

    Tks.
    Hernani


  7. Bozhidar
    Admin
    Bozhidar avatar
    677 posts

    Posted 22 Feb 2013 Link to this post

    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
    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.
  8. Massimiliano
    Massimiliano avatar
    184 posts
    Member since:
    Oct 2012

    Posted 25 Mar 2013 Link to this post

    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. 
  9. Bozhidar
    Admin
    Bozhidar avatar
    677 posts

    Posted 27 Mar 2013 Link to this post

    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
    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.
  10. Massimiliano
    Massimiliano avatar
    184 posts
    Member since:
    Oct 2012

    Posted 27 Mar 2013 Link to this post

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

  11. Emmanuel
    Emmanuel avatar
    2 posts
    Member since:
    Aug 2014

    Posted 01 Sep 2014 in reply to iomega 55 Link to this post

    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;
    }
  12. Emmanuel
    Emmanuel avatar
    2 posts
    Member since:
    Aug 2014

    Posted 01 Sep 2014 in reply to Emmanuel Link to this post

    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;
    }
  13. Allen
    Allen avatar
    50 posts
    Member since:
    Mar 2011

    Posted 03 Jul 2015 in reply to Bozhidar Link to this post

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

    Posted 07 Jul 2015 Link to this post

    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
    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 Feedback Portal and vote to affect the priority of the items
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017