using telerik visual styler

Hi everyone, 
As I am really newbie in styling, I tried to use the telerik visual styler to style my menu. 

Everything goes well as I use the values allowed for the size 
But since I wanted to make bigger (in height, width and font) the menu and TabStrip, I has a problem with the rmSprite.png which parts are not loaded as needed. 

I tried to make bigger the  those values and kept the same scale (multiplied all by 2) and resized rmSprite.png with the same scale.
But this didn't work actually. I think the problem might be from the png and how to load it.
Is there any suggestion
thanks 

Hi Bassem,


The elements in your rmSprite.png should have the same height or bigger that the height and line-height of your ".rmItem" elements. For example:

HI Jordan 
Thanks for your reply. 
I will try it. 
Actually , I wanted to use the sprite to learn it :) 
Another question here : 
I wanted to use this (sprite an background images) in case I have some problems with some browsers that don`t recognise CSS3. (IE especially) do you advise me to do so?

Basically I am considering usin 2 CSS files : one for CSS3 and the other for CSS2. 

I know how to do it with standard web pages but in SF I dont know how.


 Depending on the web browser load different CSS files .
thanks

Hey Bassem :)
  I've skinned just about every RadControl multiple times and it's really super easy to do....

Background images are not a CSS3 thing, so they'll work back to IE6, CSS3 just adds in new features you wont be able to use until IE dies ;)  So if you use firebug, mousing over the sprite png style should show you the sprite (so you know it's loading), then it's just going to be changing the background-position styles since you'd scaled everything...which you can dynamically do in firebug right.  I usually just put my cursor on the X or Y node and use the arrow keys until I get the position I want (see video of me doing it on the telerik forum reply button)

http://webdesign.about.com/od/css3/a/differences-css2-css3_2.htm

IMO, don't use the visual style builder....just use the "Simple" Skin from your install Dir and change the CSS on it...it's sprite-free so it contains less clutter than the gradient skinned versions.  So just add in your sprites where required.

FYI You'll also have to make heavy use of !important or more specific selectors when re-skinning a telerik component to override their defaults...but it's not as bad as I make it seem.

This is a skinned menu I've got so far working from the "Simple" skin file as a base.

Hi Bassem,

There is no special way of loading the CSS files for CSS2 and 3 in Sitefinity. You can try to add them through some logic with js,c# or the way you do it usually. But everything  depends on the CSS3 properties that you are going to use. The things can be done in one file - the CSS3 properties set after the CSS2 will override so they will be applied only when the browser supports them.


Kind regards,
Jordan
the Telerik team

Hi Steve 
Thank you for the advice , well I tried to find the "Simple" CSS in install directory but I got a list of all controls CSS files as (seperate CSS file for each control). 
It will be much appreciated if you explain me how to override all those since I am having some problem with some controls have CSS property coming from "telerik :..." as firebug shows me. 
Will it be easier to use Master page instead of SF template (to be able then to modify it later )

thanks

Hey Bassem,
  Sorry, this is the directory I meant (radajax controls): C:\Program Files (x86)\Telerik\RadControls for ASP.NET AJAX Q1 2011\Skins\Simple (version you're using may be different). 

- So then take that file, rename it as needed (TabStrip.Bassem.css, and do a replace in the contents "_Simple" to "_Bassem"). 
- Drop it in the Global folder css App_Data theme folder
- On the TabStrip control itself, set Skin="Bassem" EnableEmbeddedSkins="False"
     OR
  web.config it with this to set it globally

Hi Bassem,

There isn't any different between using Masterpage or Sitefinity Template. If you are using registered theme, the default styles will be disabled.

Best wishes,
Jordan
the Telerik team

I use telerik Visual Style Builder and I create the file css for the menu navigation but where I had to put the ccs file name? I tried to insert in the CSS Wrapper but it doesn'work...

Hello Stefano,

Here are the steps when using the visual style builder:

1. When starting with the Visual Style builder enter the name of the skin. For ex.: "stefano"
2. After finishing the customization export you template
3. Extract the archive and place it in your "Global" themes folder - ex. "~/App_Data/Sitefinity/WebsiteTemplates/Stefano/App_Themes/Stefano/Global" (the file will be loaded automatically)
4. Add navigation widget to your template and click edit.

5. In the designer open the "Design settings" area and enter "stefano" in the Wrapper CSS class field

Note that the type of the control that you have customized in the visual style builder should be the same as the one in Sitefinity. They are:

• Horizontal - RadTabStrip
• Horizonta with drop down - RadMenu
• Vertical - RadTabStrip
• Horizontal with tabs - RadTabStrip
• Tree - RadTreeView
• Sitemap - RadSiteMap