Cum Pun In Dreapta Iconite De Facebook, Steam, Gt?

Teddy ! · May 8, 2014

Buna ziua, cum as putea sa pun pe forumul meu IPB, in partea dreapta iconite pentru Facebook, Steam, GameTracker si Youtube, ca in imaginea de mai jos:

~~Kennzo~~ · May 9, 2014

Este hook

gadeas · May 9, 2014

Nu este hook. Este mai bine spus un cod lung care probabil majoritatea nu va stie nici sa-l aplice asa pus intrun "tutorial mediocru".

Daca vrei acea bara, aici ai un tutorial ( am incercat sa explic cat mai bine, nu scriu 100% bine in romana, si nici 70% ).

Intra in Admin CP -> Look & Feel -> Manage skin sets & templates -> Skinul care vrei sa contina bara -> globalTemplate si dupa (Nu cam conteaza unde este pus codul atat timp cat este pus intre <body> </body>):

<div id='ipbwrapper'

Adauga urmatorul cod:

<ul id="social-media">
<li class="facebook"><a href="Linku tau de la forum" target="_blank" ref="nofollow" title="Follow us on Facebook">Textu ce sa apara cand treci cu mausu peste iconita</a></li>
<li class="twitter"><a href="Linku tau de la forum" target="_blank" ref="nofollow" title="Follow us on Twitter">Textu ce sa apara cand treci cu mausu peste iconita</a></li>
<li class="steam"><a href="Linku tau de la forum" target="_blank" ref="nofollow" title="Follow us on Steam">Textu ce sa apara cand treci cu mausu peste iconita</a></li>
</ul>

Dupa intra in ipb_styles.css si adauga urmatorul cod jos de tot:

ul#social-media {
	position:fixed;
	margin-right:0px;
	padding:0px;
	list-style:none;
	z-index:9999;
	font-family:Arial,Helvetica,sans-serif;
}

ul#social-media li {
	padding:2px 0px 2px 0px;
	overflow:hidden;
	direction:rtl
}

ul#social-media li a {
	display:block;
	width:170px;
	height:20px;
	background-repeat:no-repeat;
	text-decoration:none;
	font-size:12px;
	color:#fff;
	font-weight:bold
}

ul#social-media .facebook a:hover {background-color:#3B5998}
ul#social-media .twitter a:hover {background-color:#62BDB2}
ul#social-media .google a:hover {background-color:#DB4A39}
ul#social-media .myspace a:hover {background-color:#3B64B3}
ul#social-media .youtube a:hover {background-color:#CC252C}
ul#social-media .linkedin a:hover {background-color:#4F93B3}
ul#social-media .steam a:hover {background-color:#111}
ul#social-media .lastfm a:hover {background-color:#bf0d1c}
ul#social-media .pinterest a:hover {background-color:#b61d23}
ul#social-media .soundcloud a:hover {background-color:#ff5419}
ul#social-media .tumblr a:hover {background-color:#304e6c}
ul#social-media .github a:hover {background-color:#222}
ul#social-media .flickr a:hover {background-color:#ff0084}
ul#social-media .rss a:hover {background-color:#F60}
ul#social-media .vimeo a:hover {background-color:#1BB7EA}

ul#social-media {right:0px;top:40%}

ul#social-media li a {
	background-color:#000;
	text-align:right
}

ul#social-media li:hover {margin-right:0px}
ul#social-media li a {
	padding:11px 12px 10px 0px;
	margin-right:0px
}


ul#social-media .facebook a {background-position:5px 50%;background-image:url('{style_images_url}/social_media/facebook-white.png')}
ul#social-media .twitter a {background-position:5px 50%;background-image:url('{style_images_url}/social_media/twitter-white.png')}
ul#social-media .google a {background-position:5px 50%;background-image:url('{style_images_url}/social_media/google-white.png')}
ul#social-media .myspace a {background-position:5px 50%;background-image:url('{style_images_url}/social_media/myspace-white.png')}
ul#social-media .youtube a {background-position:5px 50%;background-image:url('{style_images_url}/social_media/youtube-white.png')}
ul#social-media .linkedin a {background-position:5px 50%;background-image:url('{style_images_url}/social_media/linkedin-white.png')}
ul#social-media .steam a {background-position:5px 50%;background-image:url('{style_images_url}/social_media/steam-white.png')}
ul#social-media .lastfm a {background-position:5px 50%;background-image:url('{style_images_url}/social_media/lastfm-white.png')}
ul#social-media .pinterest a {background-position:5px 50%;background-image:url('{style_images_url}/social_media/pinterest-white.png')}
ul#social-media .soundcloud a {background-position:5px 50%;background-image:url('{style_images_url}/social_media/soundcloud-white.png')}
ul#social-media .tumblr a {background-position:5px 50%;background-image:url('{style_images_url}/social_media/tumblr-white.png')}
ul#social-media .github a {background-position:5px 50%;background-image:url('{style_images_url}/social_media/github-white.png')}
ul#social-media .flickr a {background-position:5px 50%;background-image:url('{style_images_url}/social_media/flickr-white.png')}
ul#social-media .rss a {background-position:5px 50%;background-image:url('{style_images_url}/social_media/rss-white.png')}
ul#social-media .vimeo a {background-position:5px 50%;background-image:url('{style_images_url}/social_media/vimeo-white.png')}

ul#social-media li {
	margin-right:-140px;
	-webkit-transition:	margin-right 0.3s;
	-moz-transition: margin-right 0.3s;
	-ms-transition: margin-right 0.3s;
	-o-transition: margin-right 0.3s;
	transition: margin-right 0.3s
}

