Seite 1 von 1

Änderung an External Images as Link

Verfasst: 08.03.2018 08:22
von 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! :)

Re: Änderung an External Images as Link

Verfasst: 08.03.2018 08:37
von 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

Re: Änderung an External Images as Link

Verfasst: 08.03.2018 09:40
von musashi
Das geht auch, machen wir schon länger bei einigen Linkvarianten, mit dem Guide wäre es damals einfacher gewesen :D

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;
}

Re: Änderung an External Images as Link

Verfasst: 08.03.2018 15:48
von 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