STYLE MODAL POP-UP

-- HikaShop version -- : 2.3.4
-- Joomla version -- : 3.3.6
-- PHP version -- : 5.3.29

Hi Team

Between yesterday and today I have spend almost 5 hours (not kidding !) on that issue : how to tweak those modals windows poping up in Hikashop. I have read numerous post (more than 200 pages !!!) and did many trials. Can't get further without going crazy.

The current modal pop-ups are just out dated and way too hard to style for 2014.

First, important things to clarify:
1°) I need those modal to appear : my client for instance wants the message 'Product added to the cart. Continue shopping ? Go to checkout ?'... So I need this modal pop-up
2°) You have decided to use those modal pop-up in Hikashop (Joomla based apparently). If this is not good enough, you should use another techno. It is not our fault if Joomla solution is not good enough
3°) As a matter of fact, those modal pop-up are part of your product Hikashop, and thus need to be treated like that. They are part of the Hikashop product / process. That's a fact and that's your choice. So that's also your responsability (I'm saying this because you often said that it was not your techno !).

Additionnal info:
- My template is loading Bootstrap
- I have all the 'Bootstrap' option 'ON' in Hikashop options (Use Bootstrap: Yes - Popup: Bootstrap)
- I have made all trials possible : without Bootstrap, with inherited, without 'Chosen'...

First issue to solve : I need to resize / tweak those modal pop-up (see screenshots) to make them look like they are part of the shop. For now they look old-school and bugy.

I am using a special frontend CSS (Hikashop funtion). I have also tweaked as much as I could my own template.css. I haven't been able to do better than what you can see: www.programme-minceur.eu/?betab=1 (plus check the screenshots)
1) modal size isse
2) font-family issue

Where exactly should I tweak it ? And how ? In the 'Notice' view of 'checkout' I can only tweak the content, but not the style or the size right ? Or if this is the place, what to put ?
-- > I found the place to resize the pop-up 'added-to-cart'.
But how to set a max-size to it ? How to get this responsive ? How to get several size at least, per for major screen-size ???

Second issue : so they just need to be responsive. You have to provide us a solution on this, sooner or later. We are in 2014. My client EXPLICITLY wants his clients to buy stuff from their phone. With Hikashop, it is not possible in a nice / dynamnic way. that's a fact.

Please n°1 : help me to tweak / reduce / style those modals pop-up
Please n°2 : make them responsive. Saying that this is Joomla based and that then it is not repsoive is just not an answer. Especially for such a powerfull tool as Hikashop. Seeing Hikashop failing miserably on such a small requirement is a pity. And it is an understatement.

Sorry to be a bit harsh, but this is because I have lost a lot of time, the look is ugly, my client is unhappy and I don't have solution yet.

HELP !
I need to deliver new version of this website by tomorrow evening ! (had a meeting with client today

Many thanks in advance.

Dominique

Hi Nicolas,

Thanks for your advices and help.
It is true that I'm bad at coding, even in CSS.

Still.

Usually I am able to do pretty much what I want after some trial / error process.
On this particular modal pop-up, I'm failing lamentably. I don't know why, but for my level of knowledge, it is impossible to tweak more than what is on the site for now.

- Font-family: it is like the font is not loaded. Impossible to get my font applied.
- Button to hide: your code doesn't work properly in my css (probably due to some if my previous coding ?)
- White space at the top of that modal box: impossible to remove for now
- scroll-bar on the right: still here even if I change size of the modal-box.

I am wondering if it is not in the iFrame code of the 'sbox' that I should do something....

If you have any more advice here, please.
My -little- science is not good enough here. I have tweaked many others pop-up box in others site, from various developpers.
But this one... I don't know and I have just spent another 3 hours on it...

Thanks in advance for more details advices if you can,
Best
Dominique

Hi,

To change the style of the popup, you have to apply the css properties in your template file.
Indeed our css file is not loaded into the popups.

If you think that your properties are not applied, you can force them thanks to "!important", like:

.my_class{
    font-family: Arial !important;