Salus Posted February 10, 2014 Share Posted February 10, 2014 Hi everyone. First of all let me thank you for the great job you are doing here sharing all this information for us, users, I for example would be probably dead without this forum So, THANK YOU Now, I need some help with a problem I couldn`t find any solution on the these forums yet - maybe some headsup to a link would be enough. I have somehow managed to tweak the default theme so I can have it show my products in 3 columns insted of the default one product/line arrangement. Honestly dunno how I did it, I am not very much into html and/or php stuff -actually I`m not into it AT ALL. I used a modified code copy-pasted from a tutorial found somewhere here http://nemops.com/grid-display-prestashop-1-5/#.UvjX9WKSxWB, or somewhere else, not sure anymore, I really dont undestand too much of it anyway I`d like to ask for some help aranging those products properly in page. Please check the attached image to see that the produts list is not equally sorted in the lines, in first line I get 3 products, the second line only 2 (missing the first column placeholder), the third again 3 products, then again only 2 (this time the 3-rd column missing) and so on. I guess the problem is because the product names lenght are not the same, and the prestashop is handling them dinamically, but i cant think of a solution by myself. How can I solve this to have all squares showing products having equal sizes on x and y? Oh boy, wonder if did I manage to make myself clear or.... Any help would be greatly appreciated, thank you in advance. (A step-by step lesson would be the best, like for babies...) Salus Link to comment Share on other sites More sharing options...
Paulito Posted February 10, 2014 Share Posted February 10, 2014 Good morning Your site is in maintenance mode Also would be a good idea to give URL Paul Link to comment Share on other sites More sharing options...
vekia Posted February 10, 2014 Share Posted February 10, 2014 you have to define height param for product name, use there for example height:50px; and everything will work 1 Link to comment Share on other sites More sharing options...
Salus Posted February 11, 2014 Author Share Posted February 11, 2014 (edited) Thank you guys for quick replies. Paulito, of course it`s inmaitenance mode, because it`s still under construction. The url is www.salus-tehnomed.ro/ro, and I will leave it open for today. Vekia, what you say seems to be the solution, but please tell me WHERE exactly (which file) I can do that and HOW? (shame but true: I cant recognize on my own the code part which stores this, as I said this is the first time I laid my eyes on a html/php code, but I`m hoping to become an expert with your help ) Edited February 11, 2014 by Salus (see edit history) Link to comment Share on other sites More sharing options...
vekia Posted February 11, 2014 Share Posted February 11, 2014 add height:35px to: #product_list li h3 { padding: 0 0 10px 0; font-size: 13px; color: #000; height: 35px; } it's a part of product.css file (i suppose so because all your css files are minified now) Link to comment Share on other sites More sharing options...
Salus Posted February 11, 2014 Author Share Posted February 11, 2014 add height:35px to: #product_list li h3 { padding: 0 0 10px 0; font-size: 13px; color: #000; height: 35px; } it's a part of product.css file (i suppose so because all your css files are minified now) I did a detailed search in themes/*mydefaultmodifiedthemename*/css/product.css, and I could not find even a single line beginning with #product_list . I`m using notepad++ What do you mean by "all my css files are minified now"? Please help me solve this and I promise I start learning some php coding Please point me to a nice tutorial, i am so ashamed that I do not understand nothing of this... this is not my profession ya know, I`m just forced to do this right now. Launching online store in 1 week, and our web-guy fell really ill, cant bother him for a while. Link to comment Share on other sites More sharing options...
vekia Posted February 11, 2014 Share Posted February 11, 2014 so please turn off ccc for css files, then i will be able to give you correct filename Link to comment Share on other sites More sharing options...
Salus Posted February 11, 2014 Author Share Posted February 11, 2014 (edited) Ok, if you meant to switch Combine Compress and Cache from "use ccc for css" to "keep css as original", then I did it. - saved. If I press F12, then I see that this page refers to category <body id="category" class="category"> I also found out (by myself, lol) , that i have to edit product-list.tpl to change the appearance of each product in the list (I took out the description, it is unnecesary for the prewiew). But I cant find a way to edit the size x/y of the product preview box. I will try in product-list.css now... Wait, I found the above mentioned code part in product-list.css. IT had no height defined, so I added the height: 35px to the bottom, but it does nothing.... Ok, this is what I sorted out: This #product_list li h3 { padding:0 0 10px 0; font-size:6px; color:#000 height: 35px is refering only to the name of the product, it does not adjust the size of the box containing it... Edited February 11, 2014 by Salus (see edit history) Link to comment Share on other sites More sharing options...
vekia Posted February 11, 2014 Share Posted February 11, 2014 product-list.css line 48 #product_list li h3 { padding: 0 0 10px 0; font-size: 13px; color: #000 height: 35px; } you added height param indeed, but forgot about semicolon after color: #000 it should be: color:#000; instead of color:#000 use this stylesheet: #product_list li h3 { padding: 0 0 10px 0; font-size: 13px; color: #000; display: block; clear: both; height: 40px; } Link to comment Share on other sites More sharing options...
Salus Posted February 11, 2014 Author Share Posted February 11, 2014 Vekia, I love you, man Thank you. It works. The key was that part with the display: block and clear:both. Changing only the height to anything did nothing (cleared cache and all before), but adding those two lines did magic. Link to comment Share on other sites More sharing options...
Salus Posted February 11, 2014 Author Share Posted February 11, 2014 (edited) I would send you flowers, vekia, im so grateful, thank you BUT, i am not closing this topic as solved YET, couse there are other things, as you may have expected, vekia, so please dont go anywhere Your solution works for every product, EXCEPT if the product is ON SALE. All products that are on sale (or have any other things to display above the regular information). these exceptions are taller than the others, hence again breaking the view. And I also would like to change the position of that COMPARE check box to the bottom of every product preview page.... aaand change the size of the add to cart box as well... aaaand can I make translations of english text directly on the .tpl files, or do I have to make it in the modules/translations? Can you help me with those too or I profided already enough of you? Edited February 11, 2014 by Salus (see edit history) Link to comment Share on other sites More sharing options...
Salus Posted February 11, 2014 Author Share Posted February 11, 2014 I spent some time fiddling around with product-list.css height settings, and came to the decision that there must be a file more powerful than product-list.css that overrides settings from here, because changing the height often does nothing. Link to comment Share on other sites More sharing options...
vekia Posted February 11, 2014 Share Posted February 11, 2014 can you share url to categories where i can find "ON SALE" products/ Link to comment Share on other sites More sharing options...
Salus Posted February 11, 2014 Author Share Posted February 11, 2014 Sure, here it is one: http://www.salus-tehnomed.ro/ro/1003-tensm_digit As you can see, I changed a few numbers here and there to see the effects, dont bother with that. I also changed something in global.css last week, wich modified the center column width, so the product boxes are not in the middle anymore... I forgot what did I change... dont bother with that either, i will try to correct it. Link to comment Share on other sites More sharing options...
vekia Posted February 11, 2014 Share Posted February 11, 2014 thank you it looks strange indeed. what do you think about something like: Link to comment Share on other sites More sharing options...
Salus Posted February 12, 2014 Author Share Posted February 12, 2014 (edited) thank you it looks strange indeed. what do you think about something like: Would be PERFECT Edited February 12, 2014 by Salus (see edit history) Link to comment Share on other sites More sharing options...
vekia Posted February 12, 2014 Share Posted February 12, 2014 step by step instruction: 1) http://www.salus-tehnomed.ro/themes/default_oszlopos/css/product_list.css line 4, add position:relative; to #product_list li as i show below: #product_list li { text-align: center; float: left; width: 144px; padding: 12px; margin-bottom: 12px; margin-right: 12px; background-color: #f9f9f9; position:relative; } 2. the same file line 111 add margin-top:10px; to: #product_list li p.compare { padding-bottom: 0; margin-bottom: 0; margin-top:10px; } 3) the same file, line ~69 use this code instead of original: #product_list li .discount, ul#product_list li .on_sale, ul#product_list li .online_only { display: block; font-weight: bold; margin: 5px 0; padding: 1px 5px; color: #FFF; text-transform: uppercase; position: absolute; top: 0px; left: 0px; margin: 0px; background: red; } effect: Link to comment Share on other sites More sharing options...
Salus Posted February 12, 2014 Author Share Posted February 12, 2014 Oh boy, it`s just perfect, I like it very much, works perfect on the whole site. Thank you vekia, you did a LOT for me Check it out: http://www.salus-tehnomed.ro/ro/1003-tensm_digit -just changed the red tone a bit. I`m a happy man Link to comment Share on other sites More sharing options...
vekia Posted February 12, 2014 Share Posted February 12, 2014 you're welcome glad to hear that you're happy man one more thing, take a look: isn't it strange? in my opinion, it is global.css add clear:both; to: #center_column .sortPagiBar { padding: 10px; font: normal 11px Arial, Verdana, sans-serif; color: #666; background: #eee; clear: both; } effect: Link to comment Share on other sites More sharing options...
Salus Posted February 13, 2014 Author Share Posted February 13, 2014 Yes, it is strange, glad you noticed that, I think I did that when fiddling around with .tpl files. (I am so proud of my notepad ++ editor that now I edit everything ) I didnt say nothing about that couse I was hoping that I can roll back my actions and correct what I did there - but couldnt find it Thank you for the code, I`m really grateful for that. Oh boy, I have SOOO much to learn... I feel like an elephant in the porcelain shop. Link to comment Share on other sites More sharing options...
vekia Posted February 13, 2014 Share Posted February 13, 2014 i marked this thread as solved. if you need additional help, dont hesitate to write new threads with regards, Milos Link to comment Share on other sites More sharing options...
Salus Posted February 13, 2014 Author Share Posted February 13, 2014 Sure, it is SOLVED, thank you very much vekia, for all the help See you around. Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now