Social Media Icons

Da hast du volkommen recht Dennis.
Gibt es aber eine Möglichkeit im Header als auch im Footer unterschiedliche Designs zu wählen? Das geht wenn ich auf eine einzige css zugreife ja eher nicht !?

 

daher mein Hinweis - man braucht kein neues CSS die Symbole sind alle schon definiert. musst nur das html an ensprechender stelle verwenden.

 

Unterschiedliche, dann musst noch nen selector davor packen. vor deinem CSS z.b. noch das es nur im .header .fa
gelten soll. dann kannst die verändern.
musst halt feiner selektieren bereiche bestimmen in denen das css nur gelten soll.
. footer. fa
. header .fa
usw.

 

Ok das Problem sollte ich dann behoben haben
Jetzt fehlt mir nur noch der richtige Ansatz um auf meine .header .fa css im content quellcode zuzugreifen.
Über <a href="#" class="header fa fa-facebook"></a> komme ich aktuell noch nicht sehr weit

 

im css musst dein css codes um einen selector / classe verfeinern. zb header, damit deine FB codes im css nur im header oder wo du ihn nutzen willst verwendet wird.
im html musst das dann nicht doppelt angeben,

 

Hallo Barbara ich kann leider über folgenden Code nicht das gewünschte Ergebnis erzielen: <a href="#" class="fa fa-facebook"></a>
Muss ich in meinem Quellcode mehr berücksichtigen?

 

Ich habe das mal in meinem Testshop-Header eingegeben.
da erscheint das Facebook "f"

alles andere muss man über css stylen.

Wie man sieht, habe ich das css für die Button nicht im Testshop

Nachtrag:
jetzt, wo ich das raus nehmen wollte, ist gar kein Eintrag mehr im Quellcode.
Wo ist der denn geblieben?

 

Ähnliches Problem habe ich auch, dass mein Eintrag verschwindet und auch eine Anpassung des Styles funktioniert bei mir im Quellcode nicht.

Wie kann ich denn meine social.css einbinden, dass mein icon darauf zugreift?

 

Nochmal
die Icons sind ja da.
Du willst aber das was im Header ist anders haben.

Einfachste art dann für deinen Kentnisstand
Nimm die css Datei und ändere die Classennamen auf was eigenes nimm statt
fa
halt faheader
und im html wo du das einfügst nimmst dann das selbe umbenennen vor.

dann musst nix über abhängigkeiten und werttigkeiten usw von css classen verstehen.

 

So.......

aktueller Stand:
- meine Icons im Footer bleiben unverändert und sind korrekt.
- ich habe eine social.css angelegt und dort meinen css code für meine variablen icons angelegt mit .faheader
- ich greife mit folgendem html code in meinem header darauf zu:
<a href="#" class="faheader faheader-facebook"></a>
<a href="#" class="faheader faheader-twitter"></a>
<a href="#" class="faheader faheader-google"></a>
- was ich erhalte ist das:

- zudem verschwinden meine Einträge im Quellcode des Headers auch nach Speicherung nach wie vor, wie es Barbara ebenfalls angesprochen hat.

Bin für jede weitere Hilfe dankbar. Ich drehe mich im Kreis.
Baustelle ist online: amila-porter.com

PS: Ich bitte um Nachsicht.

 

Shop und Browsercache leeren

das sind 2 Klassen
faheader
faheader-facebook
die müssen auch beide in deinem CSS vorhanden sein.
Post mal dein CSS wie es nu aussieht

 

Die fa und fa-xxx Klassen darfst du nicht so anpassen. Die bestimmen, welches FontAwesome Icon geladen werden soll. Wenn du die Icons nur oben im Header im Bereich des Freien Textes anpassen willst, versuchs mal mit folgendem CSS:

Code:

.custom-container .fa {
  padding: 10px 0;
  font-size: 30px;
  width: 50px;
  text-align: center;
  text-decoration: none;
  margin: 5px 2px;
  border-radius: 30%;
}

.custom-container .fa:hover {
    opacity: 0.7;
}

.custom-container .fa-facebook {
  background: #333333;
  color: white;
}

.custom-container .fa-twitter {
  background: #55ACEE;
  color: white;
}

.custom-container .fa-google {
  background: #dd4b39;
  color: white;
}

.custom-container .fa-linkedin {
  background: #007bb5;
  color: white;
}

.custom-container .fa-youtube {
  background: #bb0000;
  color: white;
}

.custom-container .fa-instagram {
  background: #125688;
  color: white;
}

.custom-container .fa-pinterest {
  background: #cb2027;
  color: white;
}

.custom-container .fa-snapchat-ghost {
  background: #fffc00;
  color: white;
  text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
}

.custom-container .fa-skype {
  background: #00aff0;
  color: white;
}

.custom-container .fa-android {
  background: #a4c639;
  color: white;
}

.custom-container .fa-dribbble {
  background: #ea4c89;
  color: white;
}

.custom-container .fa-vimeo {
  background: #45bbff;
  color: white;
}

.custom-container .fa-tumblr {
  background: #2c4762;
  color: white;
}

.custom-container .fa-vine {
  background: #00b489;
  color: white;
}

.custom-container .fa-foursquare {
  background: #45bbff;
  color: white;
}

