Verlinkung zu facebook und co.

Thema wurde von Angelsport Dobner, 21. Oktober 2016 erstellt.

  1. Angelsport Dobner
    Angelsport Dobner Erfahrener Benutzer
    Registriert seit:
    21. März 2016
    Beiträge:
    169
    Danke erhalten:
    3
    Danke vergeben:
    21
    Hallo miteinander,

    ich habe folgenden Code aus einen Testshop übernommen:

    <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="youtube" href="#"><i class="fa fa-youtube"></i></a></li>
    <li><a class="googleplus" href="#"><i class="fa fa-google-plus"></i></a></li>

    Komme aber irgendwie nicht dahinter, wo ich den Link zu meiner Seite einfügen muss......
     
  2. Dennis (MotivMonster.de)
    Dennis (MotivMonster.de) G-WARD 2013/14/15/16
    Registriert seit:
    22. September 2011
    Beiträge:
    31.303
    Danke erhalten:
    6.268
    Danke vergeben:
    1.118
    Beruf:
    Mann für alles :)
    Ort:
    Weilburg
    HTML:
    <ul class="social-media-icons">
    <li><a class="facebook" href="https://www.facebook.com/deineurl"><i class="fa fa-facebook-f"></i></a></li>
    <li><a class="twitter" href="https://www.twitter.com/deineurl"><i class="fa fa-twitter"></i></a></li>
    <li><a class="youtube" href="https://www.youtube.com/deineurl"><i class="fa fa-youtube"></i></a></li>
    <li><a class="googleplus" href="https://plus.google.com/deineurl"><i class="fa fa-google-plus"></i></a></li>
    </ul
     
  3. Angelsport Dobner
    Angelsport Dobner Erfahrener Benutzer
    Registriert seit:
    21. März 2016
    Beiträge:
    169
    Danke erhalten:
    3
    Danke vergeben:
    21
    Hat geklappt, danke dir...
     
  4. Dennis (MotivMonster.de)
    Dennis (MotivMonster.de) G-WARD 2013/14/15/16
    Registriert seit:
    22. September 2011
    Beiträge:
    31.303
    Danke erhalten:
    6.268
    Danke vergeben:
    1.118
    Beruf:
    Mann für alles :)
    Ort:
    Weilburg
    :) use the Button
    danke-sehr---forum.jpg
     
  5. Anonymous
    Anonymous Erfahrener Benutzer
    Registriert seit:
    7. März 2017
    Beiträge:
    438
    Danke erhalten:
    22
    Danke vergeben:
    88
    Hier fehlt doch beim Code die Formatierung für die Logos oder irre ich mich da?
     
  6. Dennis (MotivMonster.de)
    Dennis (MotivMonster.de) G-WARD 2013/14/15/16
    Registriert seit:
    22. September 2011
    Beiträge:
    31.303
    Danke erhalten:
    6.268
    Danke vergeben:
    1.118
    Beruf:
    Mann für alles :)
    Ort:
    Weilburg
    Nein, die Logos macht man heutzutage nicht aus Images sondern per font und css
     
  7. Anonymous
    Anonymous Erfahrener Benutzer
    Registriert seit:
    7. März 2017
    Beiträge:
    438
    Danke erhalten:
    22
    Danke vergeben:
    88
    ja verstehe, jedoch wo ist das passende CSS Fenster/Bereich für genau diesen Content? Da wo ich die CSS Formel eingebe...
     
  8. Dennis (MotivMonster.de)
    Dennis (MotivMonster.de) G-WARD 2013/14/15/16
    Registriert seit:
    22. September 2011
    Beiträge:
    31.303
    Danke erhalten:
    6.268
    Danke vergeben:
    1.118
    Beruf:
    Mann für alles :)
    Ort:
    Weilburg
    CSS = Style Editor "Eigenes CSS" kann man kaum übersehen wenn den aufmachst
     
  9. Anonymous
    Anonymous Erfahrener Benutzer
    Registriert seit:
    7. März 2017
    Beiträge:
    438
    Danke erhalten:
    22
    Danke vergeben:
    88
    Ich hab mich noch nicht richtig ausgedrückt!

    Kenne ich, aber wie finden sich content der ja im Content Manager gemacht ist und dort das drin steht:

    <ul class="social-media-icons">
    <li><a class="facebook" href="(Link nur für registrierte Nutzer sichtbar.)"><i class="fa fa-facebook-f"></i></a></li>
    <li><a class="twitter" href="(Link nur für registrierte Nutzer sichtbar.)"><i class="fa fa-twitter"></i></a></li>
    <li><a class="youtube" href="(Link nur für registrierte Nutzer sichtbar.)"><i class="fa fa-youtube"></i></a></li>
    <li><a class="googleplus" href="(Link nur für registrierte Nutzer sichtbar.)"><i class="fa fa-google-plus"></i></a></li>
    </ul

    und das css vom Style Editor?

    geht das automatisch?
     
  10. Dennis (MotivMonster.de)
    Dennis (MotivMonster.de) G-WARD 2013/14/15/16
    Registriert seit:
    22. September 2011
    Beiträge:
    31.303
    Danke erhalten:
    6.268
    Danke vergeben:
    1.118
    Beruf:
    Mann für alles :)
    Ort:
    Weilburg
    Das CSS ist global, das gilt auf JEDER Seite deines Shops.
    Finden tun die sich über die class die da im html steht. die definiert wie die Zeile designt werden soll.
    Die Listenelemente werden anhand der class in das Logo verwandelt und der href Link ist der Link zu deiner entsprechenden Seite.
     
  11. Anonymous
    Anonymous Erfahrener Benutzer
    Registriert seit:
    7. März 2017
    Beiträge:
    438
    Danke erhalten:
    22
    Danke vergeben:
    88
    Ah ok... ich versuchs mal...

    DANKE Dennis!!
     
  12. Anonymous
    Anonymous Erfahrener Benutzer
    Registriert seit:
    7. März 2017
    Beiträge:
    438
    Danke erhalten:
    22
    Danke vergeben:
    88
    Keine Chance... selbst mit Tutorial bring ich es nicht hin!

    Da fehlt einfach die Ahnung von CSS und Co.
     
  13. Anonymous
    Anonymous Erfahrener Benutzer
    Registriert seit:
    7. März 2017
    Beiträge:
    438
    Danke erhalten:
    22
    Danke vergeben:
    88
    sollte zuerst die HTML und dann das CSS eingegeben werden?

    Zuerst CSS zerschießt bei mir den Header!
     
  14. Dennis (MotivMonster.de)
    Dennis (MotivMonster.de) G-WARD 2013/14/15/16
    Registriert seit:
    22. September 2011
    Beiträge:
    31.303
    Danke erhalten:
    6.268
    Danke vergeben:
    1.118
    Beruf:
    Mann für alles :)
    Ort:
    Weilburg
    wenn dir das css was zerschießt ist dein css fehlerhaft.
    poste das mal hier in ner code box (unter dem plus symbiol links von der Diskette)
     
  15. Anonymous
    Anonymous Erfahrener Benutzer
    Registriert seit:
    7. März 2017
    Beiträge:
    438
    Danke erhalten:
    22
    Danke vergeben:
    88
    Code:
    <!DOCTYPE html>
    <html>
    <head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <style>
    .fa {
      padding: 20px;
      font-size: 30px;
      width: 30px;
      text-align: center;
      text-decoration: none;
      margin: 5px 2px;
      border-radius: 50%;
    }
    
    .fa:hover {
        opacity: 0.7;
    }
    
    .fa-facebook {
      background: #3B5998;
      color: white;
    }
    
    .fa-google {
      background: #dd4b39;
      color: white;
    }
    
    .fa-instagram {
      background: #125688;
      color: white;
    }
    
    </style>
    </head>
    <body>
    
    <h2>Style Social Media Buttons</h2>
    
    <!-- Add font awesome icons -->
    <a href="#" class="fa fa-facebook"></a>
    <a href="#" class="fa fa-google"></a>
    <a href="#" class="fa fa-instagram"></a>
         
    </body>
    </html>
    
     
  16. Dennis (MotivMonster.de)
    Dennis (MotivMonster.de) G-WARD 2013/14/15/16
    Registriert seit:
    22. September 2011
    Beiträge:
    31.303
    Danke erhalten:
    6.268
    Danke vergeben:
    1.118
    Beruf:
    Mann für alles :)
    Ort:
    Weilburg
    woher hast den das???
    Das brauchst nicht UND das ist keine css datei sondern eine html Datei daher zerhaut dir das alles.
    css ist nur
    Code:
    .fa {
      padding: 20px;
      font-size: 30px;
      width: 30px;
      text-align: center;
      text-decoration: none;
      margin: 5px 2px;
      border-radius: 50%;
    }
    
    .fa:hover {
        opacity: 0.7;
    }
    
    .fa-facebook {
      background: #3B5998;
      color: white;
    }
    
    .fa-google {
      background: #dd4b39;
      color: white;
    }
    
    .fa-instagram {
      background: #125688;
      color: white;
    }
    das brauchst aber alles nicht, eil das im shop eh schon vorhanden ist.
    du brauchst nur den html schnippsel für die buttons und links.

    HTML:
    <ul class="social-media-icons">
    <li><a class="facebook" href="https://www.facebook.com/deineurl"><i class="fa fa-facebook-f"></i></a></li>
    <li><a class="twitter" href="https://www.twitter.com/deineurl"><i class="fa fa-twitter"></i></a></li>
    <li><a class="youtube" href="https://www.youtube.com/deineurl"><i class="fa fa-youtube"></i></a></li>
    <li><a class="googleplus" href="https://plus.google.com/deineurl"><i class="fa fa-google-plus"></i></a></li>
    </ul
     
  17. Anonymous
    Anonymous Erfahrener Benutzer
    Registriert seit:
    7. März 2017
    Beiträge:
    438
    Danke erhalten:
    22
    Danke vergeben:
    88
    ich versuchs gleich mal
     
  18. Anonymous
    Anonymous Erfahrener Benutzer
    Registriert seit:
    7. März 2017
    Beiträge:
    438
    Danke erhalten:
    22
    Danke vergeben:
    88
    was ist nun wieder falsch? Blog ruckt eine Stufe runter und es sieht nich gut aus
    upload_2017-4-24_22-1-22.png
     

    Anhänge:

  19. Dennis (MotivMonster.de)
    Dennis (MotivMonster.de) G-WARD 2013/14/15/16
    Registriert seit:
    22. September 2011
    Beiträge:
    31.303
    Danke erhalten:
    6.268
    Danke vergeben:
    1.118
    Beruf:
    Mann für alles :)
    Ort:
    Weilburg
    Du fügst das mal testweise in einen leeren contet ein. UND das musst du im QUELLTEXT Ansicht des editors eifügen. da wo man das html sieht und nicht das aussehen.

    z.b. index mitte oder index unten.
     
  20. Anonymous
    Anonymous Erfahrener Benutzer
    Registriert seit:
    7. März 2017
    Beiträge:
    438
    Danke erhalten:
    22
    Danke vergeben:
    88
    dann sieht es so aus:


    Blog rutscht runter und da ist ein Punkt vor den unpassenden icons upload_2017-4-25_7-12-21.png