button size for products

  • Posts: 2
  • Thank you received: 0
  • Hikashop Style
11 months 3 weeks ago #351371

-- url of the page with the problem -- : www.acrylvitrinen.de
-- HikaShop version -- : 4.7.2
-- Joomla version -- : 4.3
-- PHP version -- : 8.025
-- Browser(s) name and version -- : FireFox
-- Error-message(debug-mod must be tuned on) -- : No error, want to know how to set up and arange the btn next product in size

Hi, all is working fine and looks good, but I want to change the size of these buttons. They are to big, I want them smaller in hight and length, and I want space between them. Have a look at the pictures attached.
Thanks for some advices, greetings, Roland Hartl

Attachments:

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

  • Posts: 4508
  • Thank you received: 610
  • MODERATOR
11 months 3 weeks ago #351372

Hello,

Follow me step by step in order to teach you how to edit your display :
- First, have a look on this tutorial to see how to edit your Css file, here .
- Then create a custom style file, by clicking on the "+" button, and add your css commands.
- To elaborate your Css command, first you have to get the required Html class (or Id)
1. Point your element on the front end, and right-click => Inspect (or inspector tool)
2. A new window will open and show you the html, example :

alt


- Example of your Css command, you can use :
.required_class {
    // Button dimensions :
    width: 55px // OR 70px or 90px etc...
    height: 35px // OR 40px etc...
}
.required_class {
    // Create space between your button :
    margin: 5px 10px 5px 10px; // 5px for top, 10 px right,  5px for bottom, 10px for left
}

Hope this will help you to achieve your needs.
Regards

Last edit: 11 months 3 weeks ago by Philip.

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

  • Posts: 2
  • Thank you received: 0
  • Hikashop Style
11 months 3 weeks ago #351378

Thanks for your explanation,
I do understand (hopefully) what to do, but did not succeed.
I found the "shop.css" in template section.
I added at the bottom:
.hkbadge {
// Create space between your button :
margin: 5px 10px 5px 10px; // 5px for top, 10 px right, 5px for bottom, 10px for left
}
but nothing changes. Did I use a wrong class? What to do?
I will once more attach a picture from what I want to change these are buttons from the product overview.

Sorry I didnt find hika-shop.css ! I do have a template from joomlaplates.com, this is named "tp-shop" and has hika-shop included.

By the way: is it possible to attach the shop.css? I will try. - this seems not to be possible, is there a way to transfer? Thanks, Roland

Attachments:
Last edit: 11 months 3 weeks ago by roland-hartl.

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

  • Posts: 81504
  • Thank you received: 13064
  • MODERATOR
11 months 2 weeks ago #351380

Hi,

I would recommend you to check this tutorial:
www.hikashop.com/support/documentation/1...ize-the-display.html

The hkbadge class is not used on the buttons of your pages. It was just a random example from Philippe.
If you actually look at the add to cart buttons on your pages, you can see they use the classes:
btn btn-small btn-primary hikacart

For example, you could add such CSS:

.btn {
    margin: 5px !important;
    padding: 8px !important;
}

There is no need to send us the shop.css file.
Note that your template compresses its CSS files. So if you change the CSS files of your template, you might need to clear its cache in order to see any change. You might want to check with your template provider what they recommend to add custom CSS to it so that you don't lose your changes when updating the template in the future.

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

Time to create page: 0.065 seconds
Powered by Kunena Forum