.custom-container .fa-stumbleupon {
  background: #eb4924;
  color: white;
}

.custom-container .fa-flickr {
  background: #f40083;
  color: white;
}

.custom-container .fa-yahoo {
  background: #430297;
  color: white;
}

.custom-container .fa-soundcloud {
  background: #ff5500;
  color: white;
}

.custom-container .fa-reddit {
  background: #ff5700;
  color: white;
}

.custom-container .fa-rss {
  background: #ff6600;
  color: white;
}

Ich hab mir nur dein CSS geschnappt und vor die einzelnen Style-Anweisungen eine zusätzliche Klasse eingefügt von dem Element in dem sich die Icons befinden. Damit ist das speziell genug, dass die Icons im Footer nicht beeinflusst werden.

 

Meine css sieht nun folgendermaßen aus:


Header so:
<ul class="custom-container">
<li><a class="facebook" href="https://www.facebook.com/amilaporter/"><i class="custom-container fa-facebook-f"></i></a></li>
<li><a class="instagram" href="https://www.instagram.com/amilaporter/"><i class="custom-container fa-instagram"></i></a></li>
<li><a class="youtube" href="https://www.youtube.com/channel/UC4Zpd6-oVZcYlsyWiOggJwg"><i class="custom-container fa-youtube"></i></a></li>
</ul>

 

Ich denke du hast mich nicht richtig verstanden, aber ich habe auch nicht sonderlich präzise gesagt, was du mit dem HTML machen sollst. Ich war davon ausgegangen, dass das HTML wie folgt bleibt:

HTML:

<a href="https://www.facebook.com/amilaporter/" class="fa fa-facebook"></a>
    <a href="https://www.instagram.com/amilaporter/" class="fa fa-instagram"></a>
    <a href="https://www.youtube.com/channel/UC4Zpd6-oVZcYlsyWiOggJwg" class="fa fa-youtube"></a>

Dann sollte es zu dem CSS passen, was ich gepostet hatte

 

Danke Torben. Ich muss mich noch etwas an die Sprache hier gewöhnen .
Danke auch an dich Dennis
Das nächste mal gebe ich mir etwas mehr Mühe.

 

Hallo an alle,

ich habe mir gestern Gambio zugelegt und bin gerade am basteln allerdings verstehe ich nicht, wie das mit Social Media Buttons funktioniert.

Am Ende soll es einfach so aussehen wie beim Testshop1, da ich das selbe Template nutze und es mir optisch gut gefällt.

Problem:
-Ich logge mich im Testshop ein und finde unter Content-Manager ->Footer keinen code oder sonstige Hinweise über die Icons
-Auch im Styleeditor finde ich die Buttons oder den Code nicht

Fragen:
-Wird dies über den Content-Manager oder Style-Editor gesteuert?
-Muss ich eine CSS Datei erstellen und irgendwo abspeichern?

Sorry für diese Fragen..... Im Forum habe ich jetzt keine "Anleitung" dazu gefunden und im Handbuch steht das ganze unter Footer (die Buttons / ohne Anleitung) aber ich komm einfach nicht weiter..

Danke euch

Gruß

 

Das ist quellcode, musst also umschalten auf quellcode ansicht. Das ganze is aber auch im Forum irgendwo schon gepostet worden. - aber die Symbole sind reines html und css. keine Bilder oder so.

Im COntent Manager ist das im Footer als quelltext.
Footer 2-4 sind die Spalten Footer ist der ganze Bereich.

Anleitung gibts dazu auch so keine direkt weils halt design Sachen sind die jeder für sich ja anders haben will.

 

Hallo Dennis,

vielen Dank für deine schnelle Rückmeldung.
Meinst du umschlaten im Content-Manager? Das habe ich schon versucht als ich im Demoshop war aber irgendwie gab es da keine Einträge zumindest habe ich diese nicht gesehen im Bereich Footer.

Sorry, dass ich die Frage jetzt wieder gestellt habe

Gruß

 

Hast Du unter "Footer 4.Spalte" nach gesehen?

 

Hallo Barbara,
Hallo Barbara,

also im Content Manager habe ich nun folgenden Code gefunden und eingefügt:

Code:

<ul class="social-media-icons">
    <li><a class="facebook" href="#"><i class="fa fa-facebook-f"></i></a></li>
    <li><a class="twitter" href="#"><i class="fa fa-twitter"></i></a></li>
    <li><a class="instagram" href="#"><i class="fa fa-instagram"></i></a></li>
    <li><a class="youtube" href="#"><i class="fa fa-youtube"></i></a></li>
    <li><a class="googleplus" href="#"><i class="fa fa-google-plus"></i></a></li>
</ul>

Das ganze funktioniert nun auch aber wenn ich das "#" durch die Links auf die Seiten ersetze und dann speichern drücke, speichert er eine admin.php datei statt den code zu speichern?


Aktuell sieht es so aus:

Code:

<ul class="social-media-icons">
    <li><a class="facebook" href="facebook.de/stoeberkunst"><i class="fa fa-facebook-f"></i></a></li>
    <li><a class="instagram" href="https://www.instagram.com/stoeberkunst.de"><i class="fa fa-instagram"></i></a></li>
    <li><a class="youtube" href="#"><i class="fa fa-youtube"></i></a></li>
</ul>

Danke euch

Gruß