How we can load and set Different Skins for Different Controls like vista skin for treeview
and sitefinity for panelbar.
Regards
12 Answers, 1 is accepted
Currently, there is no built-in way to support multiple skins on the same page. You can, though, use the following work-around:
- Open the CSS files for the themes that you want to place on the same page. For example, telerik.vista.css and telerik.hay.css.
- In each file, prefix all the rules with .skinname - for example, .vista .t-widget and .hay .t-widget. You may do it through a regular expression, like "^\." -> ".skinname .".
- Add the skinname class to a container around the component that you wish to skin with the given skin.
Sincerely yours,
Alex Gyoshev
the Telerik team
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 Public Issue Tracking system and vote to affect the priority of the items.
When using the window or the calendar control, no styles were used and the calendar/winder became largely transparent. I'm assuming this is because it could no longer find the appropriate styles to use.
Is there a workaround for this?
Thanks
Calendar popups, Window components, ComboBox dropdowns, etc. are direct children of the <body> element. If you have custom CSS classes applied to inner page elements and these classes are used in every CSS rule in the skins, you will not have any styles applied to the mentioned objects.
One option is to place a skin CSS class to the <body> element, however, this will make the corresponding styles be applied to all Telerik MVC elements on the page and you will have to increase the specificity of the other skin's styles in order to avoid conflicts.
Another option is to leave one of the two skins with no prefix and this skin will work for the DatePicker, Window and ComboBox. The other skin will use a prefix and will target components with no popups, such as the TreeView or PanelBar.
Regards,
Dimo
the Telerik team
Please refer to the following forum thread for more information:
http://www.telerik.com/community/forums/aspnet-mvc/grid/multiple-grids-on-one-page-and-have-separate-styling.aspx
Kind regards,
Dimo
the Telerik team
Hi Dimo,
I too have a requirement for using two skins on the same page.
My MVC3 application features a dark header bar with a light content area below.
The header area features has a menu control. I wish to use the "Black" skin here.
Everything else in the app I wish to use the Office2010Silver skin.
I followed your work-around instructions:
1. I edited the telerik.black.min.css file. Here's a snippet below:
...
.black .t-icon{background-image:url('Black/sprite.png')}
.black .t-editor .t-tool-icon{background-image:url('Black/editor.png')}
...
2. I wrapped my menu in a div and assigned the black class to it:
<div class = "black">
@(Html.Telerik().Menu()
.Name("menu")
...
3. I edited my _layout page to reference the .css
<head>
<title>@ViewBag.Title</title>
<link href="@Url.Content("~/Content/Site.css")" rel="stylesheet" type="text/css" />
<link href="@Url.Content("~/Content/2012.1.214/telerik.black.min.css")" rel="stylesheet" type="text/css" />
@(Html.Telerik().StyleSheetRegistrar().DefaultGroup(group => group.Add("telerik.common.css")
.Add("telerik.Office2010Silver.css").Combined(true).Compress(true)))
</head>
At first glance the menu now appears to use the black skin. However, it’s not 100% correct. The hover over effects on the items are using the office silver skins and text colurs are different. It’s as if I’ve missed something. Ive double checked that ive added .black to every selector in the telerik.black.min.css file.
Is it the case that these are in the common .css? I would really appreciate your assistance.
Best regards
Phil
The way you have registered both CSS files (Black and Silver), the Silver stylesheet will override all rules from the Black stylesheet, which have no higher specificity (i.e. those that miss your additional "black" class).
You need some more CSS rules like the ones in your point (1). For example
.black .t-state-hover { }
etc
Regards,
Dimo
the Telerik team
Hi Dimo,
Many thanks for your prompt response. Very impressed.
My novice .css skills let me down.
In terms of grouping and nesting selectors I’m a bit fuzzy:
Should I change :
.t-state-hover, .t-state-hover .t-link{color:#9eda29}
to
.black .t-state-hover, .black .t-state-hover .t-link{color:#9eda29}
or
.black .t-state-hover, .black .t-state-hover .black .t-link{color:#9eda29}
I owe you a beer.
Phil
The first option is correct. Since it will be difficult for you to write CSS without having the required expertise, I recommend you to get familiar with the following useful website:
http://css.maxdesign.com.au/selectutorial/
Regards,
Dimo
the Telerik team
I've editted the whole telerik.black.min.css file now.
Menu style is still not quite right?
menu item hover colour is not green
visited menu item different colour
Posted a piccy of it on photobucket:
http://s1259.photobucket.com/albums/ii553/smith_ph/?action=view¤t=BlackMenu.jpg
Here's my edited file. Can you spot what i've missed?
/* Black theme*/.black .t-widget, .black .t-input{border-color:#080808;/*font-size:.75em;/* 12px base,if there are no inherited font-sizes(MVC default) */background-color:#4f4f4f}
/* .small .t-widget{font-size:.687em}
/* 11px base,if there are no inherited font-sizes(MVC default) */.black .t-header, .black .t-grid-header{border-color:#080808;background:#050505 url('Black/sprite.png') repeat-x 0 -852px}
.black .t-icon{background-image:url('Black/sprite.png')}
.black .t-editor .t-tool-icon{background-image:url('Black/editor.png')}
.black .t-loading, .black .t-widget .t-loading{background:transparent url('Black/loading.gif') no-repeat 0 0}
.black .t-widget, .black .t-link, .black .t-popup, .black .t-input{color:#fff}
.black .t-other-month .t-link{color:#6f6f6f}
.black .t-group, .black .t-content, .black .t-editable-area{border-color:#080808;background-color:#4f4f4f}
.black .t-colorpicker .t-arrow-down{border-color:#080808}
.black .t-separator{border-color:#323232;background-color:#080808}
.black .t-alt{background-color:#494949}
.black .t-state-default{border-color:#080808}
.black .t-active-filter{background-color:#363636}
.black .t-state-hover, .black .t-state-hover .t-link{color:#9eda29}
.black .t-state-hover, .black .t-state-hover:hover{background-color:#2c2c2c;border-color:#080808}
.black .t-state-active{background-color:#4f4f4f;border-color:#080808}
.black .t-state-selected{background:#1c1c1c;border-color:#000}
.black .t-state-focused{background-color:#2c2c2c}
.black .t-dropdown .t-state-focused{border-color:#141414;background:#141414 url('Black/sprite.png') repeat-x 0 -752px}
.black .t-state-error, .black .t-widget.input-validation-error, .black .t-widget .input-validation-error{border-color:#f00;background-color:#ffc0cb}
.black .t-button{border-color:#080808;color:#fff}
.black .t-button, .black button.t-button.t-state-disabled:hover, .black a.t-button.t-state-disabled:hover, .black .t-state-disabled .t-button:hover{background:#050505 url('Black/sprite.png') repeat-x 0 -560px}
.black .t-button:hover{background-position:0 -624px;background-color:#131313;color:#9eda29}
.black .t-state-disabled, .black .t-state-disabled:hover, .black .t-state-disabled .t-link, .black .t-state-disabled .t-button{color:#787878}
.black .t-header .t-state-disabled{border-color:#4f4f4f}
.black .t-popup, .black .t-menu .t-group{-moz-box-shadow:2px 2px 2px #222;-webkit-box-shadow:2px 2px 2px #222;box-shadow:2px 2px 2px #222}
.black .t-toolbar, .black .t-grouping-header, .black .t-grid-pager, .black .t-widget .t-status{border-color:#080808;background-color:#2c2c2c}
.black .t-grid-header-wrap, .black .t-grid-footer-wrap{border-color:#080808}
.black .t-grid td{border-color:#454545}
.black .t-grouping-row td{background:#4f4f4f url('Black/sprite.png') repeat-x 0 -48px}
.black .t-footer-template td{background-color:#2e2e2e;border-color:#080808 #2e2e2e}
.black .t-group-footer td{background-color:#2e2e2e;border-color:#080808}
.black .t-grid-footer, .black .t-grid-footer-wrap table{background-color:#2e2e2e;border-color:#080808}
.black .t-grouping-header .t-group-indicator{color:#333;border-color:#666}
.black .t-grouping-dropclue{background:url('Black/sprite.png') no-repeat -48px -288px}
.black .t-grouping-row .t-group-cell, .black .t-grouping-row p{background:#4f4f4f}
.black .t-drag-clue{color:#fff}
.black .t-treeview .t-drop-clue{background-image:url('Black/sprite.png');background-position:0 -358px}
.black .t-panelbar .t-link, .black .t-panelbar .t-group, .black .t-panelbar .t-content{border-color:#000}
.black .t-calendar th{background-color:#383838;border-color:#202020}
.black .t-treeview-lines .t-top, .black .t-treeview-lines .t-mid, .black .t-treeview-lines .t-bot{background-image:url('Black/treeview-nodes.png')}
.black .t-rtl .t-treeview-lines .t-top, .black .t-rtl .t-treeview-lines .t-mid, .black .t-rtl .t-treeview-lines .t-bot{background-image:url('Black/treeview-nodes-rtl.png')}
.black .t-treeview-lines .t-item{background-image:url('Black/treeview-line.png')}
.black .t-treeview-lines .t-last{background-image:none}
.black div.t-window{-moz-box-shadow:0 0 5px 2px #222;-webkit-box-shadow:0 0 5px 2px #222;box-shadow:0 0 5px 2px #222}
.black .t-editor-button .t-state-hover{border-color:#565656 #111 #111 #565656;background-color:#232323}
.black .t-editor-button .t-state-active{border-color:#030303 #1f1f1f #1f1f1f #030303;background-color:#050505}
/*Slider*/.black .t-slider .t-draghandle{background-image:url('Black/sprite.png');color:#080808}
.black .t-slider-track{border-color:#4a4a4a}
.black .t-slider-horizontal .t-slider-track, .black .t-slider-horizontal .t-slider-selection{background-image:url('Black/sprite.png')}
.black .t-slider-vertical .t-slider-track, .black .t-slider-vertical .t-slider-selection{background-image:url('Black/sprite-vertical.png')}
.black .t-slider-horizontal .t-tick{background-image:url('Black/slider-h.gif')}
.black .t-slider-vertical .t-tick{background-image:url('Black/slider-v.gif')}
.black .t-state-disabled .t-slider-wrap .t-slider-items{color:#ccc}
/*Tooltip*/.black .t-tooltip{background:#050505 0 -560px repeat-x url('Black/sprite.png')}
.black .t-callout{background-image:url('Black/sprite.png')}
/* Splitter */.black .t-splitbar-vertical, .black .t-splitbar-horizontal{background-color:#262628}
.black .t-splitbar-vertical, .black .t-ghost-splitbar-vertical{background-image:url('Black/sprite.png')}
.black .t-splitbar-horizontal, .black .t-ghost-splitbar-horizontal{background-image:url('Black/sprite-vertical.png')}
/* Upload */.black .t-dropzone-active, .black .t-upload-files{border-color:#080808}
.black .t-dropzone-hovered, .black .t-upload-files{background-color:#2c2c2c}
.black .t-dropzone em{color:#848484}
.black .t-progress, .black .t-progress-status{background-image:url('Black/sprite.png')}
.black .t-progress{background-position:0 -465px;border-color:#4a4a4a #474747}
.black .t-progress-status{background-position:0 -472px;border-color:#9eda29 transparent #456408}
/* ImageBrowser */.black .t-imagebrowser .t-content{background:#3d3d3d}
.black .t-breadcrumbs .t-first, .black .t-breadcrumbs .t-first:hover, .black .t-search-wrap label, .black .t-tiles-arrange{color:#a1a1a1}
.black .t-toolbar .t-upload .t-button, .black .t-tiles-arrange a{color:#fff}
.black .t-tiles{border-color:#222;background:#4f4f4f}
.black .t-tile{border-color:#4f4f4f;background:0 100px repeat-x url('Black/imagebrowser.png')}
.black .t-tiles li.t-state-hover{border-color:#080808;background-position:0 0}
.black .t-tiles li.t-state-selected{border-color:#080808;background-position:0 -100px}
.black .t-tile .t-folder{background-image:url('Black/imagebrowser.png')}
.black .t-tile em, .black .t-tile .t-filesize, .black .t-tile-empty strong{color:#7d7d7d}
You either need to place the custom Black styles after the StyleSheetRegistrar, or use even higher specificity, .e.g.
div.black ........
{
............
}
(or whatever element the black class is applied to)
By the way, I recommend getting familiar with the concepts of CSS specificity and cascade. This will be very useful when customizing CSS styles:
http://css.maxdesign.com.au/
Apart from all text information in the various sections, there are three video presentations on the home page. The information about specificity is in the third presentation, starting from slide 50. I recommend you to watch the whole first and third presentations to gain better understanding how CSS works and how conflicting (overriding) styles are applied by the browser.
Here is one more article on the matter:
http://coding.smashingmagazine.com/2007/07/27/css-specificity-things-you-should-know/
Regards,
Dimo
the Telerik team
Your last post was spot on. I simply swapped the order of the .css registration in the header so that my main telerik.Office2010Silver.css
came before the overriding telerik.black.min.css.
<head>
<title>@ViewBag.Title</title>
<link href="@Url.Content("~/Content/Site.css")" rel="stylesheet" type="text/css" />
@(Html.Telerik().StyleSheetRegistrar().DefaultGroup(group => group.Add("telerik.common.css")
.Add("telerik.Office2010Silver.css").Combined(true).Compress(true)))
<link href="@Url.Content("~/Content/2012.1.214/telerik.black.min.css")" rel="stylesheet" type="text/css" />
</head>
Although it has resolved the issue, I have no idea why. I'll be reading the links you recommended. Thanks for those. I would like to understand why the order matters.
Anyway, thanks you very much for your efforts. Very appreciated.
Phil