[email protected] Posted September 11, 2018 Share Posted September 11, 2018 Hi, I am amending the 'content.category.php' page and I am trying to reduce the height of the rows for what concerns the 'row product_list_view'. I have successfully changed its content but I would like to reduce it as much as possible to be able to show as many products as possible. Where should I look to do that ? The page I am referring to is http://www.preserving-football-history.net/world-cup/jules-rimet-cups.html Thank you, as per usual, for your directives. Regards, Pippo Link to comment Share on other sites More sharing options...
bsmither Posted September 11, 2018 Share Posted September 11, 2018 Here is a hack that works around the problem of Foundation's .panel class having padding:1.25rem. The .panel class is applied tot he <form> tag which is used in both the .product_list_view and the .product_grid_view. We are only interested in the .product_list_view, while not affecting the .product_grid_view. That would require somehow applying a style to that particular node that has as a child the .product_list_view class. jQuery has a nice selector that gives us $(".panel:has(.product_list_view)").css( "padding","0" );. But this is javascript and, while it is do-able, let's stick to CSS. So, that leaves applying a negative margin to .product_list_view to counter-act the .panel's padding. Near line 70, find: <form action="{$VAL_SELF}" method="post" class="panel add_to_basket"> <div class="row product_list_view"> Change to: <form action="{$VAL_SELF}" method="post" class="panel add_to_basket"> <div class="row product_list_view" style="margin: -1.25rem 0"> There is a bit more we can do to reduce the interval spacing. Link to comment Share on other sites More sharing options...
[email protected] Posted September 12, 2018 Author Share Posted September 12, 2018 It seems to be working this way. Perfect thank you. Link to comment Share on other sites More sharing options...
Claudia M Posted September 13, 2018 Share Posted September 13, 2018 How would you do it for the grid view? Nevermind Link to comment Share on other sites More sharing options...
[email protected] Posted September 20, 2018 Author Share Posted September 20, 2018 Hi, what can we do to remove the interval spacing and remove even more the height of the box or what concerns the row product_list_view ? As you can see at http://www.preserving-football-history.net/world-cup/jules-rimet-cups.html I have all the content over two lines but there is still plenty of space under in the same box and a lot of space between products . I have already reduced the margin to -1.50 but after that it starts overscanning the content out of its box. Can the content be centered ? Thank you for your help, Pippo style="margin: -1.50rem 0" Link to comment Share on other sites More sharing options...
bsmither Posted September 20, 2018 Share Posted September 20, 2018 Let's try this. Restore the edit you made as detailed above. Find: <div id="ccScroll"> <ul class="small-block-grid-1 product_list" data-equalizer> {foreach from=$PRODUCTS item=product} <li> <form action="{$VAL_SELF}" method="post" class="panel add_to_basket"> <div class="row product_list_view"> Change to: <div id="ccScroll"><style>.row.product_list_view.panel{ padding:0;margin-top:-1rem; }</style> <ul class="small-block-grid-1 product_list" data-equalizer> {foreach from=$PRODUCTS item=product} <li> <form action="{$VAL_SELF}" method="post" class="add_to_basket"> <div class="row product_list_view panel"> Find: <div class="product_grid_view hide"> Change to: <div class="product_grid_view panel hide"> (The spaces just after and before the braces enclosing the CSS rule parameters are required.) Link to comment Share on other sites More sharing options...
[email protected] Posted September 24, 2018 Author Share Posted September 24, 2018 Hi, yes, this succeeded in reducing the gap/space between different lines of content, however, how would one reduce the height to two lines of content only ? Also, if I wanted to change the background colour to white rather than the current shade of grey, where would I action that ? Thank you for all your help. Pippo Link to comment Share on other sites More sharing options...
bsmither Posted September 24, 2018 Share Posted September 24, 2018 Your template code probably looks like: <div class="small-4 columns"> <h6> <a href="http://www.preserving-football-history.net/cisco-webex-room-kit.html" title="CISCO Webex Room Kit">CISCO Webex Room Kit 2-2</a> <br> <p>another short description</p> <br> </h6> </div> with the link, title, and description being the respective placeholders. The description editor (CKeditor) will put paragraph tags around the description text - nothing you can do about that - and that adds just a bit of space. But you can try to reorganize this code to be: <div class="small-4 columns"> <h6 style="margin-bottom:0.1rem;"> <a href="http://www.preserving-football-history.net/world-cup/jules-rimet-cups/cisco-webex-board-70.html" title="CISCO Webex Board 70"">CISCO Webex Board 70" 3-0</a> </h6> <p>Final</p> </div> Put only the link and title in the <h6> tag and remove the <br> tags. Background color? Of the detail row? That is, the "panel" CSS class? The following affects all panels: You can add that rule to cubecart.default.css: .panel { background-color:inherit; } Link to comment Share on other sites More sharing options...
[email protected] Posted September 25, 2018 Author Share Posted September 25, 2018 Thank you, all sorted now. I actually used " margin-bottom:-1rem; and it fixed the space issue. Exactly what needed. I fixed the background-color and I wonder how to implement alternate rows colors. I tried with : tr:nth-child(even) {background: #CCC} tr:nth-child(odd) {background: #FFF} in cubecart.default.css with .panel. Is this possible at all in css ? Link to comment Share on other sites More sharing options...
bsmither Posted September 25, 2018 Share Posted September 25, 2018 Those rows are not <tr> (table rows). They are <div> blocks in a list. I'm not sure how to get them to alternate. Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.