Cart module layout

  • Posts: 7
  • Thank you received: 1
4 years 1 week ago #325950

-- HikaShop version -- : 4.3.0
-- Joomla version -- : 3.9.22
-- PHP version -- : 7.4.12
-- Browser(s) name and version -- : Firefox/chrome updated latest version

Hello

I want to set some space between the items listed in my mini cart. The proceed button is directly under the items choosen in the webshop. I would like to set some space bezause this lookes to mutch conpressed. I can not figure out where to do this, could you give me some hints for this ?

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

  • Posts: 4747
  • Thank you received: 644
  • MODERATOR
4 years 1 week ago #325952

Hello,

In order to be more specific in our help we will need more elements like :
- An Url link to see the context
- A screenshot to describe and show what doesn't fit your needs (Scheme, annotations, etc...)

Anyway, we can already invite you to have a look on this tutorial to see how to add custom Css to your frontend file.

Awaiting more elements from you to go more far in our help.
regards

Last edit: 4 years 1 week ago by Philip.

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

  • Posts: 7
  • Thank you received: 1
4 years 6 days ago #325997

Excuse for the poor information. But the site is deslager.nl/bestellen In this menu you can order in a rubriek and then a few things will happen. In the screenshot you'll see within option 2 that the choice witch is made by a customer pop up in the right corner for a few seconds. The style and position of the pop up is not in line with the site. So i want to chaince that but can not figure out where to do so.

The other point is under 3 visibel. The box is comprimized and I want to give the button a litle bit more space . Where ca i put the code to fix this, is it in css or in a view or overright ?? I tried put a <BR> code put this didn't work.

Attachments:

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

  • Posts: 4747
  • Thank you received: 644
  • MODERATOR
4 years 5 days ago #326038

Hello,

For your your point N° 2, go to Extensions => Plugins, and look for "HikaShop Cart notification" Plugin.
=> This configuration page will offer you other option to define how many millisecond this popup is displayed.
Define a lot of time to be able to have your pop up a long time available for be able to do a right-click => Inspector tool.
Then use your pop up class to create your css command, like this example :
Ex :

.popup_html_class {margin-top : 20 px; margin-right: 20 px }

And for your side cart module, a little like previously said, use your inspector-tool to get your relative html class, and create your css command.
As an advice I think you can add some padding & margin in order to have more space between your different elements.
To see how to add your custom css command, refer yourself to the tutorial in previous message .

Hope this will help you to get what you need.
Regards

Last edit: 4 years 6 days ago by Philip.

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

  • Posts: 7
  • Thank you received: 1
4 years 5 days ago #326090

Thanks Phillip

point 2 wil certainly help me out in this matter.
For pont 3 I could not find the right relative html class with the inspector tool. This is a lack of knowledge on my site.
So i wil search further , but if you can poiint it i would be very gratefull.
regards, Jaap

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

  • Posts: 7
  • Thank you received: 1
4 years 5 days ago #326119

jaap.de.leeuw wrote: Thanks Phillip

point 2 wil certainly help me out in this matter.
For pont 3 I could not find the right relative html class with the inspector tool. This is a lack of knowledge on my site.
So i wil search further , but if you can poiint it i would be very gratefull.
regards, Jaap


i did manage point 3 with a margin on top by adding the code to my custom css file, thats fixed,
On point 2 I could set some parameters witch is fine. Putting the html-popup code gives me no result so far. I even found this line not in my Hikashop css and putting it in the custom css doesn"t work. Whare can I find the html pop up lines ?

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

  • Posts: 4747
  • Thank you received: 644
  • MODERATOR
4 years 4 days ago #326110

Hello,

Have a look on my screenshot (click to see bigger version), for me you have to add some margin on this 2 elements to have something more spaced out.

alt


In details :
- #hikashop_cart_157
- .hikabtn.hikashop_cart_proceed_to_checkout

Hope this will help you to get what you need.
Regards

Last edit: 4 years 5 days ago by Philip.

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

  • Posts: 4747
  • Thank you received: 644
  • MODERATOR
4 years 4 days ago #326128

Hello,

You will find this in the Hikashop Add to Cart notification Plugin, but if it's for soleve your display issue, that's really not the most simple way, and required solid html & php knowledge.

Follow my step by step process to move your popup :
- In your Hikashop Add to Cart notification Plugin in the Auto-hide delay option enter a very long delay.
- Add a product to cart => Your pop up will be displayed
- Use your inspector tool to analyze the popup html and get the class
- create your css command and add it to your frontend file

alt


Now, some advices to create good priority css command :
1. Check that your selector is well written, good class html and no mistake or typo
2. If your command is visible in your inspector tool, but is overrided (css command crossed out), then his priority isn't strong enough.
alt


=> Some css priority system explanation :
From less to the highest priority :
.html_class_element {command: value}
.html_class_module .html_class_element {command: value}
.html_class_page .html_class_module .html_class_element {command: value}
.html_class_page .html_class_module .html_class_element {command: value !important;}

Note, that if 2 css command have strictly the same selector, then the last written in the css file will be the one used.
Hope this will help you to achieved what you need.

Regards

Last edit: 4 years 5 days ago by Philip.

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

Time to create page: 0.073 seconds
Powered by Kunena Forum