CSS for editing product listing

Giscard
Topic Author
Offline

7 years 1 day ago #311807 by Giscard

CSS for editing product listing was created by Giscard

Hello,

I used Inspector for editing the product listing.
I changed the quantity size but I would like to put the field in the center of the each listing.
I saw that If I change div.hikashop_subcontainer.thumnail, the field is in the right order. But my tries wasnt so accurate and successful.
Also, as you can see, if there are characteristics, the display isnt in block. I tried to do that with flexbox, but I failed as well. Anyways, my thought is that the product listings should be in order, not like wave.

Could you please help me?

Thank you in advance.

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

Philip
Offline

7 years 1 day ago - 7 years 1 day ago #311810 by Philip

Replied by Philip on topic CSS for editing product listing

Hello,

I think that you have to "target" the table that is contained in the form, and by using a little trick :

margin-left: auto;
margin-right: auto;

Note : You can have a look on this tutorial to see how to proceed.
Hope this will help you to get what you need.
Regards

Last edit: 7 years 1 day ago by Philip.

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

Giscard
Topic Author
Offline

7 years 21 hours ago #311825 by Giscard

Replied by Giscard on topic CSS for editing product listing

Hello,

I fixed the table, but I tried to fix the .hikashop_subcontainer form without much success. I also tried Inspector to see the changes in front-end but when I apply them in the custom CSS, the cart is setting in the product_title. I am sure that I am doing something wrong, because I havent achieve a vertical alignment
Could you please point me in the right direction?

Thank you in advance.

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

Philip
Offline

7 years 10 hours ago - 7 years 20 hours ago #311828 by Philip

Replied by Philip on topic CSS for editing product listing

Hello,

I'm sorry but I don't really understand what you mean by "fix the .hikashop_subcontainer form" can you precise what you want to do because so far when I look your website I don't really see any display issue.

Awaiting news from you to move forward on your subject.
Regards

Last edit: 7 years 20 hours ago by Philip.

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

Giscard
Topic Author
Offline

7 years 10 hours ago #311852 by Giscard

Replied by Giscard on topic CSS for editing product listing

Hello,

Well.. If you check here: www.e-myrat.gr/index.php/xartopoleio/eks...r-pistolia-silikonis , the "add to cart" of each product is not in horizontal alignment. Also, the products with characteristics, are being dispalyed wrong as well. I would like everything to be in horizontal order.

Also here: www.e-myrat.gr/index.php/xartopoleio/pro...mitstart=30&limit=30 products with many words as title, have the "add to cart" in different margin than the others.

I tried to test via inspector, but didnt get results.

Thank you in advance.

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

Philip
Offline

6 years 11 months ago - 6 years 11 months ago #311873 by Philip

Replied by Philip on topic CSS for editing product listing

Hello,

- For vertical align your button, you can use this kind of Css command on your add to cart button :
position: absolute;
bottom: 25px;
left: 30%;

- For manage your title, I think that you can use like for the form (margin-left & margin-right in auto) and maybe add a width to restrict your product name.

Hope this will help you.
Regards

Last edit: 6 years 11 months ago by Philip.

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

Giscard
Topic Author
Offline

6 years 11 months ago #311878 by Giscard

Replied by Giscard on topic CSS for editing product listing

Hello,

Yes, I fixed everything.

Thank you very much.

The following user(s) said Thank You: Philip

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

Giscard
Topic Author
Offline

6 years 11 months ago #311904 by Giscard

Replied by Giscard on topic CSS for editing product listing

Hello,

Now I have this: www.e-myrat.gr/index.php/tsantes-kasetin...oller-glow-901251-73 . The add to cart, is in the quantity field.

I cant change the a.hikacart bottom, because the changes will apply everywhere.
I test the .hikabtn, which gavbe results but when I ty to change the css in file, changes doesnt apply.

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

Philip
Offline

6 years 11 months ago - 6 years 11 months ago #311935 by Philip

Replied by Philip on topic CSS for editing product listing

Hello,

then, why you don't use a more precise Css selector ? This tutorial
will explain in details what I mean.
I suggest you, to use 2 class (or id), like on this idea :

.html_class_page .button_class html {
your order command css;
}

