Width of HS product listing

Hello,

the list of products of my HS is not completely on whole width of the site. How can I make it wide the same as the template? The cart, product details etc are all the full width. Please check the attached file for reference.

Thanks
Vaclav

Hi,

You'll be able to do it with some CSS customization, you can give me a link to that page if you want more precision about the CSS code to apply.

Hi,
Using this CSS code will probably do the job :

thanks. but where should I insert it exactly?

go to file system and use a tool to find a file with *.css extension and that contain on of this string hikashop_products or hikashop_product.
this string must already exist since it must be define elsewhere .
Because important ! is use it mean this code already exist somewhere ( in frontend_default.css ? )
in this file code paste the selector definition where ever you want (important to take care of order ) .
make sure the css file you find by this way is load in the client browser when you load the list of product .

---

refer to the hikashop demo page the css file name can be locate in media/com_hikashop\css\frontend_default.css or frontend_custom.css
CSS recommandation style guide is to put non hikashop code to another css file of name front_end_custom.css but be shure that Hikashop is set to load this file .

---

The link (CSS) give by Mohamed thelji show a capture screen that show that default css is load ( frontend_defautl.css)
Component -> hikashop -> Configuration
then display ( tab) -> CSS ( field border) -> FrontEnd File set to default ( list )

the link " Easily adapt HikaShop to your template with Styles" ll not help you .
The best way to learn is to do it once by yourself and then buy any template since you know howto write a template .
understand template need understand html stream , css and joomla cms .


regard's

Thanks for help. I havent found how to do it yet but will try it. I am not good at css so it is not easy for me.

Anyway - I have this problem on each installation of HikaShop - this is on each web I make. Even if I use bought template, use clear installation of joomla and HikaShop only without any configuration (clear Joomla and HS installation) or with template created in 3rd party software. Maybe there is a problem on HS side as I do not configure anything and always have this problem.

Thanks

Vaclav

Hi,
Did you tried the CSS code that I gave you ? Also, note that you'll be able to use it by adding it through "Hikashop->System->Configuration->Display->Front-end CSS File".

Hello Mohamed,

thank you.

I tried to add it but nothing worked. Could you please let me know exactly the place where I sould insert it? Maybe I inserted into a wrong place.

The address is rhox.cz

Thanks
Vaclav

Hi there,

Just add it at the end of the CSS file in Hikashop->System->Configuration->Display->Front-end CSS File and make sure you save this file and use it for the front end.

Perfect. It works.

Thank you very much!

Hello,

I have the same problem with another template. The solution you gave me last time works only if I have everywhere in the template 4 products in a line. When there are 5 products in one module and 3 products in another the solution you gave does not work.

Any other solution for this?

You can see what I mean here: www.superpiercing.cz (the products are not aligned to the center).

Thanks
Vaclav

Hello Vaclav,
If you have 5 products you'll just have to use that CSS code :
100 / 5 = 20 % for each product.

Hello Mohamed,

I have 5 productss on front page and 3 products on other pages. I understand how your solution works, but imagine what it will make with 3 product on all subpages when 3 products should be devided to 1/5 of the page. Do you understand what I mean? Your solution only works if I use 5 products on all pages not 5 on front page and 3 on all other pages...

Thanks
Vaclav

Hi,

Simply prefix the CSS that Mohamed provided you with the id/class of the module/menu and it will apply only to that particular menu/module.
For example, for the module at the top on your frontpage it would be:
#hikashop_category_information_module_378 .hikashop_product {
width: 20% !important;
}
Just look at the HTML of your listing with firebug as explained in the documentation and you'll find the id/class that you want to use each time.
www.hikashop.com/support/support/documen...ize-the-display.html