Side menu items - is it possible to have background image?

A place for discussion about skinning and design. Before posting questions here you should review the documentation about creating skins.

This thread is closed to new posts. You must sign in to post in the forums.
4/23/2009 3:16:17 AM
Gravatar
Total Posts 15
Growing old is inevitable, growing up is optional :)

Side menu items - is it possible to have background image?

Hi,

is it possible to set background image for side menu items?
We have tried to put some gradient touch in it but without success.
We have used styletreeview.css

If it is possible, in which css class or item should it be?

Thanx
G.

4/23/2009 6:30:30 AM
Gravatar
Total Posts 18439

Re: Side menu items - is it possible to have background image?

Hi Goran,

Of course it should be possible to set a background on the li or a elements in the treeview. Its just a matter of viewing the source of the page to see what classes are available to create a selector and the attach the rule with a background image.

CSS boils down to selectors and rules in the format
[selector] {rules}

When I view the source of a page using a skin with a vertical treeview like freecsstemplate-level2 for example. I see markup like this in my local test site:

<div class="AspNet-TreeView" id="ctl01_PageMenu1_ctl00">
<ul id="ctl01_PageMenu1_ctl00_UL">
<li class="AspNet-TreeView-Root AspNet-TreeView-Leaf">
<a href="/test-article.aspx" title="Test Article">
Test Article</a>
</li>
<li class="AspNet-TreeView-Root AspNet-TreeView-Leaf">
<a href="/files.aspx" title="Files">
Files</a>
</li>
<li class="AspNet-TreeView-Root AspNet-TreeView-Leaf">
<a href="/feeds.aspx" title="Feeds">
Feeds</a>
</li>
<li class="AspNet-TreeView-Root AspNet-TreeView-Leaf">
<a href="/gallery.aspx" title="Gallery">
Gallery</a>
</li>

...

So I can see that every li has the class AspNet-TreeView-Leaf, so one candidate for a selector to put a background image on the li is:
li.AspNet-TreeView-Leaf { background:url('whatever_bg.png'); background-repeat: repeat-x;} 

Note that the image should ideally be in the root of the skin folder and it should be single quoted (this helps our css combiner resolve the correct full url to the image).

Other selectors that might also get the job done are:

.AspNet-TreeView li {}

or maybe you will find it better to put the background on the link

.AspNet-TreeView li a {}

or

li.AspNet-TreeView-Leaf a {}

Hope it helps,

Joe

4/23/2009 8:16:40 AM
Gravatar
Total Posts 15
Growing old is inevitable, growing up is optional :)

Re: Side menu items - is it possible to have background image?

hi,

it loks like it's working :)
And I'm sure we tried this but.....
I have added in
li.AspNet-TreeView-Leaf{background-image: url('bcktree.jpg');}
for subitems

and same in
li.AspNet-TreeView-Root ,
li.AspNet-TreeView-Selected ,
li.AspNet-TreeView-Parent
{background-image: url('bcktree.jpg');}
for main and selected items

thanx
G.
 

You must sign in to post in the forums. This thread is closed to new posts.