[SOLVED] Change add to cart text into an icon

[Ster]

Hello,

 

I'am new with Prestashop and need some help to make some changes in my Theme.

 

I use: Theme560 in this Theme i miss at severall places an icon instead off text. For example on the product page is showen: "In winkelwagen" (= Dutch for Add to Cart) and also 2 other text lines with a link in it. I would like to change these text lines into an icon.

 

Can somebody explane me how to manage that?

 

I use Version 1.5.6

Url. www.ster-sieraden.nl

Theme560

 

See the attached files for an idea.

 

Thanks.

 

 

[vekia]

you can create css styles for this button.

input.button_mini:hover, a.button_mini:hover, input.button_small:hover, a.button_small:hover, input.button:hover, a.button:hover, input.button_large:hover, a.button_large:hover, input.exclusive_mini:hover, a.exclusive_mini:hover, input.exclusive_small:hover, a.exclusive_small:hover, input.exclusive:hover, a.exclusive:hover, input.exclusive_large:hover, a.exclusive_large:hover {
background: url(../img/btn1.png) no-repeat 100% 3px;
text-decoration: none !important;
color: #000 !important;
-webkit-transition: background .2s ease;
-moz-transition: background .2s ease;
-ms-transition: background .2s ease;
-o-transition: background .2s ease;
transition: background .2s ease;
}

[Ster]

Hello Vekia,

 

Thanks for your reaction.

 

When i put this script in the css, how can i change the product.tpl page?

Can i use this script also for the other icons?

[vekia]

hello

 

it's a code that you've got there now.

you have to generate own code for button.

 

take a look how it looks for these styles:

