Adding gap to product sections

[safetyindustrie]

Hi.

I'm using executive theme and on the left hand side I have my sections. It is a continuous list. However, I would like to add a break in-between sections. How would I do this? I can create a blank section, however it still leaves the bullet point icon there.

You help is appreciated.

thanks.

[peblaco]

In the Design Library stylesheet search for ul.products and change the margin: 8px 0px 8px 15px;

[safetyindustrie]

Thanks for your reply, however, maybe I have said it wrong.

Can you look at my site http://www.safetyindustries.co.uk/new2/

On the left you will see Smoke Machine and then a gap with icon and then RPE. I would like the gap inbetween without the icon.

Can you help?

Thanks.

[Duncan Rounding]

Are you looking to just put a gap between specific sections rather than between all of them then?

[peblaco]

I see, well creating a blank section is a bit scruffy but if you did it that way a quick way might be to remove the icons altogether in the style sheet that way you'd get a natural looking gap.

[safetyindustrie]

Are you looking to just put a gap between specific sections rather than between all of them then?

Yes I am. Please and thanks!

[safetyindustrie]

I see, well creating a blank section is a bit scruffy but if you did it that way a quick way might be to remove the icons altogether in the style sheet that way you'd get a natural looking gap.

I might give that a go if 'drouding' cannot help me.

Thanks.

[safetyindustrie]

I see, well creating a blank section is a bit scruffy but if you did it that way a quick way might be to remove the icons altogether in the style sheet that way you'd get a natural looking gap.

Where about's in the style sheet can I find the icon to remove?

[peblaco]

Go to Design menu > Library > Web Page Outer > double click Actinic Stylesheet, right click and "Find" search for ul.products it will find something like the below, add the list-style: none; line as shown below:

ul.products {
line-height: normal;
padding: 0px 0px 0px 1px;
margin: 3px 0px 4px 15px;
font-size: <actinic:variable name="StandardFontSize" />;
color: <actinic:variable name="RequiredColor" />;
list-style: none;
}

[safetyindustrie]

Go to Design menu > Library > Web Page Outer > double click Actinic Stylesheet, right click and "Find" search for ul.products it will find something like the below, add the list-style: none; line as shown below:

ul.products {
line-height: normal;
padding: 0px 0px 0px 1px;
margin: 3px 0px 4px 15px;
font-size: <actinic:variable name="StandardFontSize" />;
color: <actinic:variable name="RequiredColor" />;
list-style: none;
}

Thanks again for your help. I was not ready to go through everything but am now.

Just got time now before launching to do some tidying up.

What I need to do now is break up the products list. I have removed the icon. If you please look at the site (http://www.safetyindustries.co.uk/beta/) on the left you will see the products. What is the easiest way to put a gap inbetween Smoke Machine and Respirator and PPE and Bags etc.

The list is too long and makes it hard to read.

Your help is appreciated.

[peblaco]

There's probably several ways to add a gap to the menu, a tidy way may be to add a new variable and blockif on the individual link code and specify it at section level, then use CSS to specify how that individual section link is to be styled.

[safetyindustrie]

There's probably several ways to add a gap to the menu, a tidy way may be to add a new variable and blockif on the individual link code and specify it at section level, then use CSS to specify how that individual section link is to be styled.

Thanks for that, however, im not completely clued up on this. Where would I start. Will launch the site next week and if I can do this, it would finish the site off nicely.

thanks.

[peblaco]

If you're a beginner then adding blockifs, variables and CSS is not a quick thing to explain, you'd probably need to read through various tutorials. If I had more time today I would write instructions unless someone else wants to jump in.

[safetyindustrie]

If you're a beginner then adding blockifs, variables and CSS is not a quick thing to explain, you'd probably need to read through various tutorials. If I had more time today I would write instructions unless someone else wants to jump in.

Thanks.

Just might have found a work around. If you see the site now, I have created 2 new sections and am using them as breaks, but the problem is the gap in between. Is it possible to set a minimum gap between each section, not a total size, just a minimum?

Alternatively, can I change some of the colours of the categories. For example, first 5 green, next 3 orange etc?

www.safetyindustries.co.uk/beta

thanks,

[peblaco]

Yes probably if you tweaked the CSS stylesheet, what about if you put a space in instead of no text at all? bit of a workaround but might work. Bear in mind if you use sections as breaks they appear empty on the sitemap too.

That's doable but not quickly because again something that would need additions of blockifs, variables and tweaking of the CSS stylesheet.