This question is locked. New answers and comments are not allowed.
Hello,
How can I use different themes for different extensions? For example I want for Menu "Web20" but for Panel "Office2007". I was trying to combine two css files and use Theme("web20") for first extension and Theme("office2007") for second one but I was only getting web20 theme to work.
Thanks
How can I use different themes for different extensions? For example I want for Menu "Web20" but for Panel "Office2007". I was trying to combine two css files and use Theme("web20") for first extension and Theme("office2007") for second one but I was only getting web20 theme to work.
Thanks
6 Answers, 1 is accepted
0
Hello Grzegorz,
Since the extensions use the primitives approach, only one theme works without modification. In order to use two themes, you have to modify the CSS files - namely, add a skin specific class to all the rules in the theme. Something like this:
Before:
/* Web 2.0 theme */
.t-widget { ... }
/* Office 2007 theme */
.t-widget { ... }
After:
/* Web 2.0 theme */
.web20 .t-widget { ... }
/* Office 2007 theme */
.office2007 .t-widget { ... }
And add the web20 and office2007 classes to a container around the components that you use.
Best wishes,
Alex
the Telerik team
Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.
Since the extensions use the primitives approach, only one theme works without modification. In order to use two themes, you have to modify the CSS files - namely, add a skin specific class to all the rules in the theme. Something like this:
Before:
/* Web 2.0 theme */
.t-widget { ... }
/* Office 2007 theme */
.t-widget { ... }
After:
/* Web 2.0 theme */
.web20 .t-widget { ... }
/* Office 2007 theme */
.office2007 .t-widget { ... }
And add the web20 and office2007 classes to a container around the components that you use.
Best wishes,
Alex
the Telerik team
Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.
0
Nebras
Top achievements
Rank 1
Rank 1
answered on 07 Jul 2011, 03:26 PM
Hello , Telerik team
I have the same issue , could you provide me more details about how to achieve my goal
I have the same issue , could you provide me more details about how to achieve my goal
0
Hi Nebras,
The instructions in the previous reply are pretty straightforward, can you specify what exactly is not clear?
By the way, some components such as the DatePicker and Window render elements directly inside the <body>. For these components it is easier to use a skin as is, without adding additional wrapper CSS classes. In other words, add wrapper CSS classes in the skin that will be used by the other components.
For example:
Before:
/* Web 2.0 theme */
.t-widget { ... }
.t-item { ... }
/* Office 2007 theme */
.t-widget { ... }
.t-item { ... }
After:
/* Web 2.0 theme to be used by Window and DatePicker - unchanged */
.t-widget { ... }
.t-item { ... }
/* Office 2007 theme */
.office2007 .t-widget { ... }
.office2007 .t-item { ... }
HTML:
<div class="office2007">
...MENU component here...
</div>
Greetings,
Dimo
the Telerik team
The instructions in the previous reply are pretty straightforward, can you specify what exactly is not clear?
By the way, some components such as the DatePicker and Window render elements directly inside the <body>. For these components it is easier to use a skin as is, without adding additional wrapper CSS classes. In other words, add wrapper CSS classes in the skin that will be used by the other components.
For example:
Before:
/* Web 2.0 theme */
.t-widget { ... }
.t-item { ... }
/* Office 2007 theme */
.t-widget { ... }
.t-item { ... }
After:
/* Web 2.0 theme to be used by Window and DatePicker - unchanged */
.t-widget { ... }
.t-item { ... }
/* Office 2007 theme */
.office2007 .t-widget { ... }
.office2007 .t-item { ... }
HTML:
<div class="office2007">
...MENU component here...
</div>
Greetings,
Dimo
the Telerik team
Register for the Q2 2011 What's New Webinar Week. Mark your calendar for the week starting July 18th and book your seat for a walk through of all the exciting stuff we will ship with the new release!
0
Nebras
Top achievements
Rank 1
Rank 1
answered on 07 Jul 2011, 04:00 PM
Dimo , thanks for your reply , let me provide my own question ,
I have a menu and a grid , I want to apply different color for each of them
I want the menu to be "outlook" and the grid to be "vista"
then I apply the outlook theme
and in the outlook .css file , i change :
.t-grid-header{border-color:#5d8cc9;background:#7da5e0 url 0('outlook/sprite.png')
to be
.t-grid-header{border-color:#5d8cc9;background:#7da5e0 url('vista/sprite.png')
the result was that both menu and the grid header changing together
then , how to apply different color for each of them
I have a menu and a grid , I want to apply different color for each of them
I want the menu to be "outlook" and the grid to be "vista"
then I apply the outlook theme
and in the outlook .css file , i change :
.t-grid-header{border-color:#5d8cc9;background:#7da5e0 url 0('outlook/sprite.png')
to be
.t-grid-header{border-color:#5d8cc9;background:#7da5e0 url('vista/sprite.png')
the result was that both menu and the grid header changing together
then , how to apply different color for each of them
0
Hi Nebras ,
You approach is not the one that we have suggested in the previous replies. Have you tried the technique with addition skin CSS classes, as we have suggested?
Dimo
the Telerik team
You approach is not the one that we have suggested in the previous replies. Have you tried the technique with addition skin CSS classes, as we have suggested?
Dimo
the Telerik team
Register for the Q2 2011 What's New Webinar Week. Mark your calendar for the week starting July 18th and book your seat for a walk through of all the exciting stuff we will ship with the new release!
0
Nebras
Top achievements
Rank 1
Rank 1
answered on 10 Jul 2011, 11:59 AM
thanx Dimo for your help
what i did and works fine ,
1-I created a css file containing:
.myoutlook{background:url("~/content/background.png");}
2- in the menu , i add the css class as :
what i did and works fine ,
1-I created a css file containing:
.myoutlook{background:url("~/content/background.png");}
2- in the menu , i add the css class as :
@Html.Telerik().Menu().Name("Toolbar").HtmlAttributes(new { @class = "myoutlook" }).3- in the masterpage , i registered the my css file and the theme i want to use the other parts except the menu
@(Html.Telerik().StyleSheetRegistrar()
.DefaultGroup(group => group .Add("telerik.common.css") .Add("telerik.vista.css") .Add("myCss.css")
.Combined(true) .Compress(true)) )