Mehr Social Icons

So fügst du neue Social Icons deinem Theme hinzu:

1. Lege bitte einen Ordner mit dem Namen "includes" in deinem Child-Theme an

2. Kopiere die Datei "di-basis/includes/social_icons.php" aus dem Ordner des Basis-Themes in den neu angelegten Ordner in deinem Child-Theme

3. Dein Child-Theme sollte dann wie folgt aussehen: "Name-Child-Theme/includes/social_icons.php"

4. Social Dienst hinzufügen:

Vor der letzten Zeile ("</ul>") in der neuen Datei social_icons.php in deinem Child-Theme kannst du dein neues Social-Icon wie folgt einfügen. Kopiere dazu folgenden Code (hier am Beispiel LinkedIn) und füge ihn vor "</ul>" ein.

<li class="et-social-icon et-social-linkedin"><a class="icon" href="DEINE LINKEDIN URL">LinkedIn</a></li>

Für Pinterest würde der Code wie folgt aussehen:

<li class="et-social-icon et-social-pinterest">
<a href="DEINE LINKEDIN URL" class="icon"><span>Pinterest</span></a>
</li>

Folgender Code ist ohne Icon und kann von dir benutzt werden, ein weiteres Icon (Liste unten) anzuzeigen. Die hervorgehobenen Stellen im Code müssen für dein Icon bzw. Social-Netzwerk angepasst werden:

<li class="et-social-icon SOCIALICONCLASS"><a href="DEINE SOCIAL URL" class="icon"><span>NAME SOCIAL NETZWERK</span></a></li>

Folgende Social-Icons (SOCIALICONCLASS) stehen zur Verfügung:

et-social-facebook

et-social-twitter

et-social-google-plus

et-social-pinterest

et-social-linkedin

et-social-tumblr

et-social-instagram

et-social-skype

et-social-flikr

et-social-myspace

et-social-dribbble

et-social-youtube

et-social-vimeo

et-social-rss

Link in einem neuen Fenster/Tab öffnen

Bitte unter DIVI > THEME OPTIONEN > INTEGRATION > BODY folgenden Code einfügen.

<script type="text/javascript">
jQuery(document).ready(function(){
jQuery(".et-social-icon a").attr('target', '_blank');
});
</script>

XING als Social-Icon einfügen.

Bitte zuerst die Schritte 1-3 durchführen.

4. XING hinzufügen:

Vor der letzten Zeile ("</ul>") in der neuen Datei social_icons.php in deinem Child-Theme kannst du XING wie folgt einfügen. Kopiere dazu folgenden Code und füge ihn vor "</ul>" ein. Dann lädst du ein Icon von XING in die Mediathek hoch. Über die Mediathek die URL zum Icon kopieren und in den Code einfügen.

<li class="et-social-icon"><a href="DEINE XING URL" class="icon"><img src="URL ZUM ICON EINFÜGEN"></a></li>

XING als Social-Icon in das Modul "Sozialen Medien folgen" einfügen.

Bitte das Netzwerk MySpace auswählen, ich glaube das nutzt heute fast niemand mehr. Trage dort deine XING Daten ein und wähle als Icon Farbe #006567, das ist das Xing Hintergrundgrün. Gehe dann zu DESIGN > EDITOR und bearbeite die Datei style.css deines Child-Themes. Füge folgenden Code der Datei hinzu:

.et-social-myspace a.icon:before {
	content: url(xing_icon.png);
	-webkit-transition: all 0.3s;
	-moz-transition: all 0.3s;
	transition: all 0.3s;
}

.et-social-myspace a.icon:hover::before {
	opacity: 0.8;
}

Dann lädst du bitte per FTP noch dieses Bild (rechte Maustaste: Ziel speichern unter...) in den Ordner deines Child-Themes.