Custom Pop up buttons (add to cart pop up)

  • Posts: 73
  • Thank you received: 1
8 years 2 months ago #250564

-- url of the page with the problem -- : store.diffusion-art.com/us/products/brushes.html
-- HikaShop version -- : HikaShop Business: 2.6.4

How to costumize those buttons ?

store.diffusion-art.com/us/products/brus.../tmpl-component.html
cant read them, want to have them like the other buttons on the Shop.
Gradient is #b4ae96 #948f78

they are from When you add a product into the cart. (pop up).

An no they are not from my template, Yootheme, said i should ask here.

regards Pierre

Shop: store.diffusion-art.com/us/products/brushes.html

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

  • Posts: 82868
  • Thank you received: 13378
  • MODERATOR
8 years 2 months ago #250565

Hi,

The buttons are indeed not from the template, however the CSS on them come from your template...
It's mainly the code:

.btn.button.hikashop_cart_input_button {
    border-width: 0;
    line-height: 22px;
    background: #a19b84;
    background-image: -webkit-linear-gradient(top, #b4ae96, #948f78);
    background-image: linear-gradient(to bottom, #b4ae96, #948f78);
}
in the file store.diffusion-art.com/templates/yoo_ev.../grey/css/custom.css of your template.
You can check it yourself with your browser inspector.
And the fact that the buttons in the popup don't display like the other buttons is because your template doesn't include that CSS file in the popups (I don't see why ?).
You'll have to edit the file templates/YOUR_TEMPLATE/component.php and add a script tag to load that file if you want the styles of your template to also apply in the popups.
Or you could just copy/paste that CSS code in the frontend CSS of HikaShop.
www.hikashop.com/support/documentation/1...ize-the-display.html

So as you can see, that is something the template support should handle as it's style coming from the template, and that should be in the popups but isn't. Not much we can do in HikaShop to avoid that.

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

  • Posts: 73
  • Thank you received: 1
8 years 2 months ago #250626

It was from the Hikashop, and not the template :)

How can i change those Buttons in the style ?
We will of course try to assist you where possible, but please understand that what you ask for is a customization for your 3rd party extension Hikashop (its buttons in this case).

You can use the YOOtheme template's features to add CSS and customize your site, but strictly speaking this is not a YOOtheme support matter (nor one for the Hikashop support), but a customization which is entirely the task of a website's developer.

Where you don't feel on safe ground regarding customizations you should consider hiring a developer to assist you. Yootheme


I found in the frontend CSS
a.hikashop_cart_button,   
a.hikashop_compare_button,   
.hikashop_cart_input_button {  
    text-decoration:none;  
    color: #fff !important;  
    cursor: pointer;  
    display: inline-block;  
    line-height: 18px;  
    margin: 5px;  
    padding: 3px 8px;  
    text-align: center;  
    box-shadow:none !important;  
    text-shadow:none !important;  
    border:1px solid;  
    border-color: #EEEEEE #DDDDDD #DDDDDD #EEEEEE;  
    border-radius:3px;  
    background-color: #AD9871;  
    backgrund-image: none!important;  
}

this was the problem, in the hikashop css.

Anyway i fixed it.

ps. yootheme template, was trying to overwrite it :) cause that was correct one which i wanted.
Usuall i didnt even have to touch the css from hika, i can use a costum css which is even not affected regular with other thirdparty apps/plugins.

In my case with the buttons how i wanted them
.btn.button.hikashop_cart_input_button {   
color: #fff;   
border-width: 0;    
line-height: 22px;    
background: #a19b84;    
background-image: -webkit-linear-gradient(top, #b4ae96, #948f78);    
background-image: linear-gradient(to bottom, #b4ae96, #948f78);    
}    

.btn.button.hikashop_cart_input_button:hover {    
background-image: -webkit-linear-gradient(top, #a4a4a4, #a4a4a4);    
background-image: linear-gradient(to bottom, #a4a4a4, #a4a4a4);    
}

but all is ok now, i just removed the hikashop css and exchanged it with that what i got in the costum/css/ in my template

Attachments:
Last edit: 8 years 2 months ago by Lilithay.

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

Time to create page: 0.042 seconds
Powered by Kunena Forum