Guest Posted March 7, 2012 Share Posted March 7, 2012 I'm editing the layout of the category view. All I want is a list of products with a buy-button on the right. I use the Kurouto blue skin. I managed to remove the link for the detail and the price.(in layout.css and content.category.php) But I cannot get rid of the whitespace, see image: and also cannot get the buybutton behind the product name... Can I do this in <div class="details"> and where can I find this class? Thanks in advance! Quote Link to comment Share on other sites More sharing options...
Dirty Butter Posted March 7, 2012 Share Posted March 7, 2012 Try skins/styles/common.css - div.category_product div.details Quote Link to comment Share on other sites More sharing options...
Guest Posted March 7, 2012 Share Posted March 7, 2012 Thanks Dirty Butter for pointing me in the right direction. There is one problem still; I can not get the buy button behind the right product, see image: Beside the padding it has to move up one line... FYI: I did a lot of customizing version 3.0.4 (!) and I had to update because op a PHP-update. Now in CC is everything different so I have a hard time figuring out what is where etc. Thanks for your help! Quote Link to comment Share on other sites More sharing options...
Dirty Butter Posted March 7, 2012 Share Posted March 7, 2012 Could it be the Review code doing it? Quote Link to comment Share on other sites More sharing options...
Guest Posted March 7, 2012 Share Posted March 7, 2012 whatever I change on review or category in common.css it does not work. Could there be somewhere a <BR> so that the buybutton is put on the next line? Please any help appreciated, this is keeping me awake! Quote Link to comment Share on other sites More sharing options...
Dirty Butter Posted March 7, 2012 Share Posted March 7, 2012 What I meant was to play around with removing the Review section of your skin template/content.category.php. Maybe that would do it. Quote Link to comment Share on other sites More sharing options...
Guest Posted March 7, 2012 Share Posted March 7, 2012 Dear Dirty Butter (never thought I would say that once in my live...;-) I can not find any section with review in content.category.php. There are some in common.css but whatever I remove there is no change. The only code for this section in common.css left is: {if isset($PRODUCTS)} {foreach from=$PRODUCTS item=product} <form action="{$VAL_SELF}" method="post" enctype="application/x-www-form-urlencoded" class="addForm"> <class="category_product"> <h3>{$product.name}</h3> <class="details"> {if $product.ctrl_purchase && !$CATALOGUE_MODE} <p class="buy_button"><input type="text" name="add[{$product.product_id}][quantity]" value="1" class="quantity" /> <input type="submit" value="{$LANG.catalogue.add_to_basket}" class="button_white" /></p> {elseif $product.out} <p class="buy_button">{$LANG.catalogue.out_of_stock_short}</p> {/if} </form> {/foreach} {else} <p>{$LANG.category.no_products}</p> {/if} I think it has something to do with the <class="details"> but then I can not find this class... Could it be a <DIV> or a <P> thing? Thanks for your help, really appreciated! Quote Link to comment Share on other sites More sharing options...
Dirty Butter Posted March 8, 2012 Share Posted March 8, 2012 Call me DB if you prefer. LOL! Honest - we don't mean anything dirty by it. We sell vintage collectibles under the name Dirty Butter Estates Collectible Shoppe. It's not in a css file - if I'm right - and I sure don't know if I am - I'm looking at the yourskin/template/content.category.php {if $product.review_score} <p class="rating"> {for $i = 1; $i <= 5; $i++} {if $product.review_score >= $i} <img src="{$STORE_URL}/skins/{$SKIN_FOLDER}/images/common/star.png" alt="" /> {elseif $product.review_score > ($i - 1) && $product.review_score < $i} <img src="{$STORE_URL}/skins/{$SKIN_FOLDER}/images/common/star_half.png" alt="" /> {else} <img src="{$STORE_URL}/skins/{$SKIN_FOLDER}/images/common/star_off.png" alt="" /> {/if} {/for} </p> <p class="rating-info">{$LANG_REVIEW_INFO}</p> {/if} I was guessing that maybe CC leaves a space for a review, even if there's not one - and since you need all spaces deleted - this might be it. It's the blind leading the blind I fear. Usually by now someone who knows what they're doing joins in and provides a solution. Quote Link to comment Share on other sites More sharing options...
Hornblower Posted March 8, 2012 Share Posted March 8, 2012 Foton, I think DB is looking along the right lines. A couple of other things to consider: <h3></h3> will put in padding/margins and a line break after the closing tag by default . These can all be controlles by CSS.The page is normally designed to have other details and then the buy button (as DB has noted) How to get around this (suggestions to try!):changing <h3> tags for something you are more used to styling (<p> tags?)moving the buy button block higher so as to be generated before other content that may be casuing the unwanted space For me it would be the following bit of code in content,product.php <p class="buy_button"> <input type="text" name="quantity" value="1" class="quantity required" /> <input type="hidden" name="add" value="{$PRODUCT.product_id}" /> <input type="submit" value=" " class="button_basket" /> </p> just make sure that it appears after the opening form tag. BUT FIRST: See if you can find the code that is causing this effect and sort it out using styles. If you are using Firefox as you browser of choice make sure you have fire bug installed. If you are using IE9 all you have to do is hit F12. Both of these are extremely useful tools and will allow you to see which parts of the page are controlled by which bit of CSS, with handy highlights. You may find that it is just something cascading in the style sheet that you were unaware of, or that all you need to do is add an element with a float:right; etc etc Hope this gives you some pointers Quote Link to comment Share on other sites More sharing options...
Guest Posted March 8, 2012 Share Posted March 8, 2012 Dear Hornblower, Thanks for joining! I'm am realy sure that it is not in content.product.php because it is a list of prducts in a category. Putting the buy_button up one line inspired me to pushing arouns some code. This is the complete code of content.category.php (on this moment): <h2>{$category.cat_name}</h2> {if isset($PRODUCTS)} {foreach from=$PRODUCTS item=product} {$product.name}<p class="buy_button"><align=left><input class="quantity" name="add[{$product.product_id}][quantity]" value="1" type="text"> <input class="button_white" value="{$LANG.catalogue.add_to_basket}" type="submit"></align=left></p> {/foreach} {else} <p>{$LANG.category.no_products}</p> {/if} and its generates this page: When I put the code {$product.name} after the class like this: <h3>{$category.cat_name}</h3> {if isset($PRODUCTS)} {foreach from=$PRODUCTS item=product} <p class="buy_button"><align=left>{$product.name}<input class="quantity" name="add[{$product.product_id}][quantity]" value="1" type="text"> <input class="button_white" value="{$LANG.catalogue.add_to_basket}" type="submit"></align=left></p> {/foreach} {else} <p>{$LANG.category.no_products}</p> {/if} its generates almost the result I would die for, like this: The ''only'' thing that has to happen is to get the productnames on the left again. I think it is almost there... Regards, Foton Quote Link to comment Share on other sites More sharing options...
Guest Viola Posted March 8, 2012 Share Posted March 8, 2012 There's no "align" tag in HTML5. Also, your <input> tags aren't closed; it should be <input class="quantity" name="add[{$product.product_id}][quantity]" value="1" " type="text" /> The products on category pages are each in a form element in the default templates - I suspect without that form the Buy buttons won't work. Try something like this: HTML {foreach from=$PRODUCTS item=product} <form action="{$VAL_SELF}" method="post" enctype="application/x-www-form-urlencoded" class="addForm"> {$product.name} <input class="quantity" name="add[{$product.product_id}][quantity]" value="1" type="text" /> <input class="button_white" value="{$LANG.catalogue.add_to_basket}" type="submit" /> </form> {/foreach} CSS .addForm{ display: block; text-align:right; } Quote Link to comment Share on other sites More sharing options...
Guest Posted March 9, 2012 Share Posted March 9, 2012 Hi Viola, Thanks for pointing to the missing tag for closing. I messed up the content.category.php for searching why this could not line up after each other. I use your code quickly to see what would happen, and this happened: I self was searching in the classes and put a extra class in the common.css lijke this: p.cattext { float: left; } and put it in the content.category.php like this: {foreach from=$PRODUCTS item=product} <p class="cattext">{$product.name}<p class="buy_button"><input type="text" name="add[{$product.product_id}][quantity]" value="1" class="quantity" /> <input type="submit" value="{$LANG.catalogue.add_to_basket}" class="button_white" /></p> {/foreach} and suddently it appears like this: and that the way it should look! Now I have to clean up the mess and make sure the button works again. Thanks for the contrubutions! 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.