using telerik visual styler - Front- & Back-End Development - Front- & Back-End Development - Progress Community
 Front- & Back-End Development

using telerik visual styler

  • 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
  • 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:

    height: 40px;
    line-height: 40px; /*this center your text vertically*/
    font-size: 25px;
    background-image: url(/pathToTheImages/rmSprite.png); /*or any other background*/

    In that case the height of the background area of the rmItem should be at least 40px. If you are a newbie in styling there will be much easier for you to use separate images instead of sprites.

    the Telerik team
  • 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 .
  • 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)

    IMO, don't use the visual style builder....just use the "Simple" Skin from your install Dir and change the CSS on'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,
    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 )

  • 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"
      web.config it with this to set it globally
       <!-- Sets the skin for every instance of RadTabStrip to Bassem"  -->
       <add key="Telerik.TabStrip.Skin" value="Bassem"  />
    (I haven't tried the webconfig verson in SF4, but cant imagine why it would fail)
    - Install this VS2010 extension :) It'll highlight the color codes in your css with the actual colors so you can get rid of the fugly Simple skin "orange"

    Here's a video on what I mean about making your styles override the embedded base styles...(last part of the video having the menu use my defined padding over theirs with !important)

    In the last two sites I've done I've had a single base masterpage, and all the others nest off of that....gave me more control (and less markup) over these base nav elements :)
  • 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,
    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

    the Telerik team
    Do you want to have your say in the Sitefinity development roadmap? Do you want to know when a feature you requested is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items