PDA

View Full Version : Category strips


jonnyjonny_uk
11-23-2008, 12:18 PM
Can someone please help me with styling the category strips shaded from left to right. I have designed the category strip but need to know how to make it right size and fit any screen resolution. Also how come my nav bar and forum are different widths now with only changing the colours? See picture attached.

Thanks

https://vborg.vbsupport.ru/external/2008/11/23.jpg

Princeton
11-23-2008, 04:14 PM
Can someone please help me with styling the category strips shaded from left to right.

create the faded image
Now add the image to category row via CSS background:#FFF url('background-image.gif') no-repeat top left; I have designed the category strip but need to know how to make it right size and fit any screen resolution.

have no idea what you are asking :confused:

Also how come my nav bar and forum are different widths now with only changing the colours?
compare your templates with default .. it appears you may have removed $spacer_open or $spacer_close from a template

jonnyjonny_uk
11-23-2008, 04:37 PM
Thanks so much for your kind reply. I must of deleted some code by mistake as you say and replaced with the default code and it's correct size now.

As for the category bars I was meaning how do you know what size they need to be when you make them in photoshop?

Thanks for the help so far :)

John

Princeton
11-23-2008, 05:35 PM
if it's left to right ...
it can be 1px in height
use background:#FFF url('background-image.gif') repeat-y top left;

the width of the image depends on how long you want the fade to be

jonnyjonny_uk
11-23-2008, 06:01 PM
Ok thanks and I take it that code makes sure it goes right to the end of the category bar because that was the problem I was having. It was stopping short and you could see the previous colour underneath.

Thanks Princeton

Princeton
11-23-2008, 06:41 PM
the end of the fade should be the same as that on the CSS

so if your cat bar is black your fade image should end in black

background:#000 url('background-image.gif') repeat-y top left;

#000 is black (change it to whatever color your fade image ends)

jonnyjonny_uk
11-24-2008, 04:22 PM
Hi Princeton and I really appreciate your continued help with this and I'm afraid I have another question. How can I just make it 1px high when it will also be two colours from top to bottom? Basically the bar will be darker at the top and lighter at the bottom and a short fade at the right hand end. Sorry to mess you about and keep asking questions.

Thanks

John