 
Groups: ProSeller
Joined: 10/26/2009
Posts: 16
Location: Beautiful Gloucester
|
Hi Everyone, I was looking for a way to draw more attention to my side category links in the hope that it will encourage people to browse more of my stuff. So after experimenting a little with the CSS I found it was possible to add little pictures beside each link. So if anyone is interested this is how I achieved it. .listBox ul li {
list-style: inside;
list-style-image: url(http://simpleelegance.com.au/list.png);
}You will need to replace my image with one of your own of course and you need to host it somewhere - and size it to suit the area, which is quite small. I just put it into the CSS box in the Store Appearance Section. Store Appearance -> Beta Advanced -> Style(CSS)-> then I just put it at the bottom of the ... /*------------------------------------------- | side pods ---------------------------------------------*/ section. You can see the results here: Simple EleganceGood luck and have fun  Carol
|
|
Groups: ProSeller
Joined: 3/11/2011
Posts: 299
|
@SimpleElegance,
Great find, thanks for sharing.
|
|
Groups: ProSeller
Joined: 12/30/2009
Posts: 57
Location: City
|
It looks very pretty well done 
|
|
Groups: ProSeller
Joined: 4/12/2011
Posts: 106
Location: Vail
|
Do you replace all of this
#group_1 .sidePod, #group_2 .sidePod, #group_3 .sidePod {
background-color:#<z:color name="PodBackground" />;
border-width:0;
color:#<z:color name="PodText" />;
padding:10px;
}
with this?
.listBox ul li {
list-style: inside;
list-style-image: url(http://simpleelegance.com.au/list.png);
}
Or do you add it underneath and keep everything(with adding your own image)?
I'm very hesitant when changing my code, just want to make sure I'm doing it right... Thank you!
|
|
Groups: ProSeller
Joined: 10/26/2009
Posts: 16
Location: Beautiful Gloucester
|
Hi Artistic, just add my little bit of code, don't replace anything I just added it under that other code, but it probably doesn't matter where you put it ... I put it in the sidepod bit so I could find it easily if I want to change the picture later. Thanks for the lovely comment S.Martin
|
|
Groups: ProSeller
Joined: 3/27/2010
Posts: 306
|
Great work, I love the idea. I will definately give it a try.
Thanks for sharing SimpleElegance, your store looks fab >.<
|
|
Groups: ProSeller
Joined: 4/12/2011
Posts: 106
Location: Vail
|
Thank you for your help!
And your store looks very nice!
|
|
Groups: ProSeller
Joined: 12/10/2009
Posts: 525
Location: Mountain View
|
Very nice, but I'm actually more impressed by the idea of a background image for the sidebar. Not sure it'll work with my own store, but great idea nonetheless.
- Mike.
|
|
Groups: ProSeller
Joined: 10/26/2009
Posts: 16
Location: Beautiful Gloucester
|
I added a background image to the sidebar by changing the sidepod code to this: /*------------------------------------------- | side pods ---------------------------------------------*/ #group_1 .sidePod, #group_3 .sidePod {
background-image:url(http://simple-elegance.jodoshared.com/resources/custom/SE/midbg.jpg);
border: 1px solid #a7bf83;
color:#<z:color name="PodText" />;
padding:5px;
}I can't remember what it looked like before but the relevant part is the background and border (red text) I kept mine really simple but you could have a bit of fun experimenting with different backgrounds and border styles, you could definitely make an impact if you wanted. Hope it works for your store mikes_photo_designs Thanks to everyone for your lovely comments!
|
|
Groups: ProSeller
Joined: 12/10/2009
Posts: 525
Location: Mountain View
|
Thanks. I wasn't asking how to do it, just admiring how it looked in your store. I already use a background image, but not in the sidepod. I think in my case the solid color is better there.
- Mike.
|
|
Groups: ProSeller
Joined: 10/26/2009
Posts: 16
Location: Beautiful Gloucester
|
@Mike - I see, you were saying you weren't sure if it would work in your Store from a Design point of view rather than a technical one. Oh well it might help others Carol
|
|
Groups: Member
Joined: 2/21/2012
Posts: 8
|
@SimpleElegance: What is the size of your sidepod background image?
|
|
|
Guest |