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

Different Skins for Different Controls

12 Answers 234 Views
General Discussions
This is a migrated thread and some comments may be shown as answers.
This question is locked. New answers and comments are not allowed.
Vaseem Anjum
Top achievements
Rank 1
Vaseem Anjum asked on 18 Mar 2010, 02:01 PM
Hi,
  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

Sort by
0
Alex Gyoshev
Telerik team
answered on 18 Mar 2010, 04:45 PM
Hello Vaseem,

Currently, there is no built-in way to support multiple skins on the same page. You can, though, use the following work-around:
  1. 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.
  2. 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 .".
  3. 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.
0
Evan Stineman
Top achievements
Rank 1
answered on 01 Jul 2011, 03:53 PM
I tried this with the following problem:

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
0
Dimo
Telerik team
answered on 04 Jul 2011, 07:40 AM
Hi Evan,

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
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
0
Uday
Top achievements
Rank 1
answered on 21 Feb 2012, 05:22 PM
Is there a way to specify two different styles for same control?  For example, if I have two menus, how can I specify I want first menu "Menu1" to have Vista theme and second menu "Menu2" to have Windows7 theme? 
0
Dimo
Telerik team
answered on 22 Feb 2012, 09:13 AM
Hi Uday,

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
Sharpen your .NET Ninja skills! Attend Q1 webinar week and get a chance to win a license! Book your seat now >>
0
Phil
Top achievements
Rank 1
answered on 21 Mar 2012, 09:39 AM

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

 

 

 

 

 

 

 

 

 

 

 

 

0
Dimo
Telerik team
answered on 21 Mar 2012, 10:53 AM
Hi 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
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 Telerik Extensions for ASP.MET MVC, subscribe to their blog feed now.
0
Phil
Top achievements
Rank 1
answered on 21 Mar 2012, 11:43 AM

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

 

 

 


0
Dimo
Telerik team
answered on 21 Mar 2012, 12:29 PM
Hi 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
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 Telerik Extensions for ASP.MET MVC, subscribe to their blog feed now.
0
Phil
Top achievements
Rank 1
answered on 21 Mar 2012, 01:56 PM
Many thanks. Thanks for link.

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&current=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}


0
Dimo
Telerik team
answered on 23 Mar 2012, 02:45 PM
Hello Phil,

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
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 Telerik Extensions for ASP.MET MVC, subscribe to their blog feed now.
0
Phil
Top achievements
Rank 1
answered on 24 Mar 2012, 09:46 AM
hi Dimo,

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

 

Tags
General Discussions
Asked by
Vaseem Anjum
Top achievements
Rank 1
Answers by
Alex Gyoshev
Telerik team
Evan Stineman
Top achievements
Rank 1
Dimo
Telerik team
Uday
Top achievements
Rank 1
Phil
Top achievements
Rank 1
Share this question
or