Änderung an External Images as Link

[musashi]

Moin,

da die Ext ja von phpbb.de ist, frage ich hier nach und nicht auf .com

Folgendes: Die Ext hat ja keine Template/Style Elemente. Wir würden es dennoch gerne leicht aufhübschen. Und zwar wie hier zu sehen: [ externes Bild ]

Das Icon davor ist nur ein Beispiel, aber was erreicht werden soll, sollte ja erkenntlich sein. Wir haben das jetzt zwar drin (das ist keine Fotomontage), aber natürlich global in unserem Testboard.

Was müsste man denn alles anpacken, damit es nur die Links betrifft, die diese Ext umwandelt?

Btw danke für die Ext, die ist klasse!

[Mahony]

Hallo
Evtl. hilft dir ja das hier weiter >>> viewtopic.php?f=149&t=238250 oder das hier >>> https://tas2580.net/blog/externe-links-mit-icon.html

Grüße: Mahony

[musashi]

Das geht auch, machen wir schon länger bei einigen Linkvarianten, mit dem Guide wäre es damals einfacher gewesen

Ich denke wir machen das nun so:

https://imgur.com/a/xjxkI

Wer es so oder so ähnlich machen will, hier der CSS code, der gehört in die colours.css
Farben Icons etc kann sich ja jeder selbst einstellen

Code: Alles auswählen

/* Bilderlinks*/

a.postlink[href$=".jpg"],
a.postlink[href$=".jpeg"],
a.postlink[href$=".gif"],
a.postlink[href$=".png"],
a.postlink[href$=".svg"] { 
padding-left: 15px;
 position: relative;
	}

a.postlink[href^="http:"][href$=".jpg"]:before,
a.postlink[href^="http:"][href$=".jpeg"]:before,
a.postlink[href^="http:"][href$=".gif"]:before,
a.postlink[href^="http:"][href$=".png"]:before,
a.postlink[href^="http:"][href$=".svg"]:before {
	    content: "\f09c";
		   font-weight: normal;
    font-style: normal;
    font-variant: normal;
    font-family: FontAwesome;
    font-size: 14px;
    line-height: 1;
    text-rendering: auto;
	display:block;
	width: 15px;
	height: 10px;
	position: absolute;
	left: 0;
	top: 2px;
	color: #C00000;
    -webkit-font-smoothing: antialiased;
}
a.postlink[href^="https:"][href$=".jpg"]:before,
a.postlink[href^="https:"][href$=".jpeg"]:before,
a.postlink[href^="https:"][href$=".gif"]:before,
a.postlink[href^="https:"][href$=".png"]:before,
a.postlink[href^="https:"][href$=".svg"]:before {
	    content: "\f023";
		   font-weight: normal;
    font-style: normal;
    font-variant: normal;
    font-family: FontAwesome;
    font-size: 14px;
    line-height: 1;

    text-rendering: auto;
	display:block;
	width: 14px;
	height: 10px;
	position: absolute;
	left: 0;
	top: 2px;
	color: #008000;
	
    -webkit-font-smoothing: antialiased;
}

[Joyce&Luna]

Die Beschreibung kann man doch in der language verändern.
Statt externes Bild schreibt man dort Bilderlink ( No SSL )

Fehlt dann nur das Icon