Modify Buttons

[naykel]

Hi All,

 

I was hoping for some help on how to make different buttons for my site, not in the design but with the coding so I can place them or call them where I like.

 

Just say for example I want a blue button for the compare button, a red button for the add to cart, and a green button for the log in button.

 

I know how to create the buttons with the basic elements like button.hover and .button but I am having trouble calling them the always seem to go back to the default in global css.

 

I have figured out to modify the compare button I need to modify .sortPagiBar #bt_compare in the global.css file but is there a way I can uses this button in other areas of my site. The mark up in the product-compare .tpl is id="bt_compare" class="button".

 

This must sound confusing as I confused myself typing it out, basically I want to create a couple of different buttons and call them where I want them.

 

 

id="bt_compare" class="button_1"

id="login_form" class="button_1"

id="create_account" class="button_2"

 

is this even possible.

 

Thanks for your help.

 

Regards

Nathan

[mux]

Yes you can. Just write new css properties in desired tpl file.

i.e if you want to have some different color in product.tpl of your them, add css rules in that file.

It will overwrite global.css rules.

If not then use "!important" css property

[vekia]

moreover - you can add "style" tag exactly there, where you want. So you can create own button like:

<input type="submit" name="submit" value="send" style="background:red; color:white;" />

[naykel]

thanks all i will give it a go

[naykel]

ok I have tried and failed so I need some more help. I have created buttons from scratch on a sample site and I can get them to work fine but I am struggling to make any changes to buttons is prestashop without changing everything.

 

 

one of the buttons I want to change is the checkout button.

 

This is the code that is currently there is.....

<a href="{$link->getPageLink("$order_process", true)}" id="button_order_cart" class="exclusive{if $order_process == 'order-opc'}_large{/if}" title="{l s='Check out' mod='blockcart'}"><span></span>{l s='Check out' mod='blockcart'}</a>

 

if I have created a button called button_red an then I set up say

.button_red{stuff}

.button_red:hover{stuff}

.button_red:active{stuff}

ect

 

what do I need to do with the code above to make it work or what do I need to do with the button names to make it work.

 

Thanks in advance.

 

Nathan

[mux]

<a href="{$link->getPageLink("$order_process", true)}" id="button_order_cart" class="exclusive{if $order_process == 'order-opc'}_large{/if}" title="{l s='Check out' mod='blockcart'}"><span></span>{l s='Check out' mod='blockcart'}</a>

 

add class name in above code. And it will simply start working.

Use following code

 

<a href="{$link->getPageLink("$order_process", true)}" id="button_order_cart" class="[color=#68737F][font=Arial, Helvetica, sans-serif][size=3]button_red [/size][/font][/color]exclusive{if $order_process == 'order-opc'}_large{/if}" title="{l s='Check out' mod='blockcart'}"><span></span>{l s='Check out' mod='blockcart'}</a>

 

It means "exclusive" class is given by default. Just add a new class alongside exclusive.

[naykel]

so does that mean for each button I want to modify i have to type the details in line?

 

This is not the only time I want to use this button, the problem is my lack of understanding as to how I call this button or how to set up the naming in the style sheet.

 

an example of this is in the product_list.tpl where the add to cart button is can be modified by changing

#product_list li .ajax_add_to_cart_button and a few classes

 

but the same button in the product.tpl is modified by changing

.content_prices #add_to_cart .exclusive and a few other classes

 

I want these buttons to be the same and I can make them the same but I don't want to double up the code.

 

All buttons seem to come back to the default in the global css file in some way shape or form so I am trying to figure out if this is even possible to have multiple buttons without typing out a heap of code.

 

for example in the global css there is

 

input.button_mini, input.button_small, input.button, input.button_large,

input.button_mini_disabled, input.button_small_disabled, input.button_disabled, input.button_large_disabled,

input.exclusive_mini, input.exclusive_small, input.exclusive, input.exclusive_large,

ect ect ect

{stuff}

 

I hope this makes sense as I am confusing my self.

 

Thanks again

Nathan