Dupa downloadam attachmentul, scoatem folderul din arhiva ZIP, il uploadam prin FTP in folderul principal al skinului, si la sfarsit ar trebuii sa arate ceva de genu:

public/style_images/numele_skin/social_media

Pentru a adauga mai multe lucruri in acea bara, dupa cum observi in folderul social_media si in codul CSS is mai multe iconite. Daca vrei sa adaugi unu care deja exista adauga urmatorul cod intre <ul> </ul> de la prima parte:

<li class="numeleDinClasaCSS"><a href="Linku tau de la forum" target="_blank" ref="nofollow" title="Follow us on Steam">Textu ce sa apara cand treci cu mausu peste iconita</a></li>

Daca nu sti care este numele clasa la o iconita, il poti observa in:

ul#social-media .facebook
ul#social-media .twitter
ul#social-media .google
ul#social-media .myspace

Totul ce este dupa . este numele care va trebuii sa-l pui in locu lui "numeleDinClasaCSS". ( Ex: class="facebook", class="twitter", class="google", class="myspace", etc)

Sperca este destul de "bine" explicat. (PS: Stiu ca nu cunosc 100% romana, dar sperca te-am ajutat ). Daca vrei sa observi codul in functiune, il poti vedea la mine pe forum, linku il gasesti pe profilu meu.

social_media.zip

Teddy ! · May 13, 2014

gadeas , sa traiesti >< !

Multumesc frumos

Cristian Leca · March 7, 2015

Cum schimb redirectionarea catre pagina de fb sa zic ... pe mine ma trimite tot pe forum .

Courage · March 7, 2015

Ce link ai pus?

Cristian Leca · March 7, 2015

Nu am pus link . cand am pus link-ul de la fb a intrat pe urmatoare pagina :

www.comunitateamea.rowwwfacebook.ro/comunitateamea

Courage · March 7, 2015

Cred ca nu ai pus cu http:// in fata.

Cristian Leca · March 7, 2015

Asta a fost . Merci

Awake1234 · September 23, 2015

Poti pune alt link de download la social media?

Mr.SLow · November 1, 2015

Mie nu îmi apar imeginile !

+Kenzzo · November 3, 2015

Trebuie sa descarci arhiva cu folder-ul social_media si sa-l bagi in folderul de imagini al temei tale ( tema care o folosesti pe forum )

Kamalio · November 3, 2015

Am facut exact ca in tutorial si nu merge.

Si pe langa asta, nu merge link-ul de download social_media.zip

+Kenzzo · November 4, 2015

Arhiva social_media -->

http://www.girlshare.ro/34291940.1

Imi cer scuze ca am folosit site-uri de la girlshare, dar zippyshare si altele nu fuctionau, se incarca foarte greu arhiva! .. descarci arhiva , apoi urci folder-ul .. ( dupa dezarhivare ) , acela in folder-ul de imagini al temei tale in FTP ..

BdKode · December 5, 2015

Pentru GameTracker nu aveți iconiță ?

Grigoriu Valentin · December 16, 2015

Un alt link de download pentru arhiva social_media ????

Grigoriu Valentin · December 16, 2015

Am creat eu un foldel social_media pe ftp in tema , am respectat instructiunile dar imi apare asa :

NU apar iconitele , si apare jos in colt , nu la mijloc in dreapta ! Gresesc ceva !

Grigoriu Valentin · December 16, 2015

Am reusit merge ! E bun tutorialul !

O singura problema daca ma puteti ajuta !

Cum fac background-ul ala negru de la butoane sa fie invizibil [fara culoare !

pt cei care se plang ca nu le merge arhiva de download sa creeze un folder social_media in folderul cu numele temei si in care sa puna ei imagini png cu facebook,steam etc [EX:

steam-white.png

Multumesc mult !

DeNyS. · March 20, 2016

On 16/12/2015 at 0:06 PM, Grigoriu Valentin said:
Am reusit merge ! E bun tutorialul !

O singura problema daca ma puteti ajuta !

Cum fac background-ul ala negru de la butoane sa fie invizibil [fara culoare !

pt cei care se plang ca nu le merge arhiva de download sa creeze un folder social_media in folderul cu numele temei si in care sa puna ei imagini png cu facebook,steam etc [EX:
steam-white.png
Multumesc mult !

Ca să-l faci trasparent, folosești „opacity: valoare ”, exemplu:

img {
    opacity: 0.4;
}

Edited March 20, 2016 by DeNyS.
LIKE DACĂ ȚI-A FOST DE AJUTOR !

Nitoiu · January 14, 2017

Am bagat , a decurs bine doar ca acuma post/reply apare alb ( De ce ? )

Uitati.va in reply ca am postat .

gadeas · January 14, 2017

Nu are cum sa fie de la acel cod CSS fiindca este legat de o lista (<ul>) cu un identificator (id) unic.

Sign In

Cum Pun In Dreapta Iconite De Facebook, Steam, Gt?

Recommended Posts

Teddy !

Kennzo

gadeas

Teddy !

Cristian Leca

Courage

Cristian Leca

Courage

Cristian Leca

Awake1234

Mr.SLow

+Kenzzo

Kamalio

+Kenzzo

BdKode

Grigoriu Valentin

Grigoriu Valentin

Grigoriu Valentin

DeNyS.

Nitoiu

gadeas

Please sign in to comment

Recently Browsing 0 members

Activity

Browse

Important Information