background: #3498db;
  background-image: -webkit-linear-gradient(top, #3498db, #2980b9);
  background-image: -moz-linear-gradient(top, #3498db, #2980b9);
  background-image: -ms-linear-gradient(top, #3498db, #2980b9);
  background-image: -o-linear-gradient(top, #3498db, #2980b9);
  background-image: linear-gradient(to bottom, #3498db, #2980b9);
  -webkit-border-radius: 28;
  -moz-border-radius: 28;
  border-radius: 28px;
  font-family: Arial;
  color: #ffffff;
  font-size: 20px;
  padding: 10px 20px 10px 20px;
  text-decoration: none;

[Ster]

Thanks Vekia for your quick respons.

 

What you made looks great but i dit not succeed to get it done.

 

I placed the css script into the Global.css page form, it now looks like this:

 

/* hover buttons */

input.button_mini:hover, a.button_mini:hover, input.button_small:hover, a.button_small:hover,

input.button:hover, a.button:hover, input.button_large:hover, a.button_large:hover,

input.exclusive_mini:hover, a.exclusive_mini:hover, input.exclusive_small:hover, a.exclusive_small:hover,

input.exclusive:hover, a.exclusive:hover, input.exclusive_large:hover, a.exclusive_large:hover {background: #3498db;

  background-image: -webkit-linear-gradient(top, #3498db, #2980b9);

  background-image: -moz-linear-gradient(top, #3498db, #2980b9);

  background-image: -ms-linear-gradient(top, #3498db, #2980b9);

  background-image: -o-linear-gradient(top, #3498db, #2980b9);

  background-image: linear-gradient(to bottom, #3498db, #2980b9);

  -webkit-border-radius: 28;

  -moz-border-radius: 28;

  border-radius: 28px;

  font-family: Arial;

  color: #ffffff;

  font-size: 20px;

  padding: 10px 20px 10px 20px;

  text-decoration: none;}

 

Was this what i had to do? What does i need to do more to see the button? The product.tpl showes this:

 

<p id="add_to_cart" {if (!$allow_oosp && $product->quantity <= 0) OR !$product->available_for_order OR (isset($restricted_country_mode) AND $restricted_country_mode) OR $PS_CATALOG_MODE} style="display:none;"{/if}>

<a class="exclusive" href="javascript:document.getElementById('add2cartbtn').click();">{l s='Add to cart'}</a>

<input id="add2cartbtn" type="submit" name="Submit" value="{l s='Add to cart'}" />

</p>

 

Thanks again for your help.

[vekia]

recompile theme. it's necessary because you use CCC for css files (files are minifed)

 

go to adv.paramters and clear shop cache and turn on force compilation (temporarily!)

[Ster]

You are quick, thx.

 

I cleared the cache and turned on the forced compilation, but i don't see any changes.

What am i doing wrong? 

[vekia]

you used code for :hover only,

it's necessary to add it also to :

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, input.exclusive_mini_disabled, input.exclusive_small_disabled, input.exclusive_disabled, input.exclusive_large_disabled, a.button_mini, a.button_small, a.button, a.button_large, a.exclusive_mini, a.exclusive_small, a.exclusive, a.exclusive_large, span.button_mini, span.button_small, span.button, span.button_large, span.exclusive_mini, span.exclusive_small, span.exclusive, span.exclusive_large {
height: 10px !important;
display: inline-block;
padding: 0 8px 0 0;
background: url(../img/btn1.png) no-repeat 100% 3px;
text-transform: uppercase;
border: none;
font: 10px "Arial" !important;
color: #a2a2a2 !important;
text-decoration: none !important;
cursor: pointer;
-webkit-transition: background .5s ease;
-moz-transition: background .5s ease;
-ms-transition: background .5s ease;
-o-transition: background .5s ease;
transition: background .5s ease;
}

(replace styles with new code)

[vekia]

it's better to use 

#add_to_cart a {
background: #3498db;
background-image: -webkit-linear-gradient(top, #3498db, #2980b9);
background-image: -moz-linear-gradient(top, #3498db, #2980b9);
background-image: -ms-linear-gradient(top, #3498db, #2980b9);
background-image: -o-linear-gradient(top, #3498db, #2980b9);
background-image: linear-gradient(to bottom, #3498db, #2980b9);
-webkit-border-radius: 28;
-moz-border-radius: 28;
border-radius: 28px;
font-family: Arial;
color: #ffffff!important;
font-size: 20px;
padding: 10px 20px 10px 20px;
text-decoration: none;
}

it's because it will not change other buttons

[Ster]

Thanks, it works now.

 

See the attached file.

It's a little big but thats changeable i think?

Can i use this also for the other text lines i want to change?

[vekia]

sure, it's possible

 

i added:

top: -8px;
position: relative;

to:

#buy_block #add_to_cart {
float: right;
margin: 0;
padding: 5px 0;
top: -8px;
position: relative;
}

it's a part of http://www.ster-sieraden.nl/themes/theme560/css/global.css file line ~1150

[Ster]

Oké now the position is mutch better, thx for this update.

 

What is the best way to make the button smaller?

And how can i make from other text lines also buttons?

Can i put the name of the button in the script like add_to_cart? 

[vekia]

to change size of block, reduce padding param values:

padding: 10px 20px 10px 20px;

the same with font:

font-size: 20px;

 

 

And how can i make from other text lines also buttons?

you have to create css styles for your other texts separately

 

 

 

Can i put the name of the button in the script like add_to_cart? 

i don't understand, can you shed some more light on it please?

 

 

 

i marked topic as [solved]

[Ster]

Yes it is solved now i only need to change it in detail.

 

I mean if i can put the name of the other buttons (that are now textlines) in the same script where the add_to_cart button is placed. I now understand that it is not the way to do it. 

 

If i'am right i must make for every text line, i want to change, their own script change. Can i find these also in global.css? Or must i make it completely new? Can i use the same script that i used for de cart?

[vekia]

everything depends on text you want to change, if I were you I will use this code:

.mybutton, #add_to_cart a {
background: #3498db;
background-image: -webkit-linear-gradient(top, #3498db, #2980b9);
background-image: -moz-linear-gradient(top, #3498db, #2980b9);
background-image: -ms-linear-gradient(top, #3498db, #2980b9);
background-image: -o-linear-gradient(top, #3498db, #2980b9);
background-image: linear-gradient(to bottom, #3498db, #2980b9);
-webkit-border-radius: 28;
-moz-border-radius: 28;
border-radius: 28px;
font-family: Arial;
color: #ffffff!important;
font-size: 20px;
padding: 10px 20px 10px 20px;
text-decoration: none;
}

then for each code you want to add this effect - add class: class="mybutton"

[Ster]

Thx for your help, tomorrow i go on with this.

The button is now smaller and fits better.

 

I will remember your store for incase i need something 

[Ster]

Last question, i changed "Afrekenen" you cab see here:

 

http://www.ster-sieraden.nl/home/10-handgemaakte-925-sterling-zilver-letter-bedel.html

 

It showes a line in it and the text is not lined out. Do you have an idea what can couse that?

[vekia]

<a class="exclusive_large" href="http://www.ster-sieraden.nl/snelle-bestelling" id="button_order_cart" title="Afrekenen"><span></span>Afrekenen</a>

 

it's related to <span></span>

[Ster]

Thanks men you are the best :-)

[vekia]

you're welcome

if you need any additional assistance related to this topic (css styles for buttons)

just continue discussion below

 

with regards,

Milos

[Ster]

Hi Milos, 

 

Good to know.

 

I still have a question about the <span></span>

How can i take them out of teh css sheet?

I see them in the script of the webpage, but not in the css sheet.

Can you tell me what to change?

Both "winkelwagen" en "afrekenen" has the same script. 

[vekia]

<span></span> is a part of .tpl file, not a css

so this span doesn't exist in css.

 

but you can hide this span with css.

#cart-buttons span {display:none}

[Ster]

I tried to take the spans away, but i can not find it.

This is the script about the cart_buttons i found:

 

.column #cart_block p#cart-buttons {padding:10px 0 0 0;overflow:hidden;}

.column #cart_block p#cart-buttons a.button_mini { margin-right:15px;}

.column #cart_block p#cart-buttons #button_order_cart { background-position:100% 7px; padding-bottom:5px;}

header #button_order_cart { background-position:100% 7px !important; padding-bottom:4px !important;}

 

Is this the place where i need to put it?

[Ster]

Hi Milos,

 

Now i need you even more.

I don't now what i did but the product page is changed.

I miss the layout as it was yesterday. The lines are gone, the price is replaced, 2 time "in winkelwagen" is showed.

It seems that there is changed a block or something, but i only changed colors.

Do you have any idea what is missing?

Please see url for an idea. 

 

http://www.ster-sieraden.nl/home/41-handgemaakte-925-sterling-zilver-letter-bedel.html

[vekia]

i also don't know what you did in the tpl file (two in winkelwagen)

"The lines are gone" - about what lines you're talking?

[Ster]

I opened shopping-cart.tpl, shopping-cart-product-line.tpl and order-detail.tpl

I only looked for a place where i could find the <span> items, but could not find them.

 

In the attached file you can see how it was. Between the content you see lines and they are gone.

Also the price isn't bold anymore. The product "more comment/information" is also changed.

 

I hope you have an idea where the look for it. 

[Ster]

Hi Milos,

 

I solved the problem but don't know exactly how.

I copied the original CSS bit by bit and when i dit this with the "product page" part the problem was over.

I compared the 2 scripts but they look the same, maybe a space to mutch or so but it's oké now thats the main thing.

 

There are 2 things i still want to change, will you help me with that?

 

The <span> is stil there and i couldn't find the place to put them to {display:none}

The other thing i want to change is to place a text button on the "Subcategorie" page.

On this page u see first the subcategories and their under you can see the products in the main categorie.

To put the products directly in to the cart their is a text line "Bestellen>" (Order in Dutch)

http://www.ster-sieraden.nl/6-925-sterling-zilver

How can i change this button? I could not find it like the other buttons.

[Ster]

Last update:

 

I maneged the "Bestellen>" buttons http://www.ster-sieraden.nl/6-925-sterling-zilver

The text in the button "Afrekenen" is now lined out, but has still a line in it.

The <span> does still something.

Hope you can help me with this last thing.

 

Thx