New Product Layout

[Simon Bridges]

I am sure there is a simple solution but I will be ***** if I can find it. Included are two images; 1 shows what I don't want, 2 shows what I want.

Image 1. New Product listing auto generated on what we use as our homepage - Column count 3(want 4) Images below text(want above). Amount of text forces pics up and down horizontally(want them lined up)
Image 2. Section link layout that I want to replicate on the homepage to replace what's currently there.

Any ideas?
Many thanks
Simon

[jont]

To move the image above simply move the ProductImage layout above the text layout.

The alignment is coming from the layout list. Navigate to the parent layout and click on the orange link at the top of the code pane. Here you will see the tabs laying out the rows and columns... the vertical alignment is probably set to middle but you need top.

[leehack]

The order in which items show in a layout is on the whole chronological. So if code is in the order A,B,C, it shows in the order A,B,C also. As long as you understand (mixture of html and actinic experience) which part is A, B or C, you just move the order around to suit. How many products wide is set in the list layout settings for that specific area, select the layout and then move up a level til you see the orange underline link, that is what you need to change.

To an experienced designer, what you want to do is about 10 mins work, to you it might be a couple of hours, you need to make the decision whether you want to learn or pay. I'd advise sticking with the learn yourself method for this part as it will help you tenfold for future amendments. You need to grasp list layout settings and fundamentally how html and actinic code create the pages/areas on your site. If you cannot grasp that part, farm the work out and concentrate on what you can do. The design|library will help you a lot in beginning to understand the concept of how things work, simply snapshot before you play and just revert if you cock it up.

If you get most of the way there, show us the code you have done so far and we can help explain/correct the current situation.

[jont]

The order in which items show in a layout is on the whole chronological.

Caveat ... floated and positioned elements .. they confuse the life out of many

.. but in this case I think they are basic settings so are rendered on the page in the order they appear in the design tab view.

[leehack]

Caveat ... floated and positioned elements .. they confuse the life out of many

The caveat was the 'on the whole' .

[Simon Bridges]

Thanks Jonty and Lee, I have been mucking about with layouts in Actinic for some time and have a reasonable grasp of how the HTML and actinic layouts control page elements so I will follow your instructions and post back anything that may help others in the future.
Many thanks chaps
Simon

[Simon Bridges]

OK, Have managed to achieve the majority of the layout changes by changing the order as advised above. I am still really struggling to find the column count and more urgently cannot find what/where controls the thin border of dotted outline between products(see image). I am sure this is controlled from the CSS somewhere but if I change it there it will affect all the 'dividers' site wide?
thanks again, this is invaluable help as always.
Simon

[jont]

The number comes from inside the layout list. Switch to design tab and navigate to layout "Homeage bets sellers list" .. or the new arrivals list...

Click on the orange "click here to edit layout list settings" ...
Switch to "edit rows and columns" tab .... middle rows will be set to 3 .. change accordingly

[jont]

what/where controls the thin border of dotted outline between products

That comes from the stylesheet class .dotted_outline_blue

If you want to keep this and only change on the homepage in the layout list above click into the "Before row", "first row" etc boxes against the "middle row" and create a new class there ... eg : homePageBox (change from .dotted_outline_blue)

.. in the stylesheet copy and paste .dotted_outline_blue { ...... } and rename to homePageBox and delete the border styling.

[Simon Bridges]

Jonty this is great, have now sussed out 99% of what I needed to do with column counts, dotted line etc. many many thanks.

Last one now I promise, having trouble getting columns to align(see image attached) Is the text forcing the alignment somehow? .Within the 'mini new products item' text and image seem to be aligned left although I can't find reference to this anywhere in the code. Thanks again Jonty
Simon

[jont]

.. home stretch.....

It is due to the width of the text forcing the mis-alignment.... the layout list is typically set to a % width ... try setting a fixed with (eg 250px)

[leehack]

I'd imagine that the top row settings for the <td> are different to the middle settings. One probably has align="center", the other probably doesn't. Get yourself Firefox and Firebug, you can solve things like this in about 60 seconds then, we all use it, couldn't do without it.

[Simon Bridges]

Got there finally Jonty, awesome. As suggested, set the width to 150px as opposed to ...%.
Thanks Lee, have installed firebug, already use firefox web developer which is great, will have a play with firebug.

Once again thanks chaps for the help. Good job this forum is so well supported by you all.
Simon

[jont]

I am sure there is a simple solution

Simple now you know