[gelöst] Links mit Icons darstellen
am 19.07.2015 - 21:11 Uhr in
Hallo.
Ich hoffe, meine Frage ist nicht schwierig bis nicht lösbar. ;-)
Ich habe einige Seiten die mit Links zu anderen externen Seiten aber auch zu Bildern, Audiodateien und PDFs verlinkt sind. Leider gibt es keine Möglichkeit, beim erstellen von Seiten (Article, Basic oder Book) kleine Icons links vor den Link zu setzen. Ich wollte je nach Datei oder externen Link ein spezielles Icon haben. Also beispielsweise einen kleinen Pfeil für externe Links, ein PDF icon für PDF links usw. Ich habe versucht, das Stylesheet anzupassen, aber es klappt nicht. Ich weiß nicht wie es angesprochen wird. Ich habe den Style vom allgemeinen Link genommen und angepasst, um zu sehen, ob ich an der richtigen css spiele und dann habe ich meinen style drunter gesetzt, aber ich habe es irgendwie falsch gemacht.
Das hier ist der link style
content a:hover img {
background:#F0F0F0;
}
Und das hier ist mein Versuch, ein icon vor den Linktext zu platzieren.
.content a:link pdf {
background: url(images/pdf.gif) no-repeat;
}
Ich weiss ich mache irgendwas falsch, weil es nicht angezeigt wird (das icon befindet sich im entsprechenden Ordner und heißt so wie angegeben), aber was mache ich falsch? Ich benutze das Professional Theme, falls das wichtig sein sollte.
Kann mir bitte jemand helfen?
Danke, Bepo
- Anmelden oder Registrieren um Kommentare zu schreiben
Eine kurze Google Suche hätte
am 19.07.2015 - 22:15 Uhr
Eine kurze Google Suche hätte dir hier auch weitergeholfen.
Anbei ein Code Snippet, welches du nutzen kannst:
a[href$=’.pdf’] {
background: url(../images/icon-pdf.gif) center left no-repeat;
padding-left:20px;
line-height:16px;
}
Weitere Infos dazu: http://www.camma.ch/2009/11/06/css-links-mit-datei-icon-ergaenzen/commen...
SteffenR
http://www.twitter.com/_steffenr
Drupal-Initiative e.V.
Danke. Ich habe in Google
am 19.07.2015 - 22:48 Uhr
Danke. Ich habe in Google gesucht, allerdings nicht mit den richtigen Begriffen wie es scheint.
Ich habe es ausprobiert (link Adresse und Name natürlich angepasst), aber es werden keine Icons angezeigt.
Ich habe auch einen Link zur englisch sprachigen Drupal Seite gefunden mit der gleichen Frage, aber irgendwie bin ich wohl zu blöd das zu verstehen...
https://www.drupal.org/node/1863894
----------------------------------------
Drupal 7.39
kannst du die Icons direkt im Browser anzeigen
am 20.07.2015 - 08:33 Uhr
was passiert, wenn du den ganzen Pfad zu den Icons im Browser eingibst?
Kannst du sie dann sehen?
Grüße
Ronald
Leider das gleiche Ergebnis.
am 20.07.2015 - 10:54 Uhr
Wenn ich meinen absoluten Pfad im Browser aufrufe bekomme ich das Icon angezeigt.
----------------------------------------
Drupal 7.39
dann schau nochmal genau auf den relativen Pfad
am 20.07.2015 - 11:42 Uhr
der bezieht sich normalerweise auf das Sites-Verzeichnis, bzw. sites/default/files
Was ist bei Images eingestellt?
Worauf zeigt der relative?
Achtung! Cache kann dich nochmals verwirren.
Immer wenn due eine Pfadeinstellung vorgenommen hast, darfst du nicht vergessen die caches zu löschen.
Grüße
Ronald
Dieses "sites/default/files"
am 20.07.2015 - 14:23 Uhr
Dieses "sites/default/files" steht bei mir auch.
Wo kann ich denn das fuer die Images pruefen?
Sorry, fuer meine bloede Frage.
EDIT: Ich habe in meinem style.css jetzt den Pfad angepasst auf "sites/default/files/images/pdf.gif" aber das hat nichts geholfen.
----------------------------------------
Drupal 7.39
Versuche es mal mit
am 20.07.2015 - 14:11 Uhr
Versuche es mal mit "/sites/default/files" im CSS.
.
Werner
drupal-training.de
Moderator und Drupal Trainer
* - - - - - - - - - - - - - - - - - - - - - - - - - - - *
Hab ich gemacht. Ich habe den
am 20.07.2015 - 22:47 Uhr
Hab ich gemacht. Ich habe den pfad in meiner style.css auf diesen Pfad angepasst.
Hat aber auch nichts geholfen. Ich benutze übrigens "Filtered HTML", aber ich habe auch schon die anderen Varianten probiert, alle mit dem gleichen enttäuschenden Ergebnis.
Was mache ich bloß falsch?
----------------------------------------
Drupal 7.39
Ohne die Seite im Browser
am 20.07.2015 - 23:48 Uhr
Ohne die Seite im Browser untersuchen zu können (etwa mit Hilfe vom Firebug) wird Dir keiner weiterhelfen können, sorry.
.
Werner
drupal-training.de
Moderator und Drupal Trainer
* - - - - - - - - - - - - - - - - - - - - - - - - - - - *
Stimmt wohl. Ich habe Firebug
am 21.07.2015 - 11:35 Uhr
Stimmt wohl. Ich habe Firebug installiert und sogar das Drupal for Firebug.
Ich habe eine testseite und habe dort einen link von der eigentlichen Seite getestet und siehe da, dort wird (allerding nach dem Link Text anstatt vor dem text aber egal erstmal) angezeigt. Ich benutze auf beiden Seiten dasselbe Theme mit dem selben stylesheet file.
Ihr könnt ja gern mal schauen.
Hier wird das icon gezeigt.
Hier wird es nicht angezeigt.
Allerdings ist es nicht das pdf-icon was ich wollte, weshalb ich vermute, dass der Unterschied in einem bestimmten Modul liegen muss.
----------------------------------------
Drupal 7.39
Hi, ich hab mir kurz beide
am 21.07.2015 - 12:14 Uhr
Hi,
ich hab mir kurz beide Seiten angesehen.
Mir scheint auf der einen Seite hast Du das Modul iconizer installiert auf der anderen nicht.
Das css des Iconizer Moduls wird laut Firebug jedenfalls auf Deiner 2. Seite nicht geladen,
auf der 1. schon.
Gruss
Robert
https://awri.ch
Ich habe eine Schweizer Tastatur und daher kein scharfes ß ;-)
Ist es denn überhaupt
am 21.07.2015 - 13:14 Uhr
Ist es denn überhaupt notwendig dieses extra modul zu installieren, wenn ich es per css einbinden kann?
Ich wollte auf kolboske.de nur die allernötigsten Module installieren, damit es nicht zu überladen wird.
----------------------------------------
Drupal 7.39
Hallo, nun ja, wenn Du dieses
am 21.07.2015 - 14:16 Uhr
Hallo,
nun ja, wenn Du dieses Modul auf der 1. Seite ausschaltest
wird es auch dort nicht funktionieren.
Schau mal in Firebug, das relevante CSS scheint von diesem Modul zu kommen.
MfG
Robert
https://awri.ch
Ich habe eine Schweizer Tastatur und daher kein scharfes ß ;-)
Was meinst du mit "wenn Du
am 21.07.2015 - 16:13 Uhr
Was meinst du mit "wenn Du dieses Modul auf der 1. Seite ausschaltest wird es auch dort nicht funktionieren"?
----------------------------------------
Drupal 7.39
Hi, wenn Du auf Deiner 1.
am 22.07.2015 - 11:47 Uhr
Hi,
wenn Du auf Deiner 1. Seite (http://poeschic.de/drupal/node/8) das Modul Iconizer ausschaltest, dann hast Du dort auch kein PDF Icon mehr.
Im Firebug kannst Du sehen, dass dieses Image durch folgendes CSS eingebunden wird:
http://poeschic.de/drupal/sites/all/modules/iconizer/files_icons.css?nrr6bh
Folglich kommt das CSS vom Modul Iconizer.
Auf Deiner 2. Seite sehe ich kein CSS welches ein PDF Icon einbindet.
Gruss
Robert
https://awri.ch
Ich habe eine Schweizer Tastatur und daher kein scharfes ß ;-)
Auf der
am 23.07.2015 - 10:47 Uhr
Auf der (http://kolboske.de/drupal/node/70) habe ich die icons eigentlich durch die style.css des themes eingebunden. Ich habe dort die jeweiligen Zeilen hinzugefügt. Aber sie werden irgendwie nicht erkannt.
So sieht der Eintrag in der style.css aus, der zu einem pdf link text ein icon hinzufügen soll.
/* PDF-Links */
a[href$=’.pdf’] {
background: url(../images/pdf.gif) center left no-repeat;
padding-left:20px;
line-height:16px;
}
Das muss doch auch irgendwie ohne dieses Modul gehen, oder etwa nicht?
----------------------------------------
Drupal 7.39
wenn du etwas mehr schreiben möchtest
am 23.07.2015 - 10:57 Uhr
geht das sicher auch ohne Modul.
Aber am Ende schreibst du mehr oder weniger, was im Modul drin steht.
Du könntest per regex feststellen, ob ein Link, der auf der Seite angezeigt wird, eine pdf-Endung hat, und dann das Symbol einblenden.
Das kannst du im Template tun, oder mit Jacascript auf dem Client, ... , oder du lässt es das Modul machen.
Du kannst dir natürlich das Modul ansehen, und schauen, ob dort etwas drin steht, was du nicht brauchst.
Dann benennst du es um, und erstellst aus dem modifizierten Modul ein eigenes Modul.
Der Fairness halber solltest du im Modulkommentar hinterlassen, dass dein Modul auf dem anderen basiert.
Grüße
Ronald
Hallo Bepo,versuche
am 23.07.2015 - 11:11 Uhr
Hallo Bepo,
versuche damit:
a[href$='.pdf'] {
background: url(/drupal/sites/default/files/images/pdf.gif) center left no-repeat;
padding-left:20px;
line-height:16px;
}
Und falls du dein "Icon-Modul" deinstalieren möchtest, solltest du sicherstellen, dass die Bilder (pdf.gif, usw.) in dem Ordner liegen /drupal/sites/default/files/images/.
www.it-stent.de
Fantastisch es klappt. Super
am 23.07.2015 - 11:15 Uhr
Fantastisch es klappt. Super Danke. Dabei hatte ich den Pfad so schon mal aber wahrscheinlich hatte ich einen typo.
----------------------------------------
Drupal 7.39
Schön, dass es geklappt
am 23.07.2015 - 11:19 Uhr
Schön, dass es geklappt hat.
...und eigentlich sollten es doppelte Anführungszeichen sein.
a[href$=".pdf"] {
...
}
LG Piotr
www.it-stent.de
Das sieht schick aus. Ich
am 23.07.2015 - 12:50 Uhr
Das sieht schick aus. Ich würde gern auch externe links und email Adressen mit einem Link bestücken, aber das will nicht so recht.
Der Code in meiner style.css sieht entsprechend aus.
/* mailto: Links */
a[href^=”mailto:”], a[href*=”UnCryptMailto”] {
background: url(/drupal/sites/default/files/images/email.png) center left no-repeat;
padding-left:25px;
line-height:16px;
}
/* externe: Links */
a[href^=”http://”], a[href^=”https://”] {
background: url(/drupal/sites/default/files/images/external-link-icon.png) center right no-repeat;
padding-right:25px;
}
----------------------------------------
Drupal 7.39
Anführungszeichen
am 23.07.2015 - 13:54 Uhr
benutze keine "schrägen" Anführungszeichen.
www.it-stent.de
Sollten Sie eigentlich nicht
am 24.07.2015 - 08:33 Uhr
Sollten Sie eigentlich nicht sein. Komisch. Ich benutze gedit auf Linux.
Aber ansonsten sollte das so stimmen?
Wenn ich die Anführungsstriche ersetze, werden die Icons folgendermaßen ersetzt (siehe screenshot). So soll es aber nicht sein.
Ich habe die styles für http rausgenommen. Dann zeigt er wieder meine Icons an.
----------------------------------------
Drupal 7.39
Dein Problem mit den Pfad hat
am 24.07.2015 - 09:36 Uhr
Dein Problem mit den Pfad hat sich erledigt und jetzt nehme ich an, hast Du ein anderes (wie Du richtig die externe Links selektierst).
Da Du teilweise mit absoluten URLs für die interne Verlinkungen arbeitest, müsstest Du zusätzlich die absoluten Verlinkungen, die den Namen Deiner Domain enthalten, ausschließen.
Für http könnte das so aussehen:
a[href^="http://"]:not([href*="kolboske.de"]) {
...
}
Beachte bitte, dass externe Verlinkungen, die den Ausdruck "kolboske.de" enthalten, auch ausgeschlossen werden (vllt. manche Ref-Links...).
Sollte Dein Problem ein anderer gewesen sein, beschreibe es bitte genauer.
LG Piotr
www.it-stent.de
Ja super es klappt, ich danke
am 24.07.2015 - 11:20 Uhr
Ja super es klappt, ich danke dir und auch den anderen die mir geholfen haben. :-)
Dann kann ich meine Anfrage jetzt auf [gelöst] stellen.
----------------------------------------
Drupal 7.39
Noch eine Nachfrage
am 29.07.2015 - 13:29 Uhr
Schaut euch bitte mal den Screenshot an. Da wird eine kleine Weltkugel angezeigt neben dem Bild. Das Bild ist auf eine Vollansicht desselben Bildes verlinkt. Das Bild selbst ist ein *.png Bild, und mein Stylesheet gibt keine Anweisungen für *.png Bildformate, aber trotzdem wird ein icon angezeigt. Auch ist es das falsche icon. Ich hätte gedacht, dass wenigstens das bild-icon angezeigt werden müsste. Ich habe jetzt ein extra style geschrieben für *.png, aber das wird ignoriert.
/* Bild-Links */
a[href$=".jpg"] {
background: url(/drupal/sites/default/files/images/icon_bild.jpg) center left no-repeat;
padding-left:25px;
line-height:16px;
}
a[href$=".png"] {
background: url(/drupal/sites/default/files/images/pixel.png) center left no-repeat;
padding-left:1px;
line-height:1px;
}
Kann mir jemand sagen, was ich hier falsch mache?
Danke.
----------------------------------------
Drupal 7.39