1. El kell készíteni az ikonokat amiket használni szeretnénk és feltölteni a VirtueMart sablonunk "images" könyvtárába. Ez alaphelyzetben a components/com_virtuemart/themes/default/images/ könyvtár
Mi ezeket a képeket használtuk:
Ez lesz a háttér | |
FaceBook ikonok | |
iwiw ikonok | |
Twitter ikonok |
2. A Virtuemart termék megjelenítő sablonjába be kell illeszteni a következő kódot oda ahol meg akarod jeleníteni az ikonokat:
[code]
<div class="oszd_meg"><a class="button-twitter" title="Add a Twitter-hez" onclick="window.open('http://twitter.com/home?status='+encodeURIComponent(document.title)+' '+encodeURIComponent(location.href));return false;" href="http://www.twitter.com/" target="_blank"></a>
<a class="button-facebook" title="Add a Facebook-hoz" onclick="window.open('http://www.facebook.com/share.php?u='+encodeURIComponent(location.href)+'&title='+encodeURIComponent(document.title));return false;" href="http://www.facebook.com/" target="_blank"></a>
<a class="button-iwiw" title="Add az iWiW-hez" onclick="window.open('http://iwiw.hu/pages/share/share.jsp?u='+encodeURIComponent(location.href)+'&title='+encodeURIComponent(document.title));return false;" href="http://www.iwiw.hu/" target="_blank"></a></div>
[/code]
A kód egyébként beilleszthető a listanézetbe is, vagy akár a Joomla cikkek sablonba is.
3. Ezután még a VirtueMart sablonunk css fájlját kell kiegészítenünk pár sorral. Ez alaphelyzetben a components/com_virtuemart/themes/default/themes.css
[code]
div.oszd_meg { height: 60px; background:transparent url(images/oszd_meg.png) no-repeat; padding-top: 30px; padding-left: 45px; margin-bottom: 10px;}
a.button-twitter, a.button-facebook, a.button-iwiw {width: 70px; height:45px; display:block; float: left}
a.button-twitter { background:transparent url(images/twitter.png) no-repeat;}
a.button-facebook { background:transparent url(images/fb.png) no-repeat;}
a.button-iwiw { background:transparent url(images/iwiw.png) no-repeat;}
a.button-twitter:hover { background:transparent url(images/twitter_2.png) no-repeat;}
a.button-facebook:hover { background:transparent url(images/fb_2.png) no-repeat;}
a.button-iwiw:hover { background:transparent url(images/iwiw_2.png) no-repeat;}
[/code]