dvsgr
November 17, 2013, 12:00am
#1
HI fellows
integrating the bootstrap glyphicons in CS-Cart is a great feature for v4.0.x.
Lets see how we can use this not only in html blocks but also in store buttons like wishlist and compare list buttons.
I first create a file for the buttons hook in product screen like:
design/themes/basic/templates/addons/my_changes/hooks/products/buttons_block.overrride.tpl
I then copy the content form the hook “products:buttons_block” in :
design/themes/basic/templates/common/product_data.tpl and just insert in
{if $separate_buttons}
{/if}
the
icon-th-list at the end like this
{if $separate_buttons}
{/if}
Same thing for thje wish list line
<{if $separate_buttons}div{else}span{/if} id="cart_buttons_block_{$obj_prefix}{$obj_id}" class="add-buttons add-to-wish ">
by adding icon-star-empty at the end like this
<{if $separate_buttons}div{else}span{/if} id="cart_buttons_block_{$obj_prefix}{$obj_id}" class="add-buttons add-to-wish icon-star-empty">
Then a little css in your design/themes/basic/templates/addons/my_changes/hooks/index/my_style.css (or whatever you liek to call it)
.icon-star-empty:before {
color: #FFFFFF;
content: "";
float: left;
font-size: 17px;
padding: 7px 11px 0 8px;
}
.add-buttons-wrap .add-to-wish {
display: inline;
margin: 0 0 2px;
}
.wish-link.text-button {
background-color: #585858 !important;
border: 1px solid #000000;
border-radius: 6px;
color: #FFFFFF;
display: block;
font-size: 9px;
margin: 5px 0;
padding: 9px 11px 8px;
text-decoration: none;
}
.add-buttons-wrap .add-to-compare .text-button {
background-color: #2294C8 !important;
border: 1px solid #166587;
border-radius: 6px;
color: #FFFFFF;
display: block;
margin: 0;
padding: 8px 5px 7px;
text-decoration: none;
width: 196px;
}
Thats it!
This is what you get
[attachment=7399:glyphs.jpg]
Have fun playing with glyphicons. See the whole list in http://marcoceppi.gi …rap-glyphicons/
Fotis
glyphs.jpg
It the same method used for the 4.2.4 version i have? Because i canot find the path design/themes/basic/templates/addons/ it goes design/themes/responsive/templates/addons
Thanks in advance
dvsgr
March 19, 2015, 12:00am
#3
Hi prelude
havent test it to 42x yet but I think the css3 method with :before would work much better that this early attempt.
I will try this and let you know
Fotis
dvsgr
March 19, 2015, 12:00am
#4
Ok prelude
here is the new CSS3 way you need to work with.
OPen a new folder in design\themes\responsive\templates\addons\my_changes\hooks\index\meta.post.tpl
and add this
```php
```
Then add to your custom CSS field in VIsula Theme Editor this csscode for adding an icon to buy button (in this case the cart with + sign)
```php
.ty-product-block__button .ty-btn__primary.ty-btn__big.ty-btn__add-to-cart::before {
content: "\f217";
font-family: FontAwesome;
font-size: 18px;
padding-right: 10px;
}
```
You need to clean the cache before you see this.
The key to this is the css :before. You can find the code for all font awesome icons here by using the UTF-8 code.
[url="http://astronautweb.co/snippet/font-awesome/"]http://astronautweb....t/font-awesome/[/url]
So if you know the css class for the element you want to add the icon, you put the :before and then the rest of the css code you like.
Thats the result
[img]http://i62.tinypic.com/xarm1c.png[/img]
Hope this helps
Fotis