CSS and product listing

  • Posts: 7
  • Thank you received: 0
13 years 8 months ago #39114

Hey

I have recently launched a shop at: stephanrandahl.dk/index.php/smagen-af-kr...en-af-kreta-butikken . But I can't get the look right:
1) I want the description of the products to be visible on the product listing page. How to?
2) I want the layout to go all the way from left to right. How to?
3) I want some more space/margins between the columns. How to?
4) I want the product title to be placed on top or in the middle of the row. NOT in the bottom of the row as it is now. How to?

Can You folks please help me, please :)

Please Log in or Create an account to join the conversation.

  • Posts: 84623
  • Thank you received: 13759
  • MODERATOR
13 years 8 months ago #39213

Hi,

1. You choose to display your products listing with a "table" layout. That does not display the product description.
If you want to have the product description, you should change it to "div" and change the item box layout to "image and description". That has to be done in the hikashop options of your menu (you can access it easily via the menu Display->Content menus).
Otherwise, if you want to keep that layout and have the description, you will have to edit the file "table" of the view "product" via the menu Display->Views and change the code there to display the description.

2. You can do that by adding CSS to the front end CSS file of HikaShop in the Display tab of the configuration:
.hikashop_products_table{ width: 100% !important; }

3. 2 will solve 3.

4. You can use that CSS for that:
.hikashop_product_name_row{ vertical-align: middle !important; }

Please Log in or Create an account to join the conversation.

  • Posts: 7
  • Thank you received: 0
13 years 8 months ago #39247

Hi again.

And thanks for the quick response. I am trying to understand the code, but I have problems with question 1) The others are solved, thanks to You.

My problem is, that I do not know, where to look. I have to: "edit the file "table" of the view "product" via the menu Display->Views and change the code there to display the description.". I can not figure that one out. I can not see any file named "table". I can see one called "listing_table", but nothing happens with the view, when I edit it. What am I doing wrong?

Thank You...

Please Log in or Create an account to join the conversation.

  • Posts: 84623
  • Thank you received: 13759
  • MODERATOR
13 years 8 months ago #39360

My bad, it's indeed the file listing_table and not just table.
If you don't see the editor when you edit it, go in the joomla plugins manager and turn off the codemirror plugin. Then, it should display you the file when you edit it.

Please Log in or Create an account to join the conversation.

  • Posts: 7
  • Thank you received: 0
13 years 8 months ago #41309

Dear Nicolas

Sorry to disturb you again. Still can't get the look right. Now I am going for the div layout, as you suggested:

stephanrandahl.dk/index.php/test-af-smagen-af-kreta-butikken

But something is still not quite right:
1) The price is left oriented, where it should be centered. Uh, I just figured out, that is because there was some space left for the tax prices. You do not need to answer on this!!!

2) The title and the description is too low. I want them up on the page, så both the title and description is moved up side by side with the picture. For now there is a lot of empty space to the right of the picture.
I have looked in the css files, but after more hours of looking, I am close to give up, can't find the right place to edit.

3) When I process a Paypal order, and the page redirects, I get an error from Paypal saying, that the cart is empty. It did work for 14 days ago, so therefore I must have changed something I should not. I have read in the forum what to try, but nothing works. Do you have any other ideas?


I appreciate your help very much.
Stephan

Last edit: 13 years 8 months ago by Smagenafkreta. Reason: I have found an answer and I have another question

Please Log in or Create an account to join the conversation.

  • Posts: 84623
  • Thank you received: 13759
  • MODERATOR
13 years 8 months ago #41454

Hi,

2. That comes from the CSS:
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-size: 100%;
vertical-align: baseline;
}

in the file stephanrandahl.dk/templates/a4joomla-autumn/css/template.css of your template.
If you remove that CSS and refresh your browser cache it will display correctly.

3. Toggle the option "send order details" in the paypal plugin options and try again.

Please Log in or Create an account to join the conversation.

Time to create page: 0.043 seconds
Powered by Kunena Forum