+1-888-365-2779
Try Now
More in this section

Forums / Designing & Styling / using telerik visual styler

using telerik visual styler

10 posts, 0 answered
  1. Bassem
    Bassem avatar
    19 posts
    Registered:
    29 Dec 2010
    15 Mar 2011
    Link to this post
    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 
  2. Jordan
    Jordan avatar
    172 posts
    Registered:
    20 Oct 2015
    15 Mar 2011
    Link to this post
    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:

    .rmItem {
    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.


    Greetings,
    Jordan
    the Telerik team
  3. Bassem
    Bassem avatar
    19 posts
    Registered:
    29 Dec 2010
    15 Mar 2011
    Link to this post
    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
  4. Steve
    Steve avatar
    3037 posts
    Registered:
    03 Dec 2008
    15 Mar 2011
    Link to this post
    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.
  5. Jordan
    Jordan avatar
    172 posts
    Registered:
    20 Oct 2015
    16 Mar 2011
    Link to this post
    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
  6. Bassem
    Bassem avatar
    19 posts
    Registered:
    29 Dec 2010
    18 Mar 2011
    Link to this post
    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
  7. Steve
    Steve avatar
    3037 posts
    Registered:
    03 Dec 2008
    19 Mar 2011
    Link to this post
    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
    <appSettings>
       <!-- Sets the skin for every instance of RadTabStrip to Bassem"  -->
       <add key="Telerik.TabStrip.Skin" value="Bassem"  />
    </appSettings>
    (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)
    http://www.screencast.com/t/LZnMAC8g6ozJ

    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 :)
  8. Jordan
    Jordan avatar
    172 posts
    Registered:
    20 Oct 2015
    24 Mar 2011
    Link to this post
    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
  9. Stefano
    Stefano avatar
    29 posts
    Registered:
    14 Jun 2011
    28 Jun 2011
    Link to this post
    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...
  10. Jordan
    Jordan avatar
    172 posts
    Registered:
    20 Oct 2015
    30 Jun 2011
    Link to this post
    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

    Regards,
    Jordan
    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
10 posts, 0 answered