Guest Elf Posted May 4, 2007 Share Posted May 4, 2007 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 Quote Link to comment Share on other sites More sharing options...
markscarts Posted May 4, 2007 Share Posted May 4, 2007 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. Quote Link to comment Share on other sites More sharing options...
Guest Elf Posted May 4, 2007 Share Posted May 4, 2007 @markscarts, I didn't found this class.I have attached my layout.csslayout.css Quote Link to comment Share on other sites More sharing options...
markscarts Posted May 4, 2007 Share Posted May 4, 2007 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 :) Quote Link to comment Share on other sites More sharing options...
Guest Elf Posted May 4, 2007 Share Posted May 4, 2007 man, thank you very much for your help :) Quote Link to comment Share on other sites More sharing options...
markscarts Posted May 4, 2007 Share Posted May 4, 2007 No problem, happy to assist :) Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.