Top level section list

[sirmyser]

Hi,

I am using the standard top level section list placed by the wizard. As a former user I remember being able to change the section list box for individual images that link to their relevant sections.. not seen much information on this here (or have I missed it)?

Is it something fairly simple to do? or is it inserting some code and tweaking the layout settings?

Thanks.

[sirmyser]

Ok...

Ok, I have managed to do this by going into site options > layout > site > top level section link layout and change this setting to Image only. Then creating a custom 'tab' image (linked in the sections details, in design view), with the section name detailed in the image. The one issue I had with this was the same image appearing against the sub section link description. However this is overidden as long as I designate an image for that sub-section page details.. I also changed the section link layout to 'image only' so I can have my fragment column width set at 3. This allows me to create nice (custom) section image box's with the relevant section information again included in the image. (just thought i'd share). Also, the standard sub section list option gets rid of the horizontal line.

I know I have probably took the 'long way around' but it works for me..

The only remaining issue is there is a significant space between the new images that I have created for the top level section links.. any body know how I can reduce this space? as I need the images to sit directly on top of each other and allow me full control over how my top level section links 'box' will eventually look.

If I can figure out the variable fragment column count on my home page (1 for first row, then 3 for all subsequent row's) then I really am on a winner

[panamint]

Differing no of fragments in each row

Try this - originally from Norman Rouxel.

I've used this extensively on my web site: www.panamint.co.uk.

Here's a rough guide that does away with embedded HTML and does it all via selecting the appropriate layout for each fragment.

This is for Brochure pages only (as the Section pages mix Products and Fragments together and would be a bit more complex).

First we lose all the table code that's involved in displaying each fragment. This is easily done by selecting Bare Brochure Fragment List in Page Details / Layout / Fragment / Brochure Fragment List Layout.

Now make three alternative Fragment layouts (OneFragmentAcross, TwoFragmentsAcross, ThreeFragmentsAcross) that start and end with
Code:

<div class="onefragmentacross">
.
.
</div>

and
Code:

<div class="twofragmentsacross">
.
.
</div>

and
Code:

<div class="threefragmentsacross">
.
.
</div>

And in your CSS have (assuming your content area is 600 pixels wide).
Code:

.onefragmentacross {width:600px; clear:both;}
.twofragmentsacross {width:300px; float:left;}
.threefragmentsacross {width:200px; float:left;}

The twofragmentsacross and threefragmentsacross CSS makes them line up side by side until there's no room for another. Since our overall width is 600px that will let only two or three fit alongside depending on which is selected.

Now simply set out your page using the appropriate Fragment layouts. E.g. we'll put 6 fragments one after the other using layouts:
Code:

OneFragmentAcross

TwoFragmentsAcross
TwoFragmentsAcross

ThreeFragmentsAcross
ThreeFragmentsAcross
ThreeFragmentsAcross

Voila! One full width fragment, followed by 2 across, followed by 3 across.
__________________

[sirmyser]

Thanks

Thanks it has worked a treat.. they were reluctant to display at first but when I previewed my store in the browser they all slotted into place Also, as I wanted image only fragments I based my three alternative fragment layouts on the 'image only' as the layouts with text kicks them all out of shape.. Admittedly it took me a while to figure it all out from what you said but I am a little rusty. I eventually inserted the CSS code in the right place (using the Actinic style sheet button) under "Styles for product image and fragment image placement in some layouts----" and entered the code for the alternative layouts by going into design/library, fragments and doubleclicking they new layouts to enter the <div class="onefragmentacross"> at the very start of the code and</div> at the very end of each of the three new layouts. took me a while to figure out that the -
.
.
was the code in between (duh!) lol

I did check my store width under site options/site/store width to make sure they were set at 600, and after making it wider and reverting back to 600 again, the fragments apeared to have lined up as they were set (as they did in store preview).

Many thanks.