Urgent: Menu Item height

14 posts, 0 answers
  1. Jon
    Jon avatar
    813 posts
    Member since:
    Oct 2008

    Posted 03 Nov 2009 Link to this post

    Hi All,

    I'm trying to use some 24px x 24px images for the menu item icons and have realised that the menus expect the icons to be 16px x 16px. 

    What CSS do I need to change to get this work? 

    I'm finding that 16px icons are just too small for my purposes.  Luckily I will be able to get away with 24px and not 32px icons.

    Any help?

    Regards,

    Jon
  2. Jon
    Jon avatar
    813 posts
    Member since:
    Oct 2008

    Posted 03 Nov 2009 Link to this post

    Further to the email below I have managed to get the item height working however the hover highlight is still set to the old height and I'm having trouble getting that to work on the new height, these are the CSS changes that I have made so far:

                .rmSlide .rmItem .rmLink  
                {  
                    line-height:31px ! important;  
                }  
                .RadMenu .rmGroup .rmLeftImage   
                {  
                    margin-left:0px ! important;  
                } 

    Not many changes so I'm guessing that the rest should be fairly simple. 

    Any help?

    Regards,

    Jon
  3. Schlurk
    Schlurk avatar
    812 posts
    Member since:
    May 2009

    Posted 03 Nov 2009 Link to this post

    I believe this would work:
    .rmSlide .rmItem .rmLink:hover   
    {   
        line-height:31px ! important;   
    }   
    .RadMenu .rmGroup .rmLeftImage:hover   
    {   
        margin-left:0px ! important;   
    }  

  4. Jon
    Jon avatar
    813 posts
    Member since:
    Oct 2008

    Posted 04 Nov 2009 Link to this post

    Thanks for that but still no joy. 

    From my research into the CSS using firebug it looks as though the hover highlight is actually a background image that is stored in the sprite file.  As such I am guessing that I need to tell the hover CSS to use a different image  but figuring it out is another matter!

    Cheers,

    Jon
  5. Paul
    Admin
    Paul avatar
    4281 posts

    Posted 04 Nov 2009 Link to this post

    Hello Jon,

    In order to achieve your goal you can create you custom skin and define the look and feel of the items as you need them.You can use our new Visual Style Builder to make your own custom skins.

    All the best,
    Paul
    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.
  6. Jon
    Jon avatar
    813 posts
    Member since:
    Oct 2008

    Posted 04 Nov 2009 Link to this post

    Hi Paul,

    Thanks for the reply but the visual style builder doesn't seem very easy to use so far as the sprite image goes.  Also I need this to integrate with the existing skin rather than be an add on skin.

     

    Is there a way to disable the hover image - perhaps even colour the background instead of showing a sprite file? 

    Regards,

    Jon

  7. Jon
    Jon avatar
    813 posts
    Member since:
    Oct 2008

    Posted 04 Nov 2009 Link to this post

    Hi again Paul,

    Well I've managed to work this out.  I'd misunderstood what the remove link was on the style builder.  Now I've clicked that and set the hover background up it all works. 

    I've also extracted the CSS from the skin file and inserted into the relevant App_Themes folder for the normal skins.

    Last question that I have relates to the left column (used as a background for the image).  Where is the width of that controlled?  with the larger icons I need more width on it.

    If anyone else is interested in this the CSS to disable the image and show a bg colour is as below.

    Regards,

    Jon

    .rmGroup .rmItem .rmLink:hover .rmText  
    {  
            background-imagenone;   
            background-color#e3eeff;  
            cursor:auto;  
    }  
    .rmGroup .rmItem .rmLink:hover  
    {  
        background-imagenone;   
        background-color#e3eeff;  
        cursor:auto;  
  8. Kamen Bundev
    Admin
    Kamen Bundev avatar
    1532 posts

    Posted 11 Nov 2009 Link to this post

    Hi Jon,

    The space where the submenu icons are placed is controlled by rmVSprite.png for its background and the left padding of the .rmText item.

    Best wishes,
    Kamen Bundev
    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.
  9. Jon
    Jon avatar
    813 posts
    Member since:
    Oct 2008

    Posted 12 Nov 2009 Link to this post

    Hi Kamen,

    Of course - many thanks - can't believe that I missed that.

    Do you know if there is a sprite editor available anywhere - I'm using GIMP to edit the images but its tricky to use for sriptes when enlarging them.  Would be great if there was a tool specifically aimed at editin sprites - or putting them together anyway.

    Regards,

     

    Jon

  10. Kamen Bundev
    Admin
    Kamen Bundev avatar
    1532 posts

    Posted 17 Nov 2009 Link to this post

    Hi Jon,

    I think this is the best I've seen yet, but it is not for editing, but for sprite composition. You can use it on an unoptimized site and it will output a sprite and CSS with background positions. Check it out:
    http://www.stevesouders.com/blog/2009/09/14/spriteme/
    http://spriteme.org/demo.php

    However editing sprites is harder and I don't know of any tools that automate it. Gimp is not very easy to use so you can check Paint.NET here:
    http://www.getpaint.net/
    It has become a very good free alternative too and should be easier to use.

    Kind regards,
    Kamen Bundev
    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.
  11. Jon
    Jon avatar
    813 posts
    Member since:
    Oct 2008

    Posted 18 Nov 2009 Link to this post

    Hi Kamen,

    Many thanks for that - I'm off this for the time being on other stuff but will use that when back on.  I did create the images using GIMP (yes it is hard to use) but then had problems with them not positioning properly.

    Fingers crossed I'll be back on it soon.  In the meantime I think it would be a superb addition to your library if you could knock up some form of sprite amalgamator like the one on that site but make it so that the sprite has some form of postion definition file that then integrates with the Visual Skin editor.  Probably not too hard to code either.

    Regards,

    Jon
  12. Kamen Bundev
    Admin
    Kamen Bundev avatar
    1532 posts

    Posted 19 Nov 2009 Link to this post

    Hi Jon,

    Yes, we have thought of extending the Visual Style Builder with some kind of sprite editor that should be able to resize a control skin sprite using size templates. However it's not exactly that easy to code as it seems (mainly because of how different all the sprites are) and has lesser priority than other features, but we are definitely considering it for future updates.

    Regards,
    Kamen Bundev
    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.
  13. Jon
    Jon avatar
    813 posts
    Member since:
    Oct 2008

    Posted 19 Nov 2009 Link to this post

    Hi Kamen,

    Yes I could see that it could be tricky.  Do you have some form of definition file for the menu sprites?  It would be really helpful to see something that says what each part of the sprite is used for and where it is (x,y,width and height).  This would be a very handy thing in the meantime.  As it stands it is something of a detective case trying to figure out what each element is used for. 

    Best Regards,

    Jon
  14. Kamen Bundev
    Admin
    Kamen Bundev avatar
    1532 posts

    Posted 25 Nov 2009 Link to this post

    Hi Jon,

    There is indeed a description of the RadMenu sprite file, I'm attaching it. However full help on how to create a sprite and edit the skin file is planned for the next release.

    Let me know if this helps.

    Regards,
    Kamen Bundev
    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.
Back to Top