Change margin on category display between tiles

  • Posts: 43
  • Thank you received: 3
10 years 7 months ago #187871

-- HikaShop version -- : 2.3.5
-- Joomla version -- : 3.3.6
-- Browser(s) name and version -- : any

I want to change the margin between tiles in the category view.
In the Display details of each product category there´s a section "Parameters for DIV"
Changing the margin in this setting will change the top, left, right, bottom margin in parallel.
I only want to change margin left and right only. I´m using the type of item layout "Image and title".
I also do not find any options in the css.

Attachments:
Last edit: 10 years 7 months ago by disc.

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

  • Posts: 26274
  • Thank you received: 4045
  • MODERATOR
10 years 7 months ago #187888

Hi,

The best at this moment will be to use some custom CSS.
www.hikashop.com/support/support/documen...ize-the-display.html

Regards,


Jerome - Obsidev.com
HikaMarket & HikaSerial developer / HikaShop core dev team.

Also helping the HikaShop support team when having some time or couldn't sleep.
By the way, do not send me private message, use the "contact us" form instead.

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

  • Posts: 43
  • Thank you received: 3
10 years 7 months ago #190526

Of course the CSS needs to be added using class or ID.
But I don´t find the related code in the php file. When looking at the HTML code via the browser I see the relevant code phrase, but I can not find something similar in the php. As mentioned I´m using the type of item layout "Image and title".

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

  • Posts: 84304
  • Thank you received: 13698
  • MODERATOR
10 years 7 months ago #190544

Hi,

There is no PHP code to look at and the type of layout is not related. As Jerome said, you can do that with CSS and the link he gave explains how to find the class or id to use for your CSS code.

For example, if you want to apply such margin to all your listings, you would add such CSS:
div.hikashop_container{
margin-left: 10px;
margin-right: 10px;
}

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

  • Posts: 43
  • Thank you received: 3
10 years 6 months ago #192826

Sorry nicolas, that does not help.

I try to describe the issue again.
In the source code I identify a line

#hikashop_category_information_menu_129 div.hikashop_container {
margin:5px 5px;
}

The margin entered in the backend (section "Parameters for div") will be written into this line (see attachment in post #187871).
If I now add a code
div.hikashop_container {margin: 0px 10px 0px 10px; }
or similar to the frontend_default css file that does not change anything.

The line
#hikashop_category_information_menu_129 div.hikashop_container {
margin:5px 5px;
}
stays the same.

Hope it´s understandable now.

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

  • Posts: 84304
  • Thank you received: 13698
  • MODERATOR
10 years 6 months ago #192860

That was just an example.
Do like that:
div.hikashop_container{
margin-left: 10px !important;
margin-right: 10px !important;
}

and you'll see that your custom CSS will override the CSS added by HikaShop.

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

Time to create page: 0.045 seconds
Powered by Kunena Forum