Skip to main content

MVC Themes with ThemeBuilder

Support for ThemeBuilder​

TCAdmin 2.0.149 and greater supports ThemeBuilder from telerik.com. Some ThemeBuilder themes are included with TCAdmin by default but you can create your personalized theme.

How to create a custom ThemeBuilder theme​

  • Go to the ThemeBuilder website and select Start Theming: https://themebuilder.telerik.com/aspnet-mvc
  • Select your base theme (Default, Bootstrap or material)
  • Leave all components selected, scroll to the bottom and click on Create.
  • Select color swatches to choose from predefined color schemes and adjust the colors as needed.
  • You may also change the border radius used by the controls. Default in ThemeBuilder is 2px. The TCAdmin NexT theme uses 8px.
  • When your theme is ready click on Download in the upper right corner.
  • Extract the zip. Keep the file named variables.scss in a safe place. You can use this file to update the theme in ThemeBuilder when needed.
  • Log in to TCAdmin. Go to Settings > Themes > Import ThemeBuilder CSS.
  • Select the .css that you generated and click on Import. If a file already exists with that name it will be overwritten.
  • Select your existing theme or create a new one.
  • Select your ThemeBuilder theme from the list and click on Apply these Colors. This will take the ThemeBuilder colors and apply them to MVC and ASP.NET content automatically.
  • In the Theme Options tab you can adjust the colors as needed.

Automatic Logo Color​

If you upload a black and white logo for your theme TCAdmin can change the color automatically to match your theme's primary color. You simply need to check "Change logo color to match theme". For more a accurate change of color make sure your logo is in black and white not grayscale.

Automatic Theme Updates​

With TCAdmin 2.0.149 all default themes are updated automatically. Default themes are the ones with id starting with 00000000.

If you have made any changes to the default themes make a backup of them before updating to 2.0.149. All modifications except logo and custom css will be reset.

After the 2.0.149 update (2.0.150 and greater)​

The default themes will be updated but you won't lose any of the changes made to them through the theme page (custom colors, css, logos, page title, etc).

The .cshtml files that are part of those themes will be replaced with the original. Any custom cshtml, images and other files that are not part of the original theme will NOT be removed.

The default themes will always be available in our forums: https://community.tcadmin.com/files/category/2-themes/

How To...​

How do I disable Font Awesome icons so I can use custom icons​

You can disable font icons in the theme's advanced tab.

How do I make my custom template's .css compatible with ThemeBuilder​

If your template uses a difference .css than the default you can create a file ThemeBuilder.Template.css in your template's folder. This file is the template used to create ThemeBuilder.css. When you save the theme settings reads ThemeBuilder.Template.css, replaces the variables and writes ThemeBuilder.css. You can use these variables:

%MVC.Body.Background.Color%
%MVC.Body.Color%
%MVC.Primary.Background.Color%
%MVC.Primary.Color%
%MVC.Secondary.Background.Color%
%MVC.Secondary.Color%
%MVC.Secondary.Background.Hover.Color%
%MVC.HyperLink.Color%
%MVC.HyperLink.Hover.Color%
%MVC.SideBar.Icon.Hover.Color%
%MVC.Information.Text.Color%
%MVC.Information.Background.Color%
%MVC.Success.Text.Color%
%MVC.Success.Background.Color%
%MVC.Warning.Text.Color%
%MVC.Warning.Background.Color%
%MVC.Error.Text.Color%
%MVC.Error.Background.Color%
%MVC.Logo.Filter.Color%
%MVC.Menu.Color%
%MVC.Menu.Hover.Color%
%MVC.Information.Label.Color%
%MVC.Success.Label.Color%
%MVC.Warning.Label.Color%
%MVC.Error.Label.Color%
%MVC.Border.Radius%