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
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
13 Answers, 1 is accepted
0
Jon
Top achievements
Rank 1
Rank 1
answered on 03 Nov 2009, 03:23 PM
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:
Not many changes so I'm guessing that the rest should be fairly simple.
Any help?
Regards,
Jon
| .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
0
Schlurk
Top achievements
Rank 2
Rank 2
answered on 03 Nov 2009, 10:13 PM
I believe this would work:
| .rmSlide .rmItem .rmLink:hover |
| { |
| line-height:31px ! important; |
| } |
| .RadMenu .rmGroup .rmLeftImage:hover |
| { |
| margin-left:0px ! important; |
| } |
0
Jon
Top achievements
Rank 1
Rank 1
answered on 04 Nov 2009, 08:33 AM
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
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
0
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.
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.
0
Jon
Top achievements
Rank 1
Rank 1
answered on 04 Nov 2009, 11:21 AM
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
0
Jon
Top achievements
Rank 1
Rank 1
answered on 04 Nov 2009, 12:08 PM
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
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-image: none; |
| background-color: #e3eeff; |
| cursor:auto; |
| } |
| .rmGroup .rmItem .rmLink:hover |
| { |
| background-image: none; |
| background-color: #e3eeff; |
| cursor:auto; |
| } |
0
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.
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.
0
Jon
Top achievements
Rank 1
Rank 1
answered on 12 Nov 2009, 09:06 AM
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
0
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.
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.
0
Jon
Top achievements
Rank 1
Rank 1
answered on 18 Nov 2009, 10:02 AM
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
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
0
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.
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.
0
Jon
Top achievements
Rank 1
Rank 1
answered on 19 Nov 2009, 08:22 PM
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
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
0
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.
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.