1. Herzlich willkommen bei WPDE.org, dem grössten und ältesten deutschsprachigen Community-Forum rund um das Thema WordPress. Du musst angemeldet oder registriert sein, um Beiträge verfassen zu können.
    Information ausblenden

CSS: Icon vor Hyperlinks voranstellen

Dieses Thema im Forum "Design" wurde erstellt von bluebird145, 12. April 2016.

  1. bluebird145

    bluebird145 Well-Known Member

    Registriert seit:
    1. November 2008
    Beiträge:
    239
    Zustimmungen:
    0
    Hallo zusammen,

    ich habe bereits danach gegoogelt, allerdings keine Lösung für mein Problem finden können.
    Ich würde gerne per CSS allen Hyperlinks im Content-Bereich meines Themes ein Icon voransetzen.

    Manuel funktioniert das bereits indem ich jedem Hyperlink das Icon voransetzte:
    Code:
    Entschuldige, aber du musst dich registrieren oder anmelden um den Inhalt sehen zu können!
    Gerne würde ich genau das aber automatisieren.
    Der betroffene Beispiel-Bereich ist von "Was tun..." bis zum Seitenende, also bis zum Button "Richtlinien...": http://goo.gl/h7c1vH

    Viele Grüße und einen schönen Dienstag!
     
  2. helix

    helix Well-Known Member

    Registriert seit:
    28. Juli 2011
    Beiträge:
    1.808
    Zustimmungen:
    27
    Frag mal die Suchmaschine deines Vertrauens nach „CSS Pseudoklasse :before“ – damit sollte das machbar sein.

    Gruß
    helix
     
  3. bluebird145

    bluebird145 Well-Known Member

    Registriert seit:
    1. November 2008
    Beiträge:
    239
    Zustimmungen:
    0
    Hallo Helix,

    ich habe die Suchmaschine mal gefragt und die Pseudoklasse eingesetzt. Leider aber ohne Erfolg. Bin mir ehrlich gesagt auch nicht sicher, ob ich das Icon richtig aufrufe. Habe einfach mal einen CSS-Abschnitt des Suche-Icons kopiert in der Hoffnung so in Richtung Lösung zu gelangen.

    Code:
    Entschuldige, aber du musst dich registrieren oder anmelden um den Inhalt sehen zu können!
     
  4. helix

    helix Well-Known Member

    Registriert seit:
    28. Juli 2011
    Beiträge:
    1.808
    Zustimmungen:
    27
    Ähm. Wenn du deine Hyperlinks mit einem Icon vor dem Hyperlink versehen willst, solltest du auch das HTML-Element für Hyperlinks mit der Pseudoklasse :before ausstatten. Also
    Code:
    Entschuldige, aber du musst dich registrieren oder anmelden um den Inhalt sehen zu können!
    beziehungsweise, damit es sich auf deinen Content-Bereich beschränkt, sowas wie
    Code:
    Entschuldige, aber du musst dich registrieren oder anmelden um den Inhalt sehen zu können!
    Und innerhalb der geschweiften Klammern kommt dann das, was du vor dem Link haben willst. Absolute Positionierung finde ich an dieser Stelle ziemlich absurd. Ich würde mal so anfangen:
    Code:
    Entschuldige, aber du musst dich registrieren oder anmelden um den Inhalt sehen zu können!
    Und dann bürsten, bis es passt. (Farbe, evtl. noch ein Leerzeichen etc.)

    Gruß
    helix
     
  5. bluebird145

    bluebird145 Well-Known Member

    Registriert seit:
    1. November 2008
    Beiträge:
    239
    Zustimmungen:
    0
    Hallo Helix!

    Vielen lieben Dank für deine hervorragende Hilfe!
    Scheinbar stimmt aber mit meiner CSS-Klasse etwas nicht. Das Icon wird jetzt auf sämtliche Links angewandt, auch auf Buttons etc. auf der betroffenen Beispielseite, bzw. Links zu Artikeln auf der Startseite. Gibt es da auch eine Lösung für oder muss ich tatsächlich jeden gewünschten Link manuell bearbeiten?

    Viele liebe Grüße!
     
  6. SuMu

    SuMu Well-Known Member

    Registriert seit:
    5. Januar 2006
    Beiträge:
    6.301
    Zustimmungen:
    84
    Du musst dann unterscheiden, zwischen internen Links und externen Links. Beispiel:

    Code:
    Entschuldige, aber du musst dich registrieren oder anmelden um den Inhalt sehen zu können!
    Näheres auf texto :cool:
     
  7. helix

    helix Well-Known Member

    Registriert seit:
    28. Juli 2011
    Beiträge:
    1.808
    Zustimmungen:
    27
    Du musst genauer eingrenzen, in welchem Bereich deine <a>-Elemente von der Formatierung betroffen sein sollen.

    Ich hatte, ehrlich gesagt, nicht überprüft, ob es auf deiner Seite hinhaut mit der Klasse .entry-content. Sollte aber eigentlich …

    Also nochmal langsam, zum Nachvollziehen: Du hattest gefragt nach „allen Hyperlinks im Content-Bereich“.
    Die CSS-Anweisung für .entry-content a:before stellt allen <a>-Elementen im <div> mit der Klasse .entry-content dein Genericon voran.

    Damit hättest du schonmal nicht mehr die Links im Navigationsmenü.
    Buttons ist natürlich auch eine Sache. Die haben aber ziemlich sicher eine eigene Klasse (womit man sie dann wieder ausschließen könnte).

    Du musst einfach strukturell gucken, wie du gezielt die Links ansprechen kannst, die du ansprechen willst.
    Wenn nicht allzuviele Links dadurch nachzubessern sind, ist der einfachste Weg der, den Links beim Erstellen eine eigene CSS-Klasse mitzugeben
    HTML:
    Entschuldige, aber du musst dich registrieren oder anmelden um den Inhalt sehen zu können!
    und dann die CSS-Anweisung für
    Code:
    Entschuldige, aber du musst dich registrieren oder anmelden um den Inhalt sehen zu können!
    Gruß
    helix
     
  8. bluebird145

    bluebird145 Well-Known Member

    Registriert seit:
    1. November 2008
    Beiträge:
    239
    Zustimmungen:
    0
    Hallo ihr beiden,

    da ich ja interne und externe Links kennzeichnen möchte, allerdings nur wenn sie sich im Text befinden, werde ich wohl um die manuelle Lösung nicht herumkommen. Zumindest weiß ich als CSS-Nichtsnutz nicht, wie ich das ganze noch weiter eingrenzen soll.

    Ich verwende jetzt folgenden Code:

    Code:
    Entschuldige, aber du musst dich registrieren oder anmelden um den Inhalt sehen zu können!
    Ist es möglich, dass Icon horizontal in der Zeile / Text auszurichten?
    Aktuell steht es eher hoch, siehe Beispielseite.

    Viele Grüße!
     
  9. mensmaximus

    mensmaximus Well-Known Member

    Registriert seit:
    24. Juli 2014
    Beiträge:
    8.857
    Zustimmungen:
    437
    vertical-align: middle;
     
  10. helix

    helix Well-Known Member

    Registriert seit:
    28. Juli 2011
    Beiträge:
    1.808
    Zustimmungen:
    27
    Naja, so wie von SuMu gepostet. In dem verlinkten Beitrag steht auch, wie es funktioniert. Hätte sich also gelohnt, dem Link einmal zu folgen. Du kannst auch einfach glauben, dass es funktioniert, und dann im geposteten Beispiel lediglich :after durch :before ersetzen und eben den Code für dein Genericon etc.

    Ob du „CSS-Nichtsnutz“ bleiben willst, ist ja deine Entscheidung …

    Dafür sollte die CSS-Eigenschaft vertical-align zuständig sein. (Sehe grade, mensmaximus war schneller)

    Gruß
    helix
     
  11. bluebird145

    bluebird145 Well-Known Member

    Registriert seit:
    1. November 2008
    Beiträge:
    239
    Zustimmungen:
    0
    Den Beitrag und Link von SuMu habe ich mir angeschaut. Möchte ich doch aber interne und externe Links nutzen, kann ich ja weder das Eine noch das Andere über die not-Funktion auslassen. Die not-Funktion wird ja auch nicht erkennen, welche Links manuell von mir gesetzt sind und welche durch Wordpress, z.B. in der Archiv-Ansicht gesetzt wurden oder?

    Bleiben möchte ich es nicht, sonst würde ich mich damit ja nicht beschäftigen :)
     
  12. helix

    helix Well-Known Member

    Registriert seit:
    28. Juli 2011
    Beiträge:
    1.808
    Zustimmungen:
    27
    Sehr gut, dann lösen wir auch dein Missverständnis für dich auf!

    Der Code, den SuMu gepostet hat, gehört in die CSS-Datei. Er ändert nichts an der Ausgabe der Daten, sondern nur an ihrer Darstellung. Und das tut er nach dem Muster: wenn dein <a>-Element nicht auf deine eigene Domain verweist, dann behandle das Element als externen Link und stelle es mit dem vorangestellten Genericon dar.

    Ansonsten Tipp zum Lernen: frag regelmäßig, wann immer du dazu den Kopf frei genug hast, die Suchmaschine deines Vertrauens nach den CSS-Eigenschaften, die hier so als Lösung gepostet werden. Es gibt mittlerweile wirklich richtig geniale CSS-Portale, auf denen gut erklärt wird, wie diese magische Veranstaltung CSS funktioniert.
    Es ist normal, dass man am Anfang fast nur Bahnhof versteht. Aber das wird immer besser. Und das erstaunlich schnell.

    Gruß
    helix
     
  13. bluebird145

    bluebird145 Well-Known Member

    Registriert seit:
    1. November 2008
    Beiträge:
    239
    Zustimmungen:
    0
    Dann habe ich es doch aber richtig verstanden ;)
    Dieses Muster funktioniert ja nicht bei mir, da ich auch auch Links in Textbereichen die auf interne Links verweisen entsprechend darstellen möchte.
     
  14. helix

    helix Well-Known Member

    Registriert seit:
    28. Juli 2011
    Beiträge:
    1.808
    Zustimmungen:
    27
    Dann ist die Antwort eine Abwägung: Wieviele Links müsstest du jetzt mit einer Klasse .genericon (oder wie-auch-immer du die benennen willst) ausstatten? => D.h. würde sich der Aufwand lohnen, deine Seitenstruktur zu durchforsten, ob du es doch strukturell anpassen kannst?

    Also: Links im Textbereich sind schonmal – wie schon benannt
    Code:
    Entschuldige, aber du musst dich registrieren oder anmelden um den Inhalt sehen zu können!
    Was kommen innerhalb des div.entry-content noch für Links vor?
    Du hast von Buttons geschrieben. Die haben vielleicht eine eigene Klasse, damit könntest du sie (auch wieder über Pseudoklasse :not()) ausschließen.
    Was noch? Mach eine Liste. Guck, ob die eigene Klassen haben. Sonst guck unter CSS => Selektoren, ob du das Vorkommen strukturell eingrenzen bzw. ausschließen kannst.

    Im Prinzip ist es ja sehr sinnvoll, es global über CSS zu lösen.
    Du wirst hinterher Links mit Klassen eingeben können. Sobald jemand anderes, weniger bewandertes, einen Text mit Link einstellen will, wird’s happig. Ist so …

    Gruß
    helix
     
  15. bluebird145

    bluebird145 Well-Known Member

    Registriert seit:
    1. November 2008
    Beiträge:
    239
    Zustimmungen:
    0
    Ja, damit hast du natürlich Recht. Werde auch versuchen das wie beschrieben zu lösen. Gab es nicht einmal ein Tool für Chrome oder Firefox, um sich in "Echtzeit" die betreffende CSS-Klasse eines bestimmten Webseitenabschnitts anzeigen zu lassen? Das würde mir vielleicht bei der Suche ein wenig weiterhelfen.
     
  16. helix

    helix Well-Known Member

    Registriert seit:
    28. Juli 2011
    Beiträge:
    1.808
    Zustimmungen:
    27
    Ja, die nennen sich Webentwickler-Tools. Gibt es in Chrome oder Firefox. Safari kennt auch was in der Art. Oder für Firefox gibt es nach wie vor Firebug. Guck sie dir an und such dir aus, was dir am besten liegt.

    Gruß
    helix
     
  17. bluebird145

    bluebird145 Well-Known Member

    Registriert seit:
    1. November 2008
    Beiträge:
    239
    Zustimmungen:
    0
    Hallo zusammen,

    ich habe mich mal weiter mit den CSS-Klassen beschäftigt und mir ein entsprechendes Entwickler-Tool in Chrome installiert.
    Grundsätzlich befinden sich alle meine Links also in der CSS-Klasse ".entry-content" - außer dieser Klasse muss ich nun aber alles was ich nicht brauche mit der not-Funktion ausschließen. Als ersten Versuch hatte ich da die Klasse ".nx-posts" genommen, da diese auf der Startseite scheinbar meine Blogansicht umfasst.

    Das Script sieht so aus, funktioniert aber natürlich nicht. Habe es mehrfach verglichen mit Beispielen:

    Code:
    Entschuldige, aber du musst dich registrieren oder anmelden um den Inhalt sehen zu können!
    Für mein Verständnis rufe ich in beiden Fällen die Klasse ".entry-content" auf, schließe in diesem Bereich allerdings die Klasse ".nx-posts" aus.
    Was mache ich da falsch?

    Viele Grüße
     
  18. helix

    helix Well-Known Member

    Registriert seit:
    28. Juli 2011
    Beiträge:
    1.808
    Zustimmungen:
    27
    Du musst im CSS die HTML-Elemente in der gleichen Reihenfolge bringen, wie sie im Quelltext ineinander verschachtelt sind.

    Du hast ein div mit der Klasse .entry-content. In diesem div gibt es (unter anderem) wieder ein div, diesmal mit deiner Klasse .nx-posts. Du willst, dass Links (a) innerhalb dieses divs nicht mit deinem Genericon dargestellt werden.

    Da kannst du nun zweierlei probieren:
    Code:
    Entschuldige, aber du musst dich registrieren oder anmelden um den Inhalt sehen zu können!
    oder
    Code:
    Entschuldige, aber du musst dich registrieren oder anmelden um den Inhalt sehen zu können!
    Gegebenenfalls im zweiten Beispiel vor der Klasse .nx-posts auch noch die Klasse .entry-content notieren (mit Leerzeichen dazwischen).

    Und dann bitte nochmal nachlesen, wie sich das in CSS mit der Auszeichnung verschachtelter Elemente verhält. Bringt dich ja nicht weiter, wenn du irgendwie über Try & Error in deinem Stylesheet rumstocherst. (Dein Fehler zeigt, wo es in deinem Verständnis noch hakt; also nimm das nicht als bösartig, sondern als gezielten Hinweis. Danke.)

    Gruß
    helix
     
  19. bluebird145

    bluebird145 Well-Known Member

    Registriert seit:
    1. November 2008
    Beiträge:
    239
    Zustimmungen:
    0
    Guten Morgen zusammen!

    Ich habe jetzt beide deiner Beispiele mehrfach in verschiedenen Versionen hin und her getestet und auch deinen Hinweis gelesen. Es will aber nicht richtig funktionieren.
    Dieser Code ist leider in Anbetracht des Auskommentieren der :not-Klassen wirkungslos:

    Code:
    Entschuldige, aber du musst dich registrieren oder anmelden um den Inhalt sehen zu können!

    Bei diesem Code hatte ich immerhin den Teilerfolg, dass das Icon in .nx-posts verschwunden ist. Der Link wird dennoch in #dd3333 formatiert.


    Code:
    Entschuldige, aber du musst dich registrieren oder anmelden um den Inhalt sehen zu können!
    Ich verstehe absolut nicht woran es liegt. Die Klassen scheinen ja die Richtigen zu sein. Ansonsten hätte ich im zweiten Code keinen Teilerfolg. Das Entwicklertool gibt mir auch keine anderen Klassen mehr aus die ich verwenden könnte. Ich bin momentan vollkommen ratlos.

    Viele liebe Grüße!
     
  20. helix

    helix Well-Known Member

    Registriert seit:
    28. Juli 2011
    Beiträge:
    1.808
    Zustimmungen:
    27
    Aber content: ''; ist nicht die passende Anweisung, um die Farbe eines Links zu ändern.

    Gruß
    helix
     
  1. Diese Seite verwendet Cookies, um Inhalte zu personalisieren, diese deiner Erfahrung anzupassen und dich nach der Registrierung angemeldet zu halten.
    Wenn du dich weiterhin auf dieser Seite aufhältst, akzeptierst du unseren Einsatz von Cookies.
    Information ausblenden
  1. Diese Seite verwendet Cookies, um Inhalte zu personalisieren, diese deiner Erfahrung anzupassen und dich nach der Registrierung angemeldet zu halten.
    Wenn du dich weiterhin auf dieser Seite aufhältst, akzeptierst du unseren Einsatz von Cookies.
    Information ausblenden