Hope this will help you.
Regards

Last edit: 6 years 11 months ago by Philip.

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

Giscard
Topic Author
Offline

6 years 11 months ago - 6 years 11 months ago #311965 by Giscard

Replied by Giscard on topic CSS for editing product listing

Hello,

In that case, I used :

.hikabtn.hikacart {
position: absolute;
bottom: -30px;
left: 0%;
}

And the cart under the quantity field set right. But the cart under "related products" is .hikabtn.hikacart and moved as well under. So in that case, it didnt displayed.
Also, the .hikacart in product listing was affected as well.

To sum up, I am 100% sure that I am doing the editing wrong.

Edit: A page with the example above: www.e-myrat.gr/index.php/tsantes-kasetin...oller-glow-901251-73

Last edit: 6 years 11 months ago by Giscard.

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

Philip
Offline

6 years 11 months ago - 6 years 11 months ago #311969 by Philip

Replied by Philip on topic CSS for editing product listing

Hello,

You have to understand this scheme :

To better understand the idea here

.html_class_page .button_class html {
your order command css;
}

The idea is to have a specific html class (on the first level) in order to restrict your css command (second class level, the real targeted element) to avoid your previous issue on other page.

Regards

Last edit: 6 years 11 months ago by Philip.

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

Giscard
Topic Author
Offline

6 years 11 months ago #311980 by Giscard

Replied by Giscard on topic CSS for editing product listing

Hello,

So, in that case would be that?

.hk-row-fluid .hikabtn, .hika_j2 .btn html {
bottom: -50px;
}

I understood the tutorial and it is useful to be honest, but I am missing the class and all the edits are affect the rest css, which means that I am picking the wrong one.

Thank you in advance.

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

Philip
Offline

6 years 11 months ago - 6 years 11 months ago #311985 by Philip

Replied by Philip on topic CSS for editing product listing

Hello,

You have to find the class that refer to your item menu (with his Id) then you will be sure to restrict your css command on this part.
More specifically you have an id, hikashop_category_information_menu_id.

You have to navigate through your html code with your inspector tool to find the most efficient class or id.
Regards

Last edit: 6 years 11 months ago by Philip.

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

Giscard
Topic Author
Offline

6 years 11 months ago #312002 by Giscard

Replied by Giscard on topic CSS for editing product listing

Goodmorning,

I used that:

.hikashop_product_right_part .hikacart {
position: absolute;
bottom: 100px;
}

Which worked here: www.e-myrat.gr/index.php/vivlia/product/...ixani-citizen-pe-570
but didnt work on books where I have many costum fields, like here: www.e-myrat.gr/index.php/vivlia/logotexn...thronou-sto-vyzantio

Shouldnt be ok, since I used position: absolute; ?

Once again, thank you for helping me..

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

Philip
Offline

6 years 11 months ago - 6 years 11 months ago #312018 by Philip

Replied by Philip on topic CSS for editing product listing

Hello,

All I can say now is quite the same things but for a different context of course.
I mean if you analyse the html code than you can see that your first html class in your selector isn't specific, this class is present in many HikaShop page.

Regards

Last edit: 6 years 11 months ago by Philip.

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

Giscard
Topic Author
Offline

6 years 11 months ago #312080 by Giscard

Replied by Giscard on topic CSS for editing product listing

Hello,

Well, I think that I did. I add that:
.hikashop_product_quantity_main a.hikabtn.hikacart {
position: relative;
bottom: -20px;
left: 50px;
}

#hikashop_product_quantity_main.hikashop_product_quantity_main {
width: 30%;
}

And it is working without affecting something else.
Did I get right the way that I should pick the html class?

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

Philip
Offline

6 years 11 months ago #312103 by Philip

Replied by Philip on topic CSS for editing product listing

Hello,

Yes, this may be good to get it only on your product page
regards

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

Giscard
Topic Author
Offline

6 years 11 months ago #312109 by Giscard

Replied by Giscard on topic CSS for editing product listing

Hello,

Thank you very much for your time and the fact that you tried to show me the right way to understandi how things are working.

I really appreciate it.

The following user(s) said Thank You: Philip

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

Time to create page: 0.359 seconds