Products in cells

[Guest Elf]

Is someone knows how to make products on a main page to looks like in this way:

placed in cells

Thanks in advance for your reply

[markscarts]

Well, I don't know your terminology. "placed in cells" does this mean you want to code it as a table? I am thinkinng you probably just mean that you want it to appear in boxes as shown, with borders, etc.?

The products are placed in divisions which float to the left in CubeCart. You can use CSS style the divisions and you could make the boxes to be a background image on that division - or you could code a box top image and box bottom image and use borders on the side of center division. There are many ways to accomplish this.

In the latest versions of CubeCart, I think 3.0.13 and up, there is a division class named .lateProds or something very similar to be found in skins/XX/styleSheets/layout.css, this is the division you should be working with.

[Guest Elf]

@markscarts, I didn't found this class.I have attached my layout.css

layout.css

[markscarts]

hmm, which CC version are you using? This class was added in either 3.0.13, 3.0.14 or 3.0.15

.latestProds {

float: left;

text-align: center;

width: 131px;

height: 120px;

}

If you are using 3.0.15 and don't see it, it may be because you have a custom skin that had been based on an earlier version.

Anyway, you can add the class yourself. Look in skins/XX/styleTemplates/content/index.tpl and find this code which creates an individual box for latest products:

			<div style="float: left; text-align: center; width: {VAL_WIDTH}px;">

You should find that code or something very similar. Now, replace that code with this:

			<div class="latestProds">

Now, place this code at the end of layout.css:

.latestProds {

	 float: left;

	 text-align: center;

	border: 1px solid red;

	margin-left:10px;

	margin-bottom: 10px;

	 width: 131px;

	 height: 120px;

 }

The red margin is simply to help you see the box that contains latest products. Adjust margins, width and height to align the boxes as you see fit. If you want to use a background image on the division to make your container boxes look like the ones in your example, add it in the appropriate manner (check how other background immages are added in this stylesheet elsewhere).

Once you have moved the boxes around, adjusted sizes, margins, etc. you can delete or comment out the line that makes a red border.

Have fun :)

[Guest Elf]

man, thank you very much for your help :)

[markscarts]

No problem, happy to assist :)