Forum - Für die Iconbar: Smileys mit einstellbarer Größe!

Forum → XOBOR-Foren und Homepages → Alles f�r Ihr eigenes Forum oder Ihrer Webseite - Hilfe, Tricks & Tipps → Für die Iconbar: Smileys mit einstellbarer Größe!

Hier sehen Sie Beitr�ge zu den einzelnen Themen

Themen-Einstellungen Thema

Thema abonnieren

Thema drucken

Bereich wechseln

Start Willkommen! Ank�ndigungen & Termine, wichtige News! Stellen Sie Ihr eigene Webseite vor! Betriebssystem MS Windows Betriebssystem MS Windows 10, 8.1, 8 und 7 - Tricks & Tipps MS Windows 10, 8.1, 8 und 7 - Fragen & Antworten �rger mit Ihrem PC? �rger mit dem PC - Vorbeugung und Hilfe �rger mit dem PC - Fragen & Antworten Fragen zu DSL, VDSL, LTE und anderen Netzempfangsarten XOBOR-Foren und Homepages Alles f�r Ihr eigenes Forum oder Ihrer Webseite - Hilfe, Tricks & Tipps Alles f�r Ihr eigenes Forum oder Ihrer Webseite - Fragen & Antworten Das neue Template Xobor (v6) Energieerzeugung im neuen Zeitalter - Revolution�r! Videos und Webseiten zur Freien Energie Wasserstoff - Energietr�ger der Zukunft. Die besten Links Empfehlenswerte und interessante Links! Link - Suche Verschiedenes Faszinationen & Unglaubliches! Tricks & Tipps f�r Smartphones und iPhones Lob, Kritik & Verbesserungsvorschl�ge Spiel & Spa�, Witz & gute Laune! Spiritualit�t, Seele, New Age, Yoga, Gesundheit Alles, was noch so �brig bleibt Bannertausch Wie funktioniert der Bannertausch? Bannerrotation und Bannerwechsel

#1 | Für die Iconbar: Smileys mit einstellbarer Größe! datum

23.01.2020 08:43 (zuletzt bearbeitet: 02.02.2020 15:43)

Wolfgang

Administrator

Informationen anzeigen

Für die Iconbar: Smileys mit einstellbarer Größe - Teil 1
Aktualisiert 24.01.20

Smileys und Emojis werden immer beliebter, unterstreichen oder verstärken die Bedeutung des Textes oder der Nachricht!
Auch die Struktur und Größe sind wichtig und wollen ausgewählt werden!
Bereits im Support-Forum finden Emojis mit der Endung "svg" Verwendung!
In diesen Emojis schlummert allerdings eine wertvolle Option, die veränderbare Größe mit ansehnlicher Auflösung!

Beispiel:

• Die Größe kann beliebig gewählt werden, ohne das die Qualität nennenswert nachlässt!

Bitte mit der Maus berühren!

Installation

Emojis mit einstellbarer Größe!

  • Die Adressen der Emojis mit "svg-Endung" können wie normale Bildadressen verwendet werden!
  • Die Größe bei HTML-Codes wird über die Breite width="??px" definiert!
  • Bei den Foren-Codes ist die Installation "Forum-Bilder mit einstellbarer Breite" erforderlich (siehe unten)!

HTML-Code:

Foren-Code:

[img]//img.homepagemodules.de/ds/static/smileys/v2/grin.svg[/img]

[img=50px]//img.homepagemodules.de/ds/static/smileys/v2/grin.svg[/img]

//img.homepagemodules.de/ds/static/smileys/v2/grin.svg

//img.homepagemodules.de/ds/static/smileys/v2/wink.svg

//img.homepagemodules.de/ds/static/smileys/v2/smile2.svg

//img.homepagemodules.de/ds/static/smileys/v2/smile.svg

//img.homepagemodules.de/ds/static/smileys/v2/frown.svg

//img.homepagemodules.de/ds/static/smileys/v2/cool.svg

//img.homepagemodules.de/ds/static/smileys/v2/weinen.svg

//img.homepagemodules.de/ds/static/smileys/v2/schlafen.svg

//img.homepagemodules.de/ds/static/smileys/v2/nachdenken.svg

//img.homepagemodules.de/ds/static/smileys/v2/heart.svg

//img.homepagemodules.de/ds/static/smileys/v2/rose.svg

//img.homepagemodules.de/ds/static/smileys/v2/idee.svg

//img.homepagemodules.de/ds/static/smileys/v2/feuer.svg

//img.homepagemodules.de/ds/static/smileys/v2/sonne.svg

//img.homepagemodules.de/ds/static/smileys/v2/haeckchen.svg

//img.homepagemodules.de/ds/static/smileys/v2/x.svg

//img.homepagemodules.de/ds/static/smileys/v2/frage.svg

//img.homepagemodules.de/ds/static/smileys/v2/rufezeichen.svg

Schlie�en

  • Sollen die Emojis in der Iconbar mit einstellbarer Größe ausgestattet werden, muss vorab "Bilder mit einstellbarer Breite" installiert werden (siehe unten)!
  • Iconbar aufrufen und Reiter "HTML" anklicken!
  • "Namen" vergeben, wie z.B. Xobor-Emojis und folgende Zeilen einfügen und speichern!
  • Den neu erstellten "HTML-Code" in eine vorhandene "Smiley-Gruppe" schieben oder eine neue Gruppe erstellen!
  • Dazu Reiter "Gruppe" anklicken, Name wie z.B. "Emojis" vergeben!
  • Grafik eintragen z.B.: //img.homepagemodules.de/ds/static/smileys/v2/grin.svg

  • In Zeile 2 kann der Abstand zwischen den Emojis bestimmt werden!
  • In Zeile 3 wird die Größe der Emojis in der Iconbar bestimmt!
  • In Zeile 4 werden die einstellbaren Emojis durch ein Mouseover vergrößert und besonders hervorgehoben!
  • Ist diese Funktion nicht erwünscht, braucht nur Zeile 4 gelöscht werden!
  • In Zeile 7-28 kann man über "[img=30px]" die Größendarstellung in Beiträgen bestimmen! Unterschiedliche Werte sind auch möglich!
  • Die Emojis sind auch mit Tooltipps versehen, die geändert oder auch gelöscht werden können!

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
 
<style>
.xob_icon_c { width:40px !important; height:40px !important;}
.xob_icon_c img { height:30px; max-height:30px !important;}
.xob_icon_c img:hover{ height:40px  !important; max-height:40px !important;position:absolute;}
</style>
 
<div class="xob_icon_c" onclick="xob_insert('[img=30px]//img.homepagemodules.de/ds/static/smileys/v2/grin.svg[/img]')"><img alt="Grin" title="Grin einfügen - Größe veränderbar! - Größe veränderbar!" class="xob_icon" src="//img.homepagemodules.de/ds/static/smileys/v2/grin.svg"></div>
<div class="xob_icon_c" onclick="xob_insert('[img=30px]//img.homepagemodules.de/ds/static/smileys/v2/wink.svg[/img]')"><img alt="Wink" title="Wink einfügen - Größe veränderbar!" class="xob_icon" src="//img.homepagemodules.de/ds/static/smileys/v2/wink.svg"></div>
<div class="xob_icon_c" onclick="xob_insert('[img=30px]//img.homepagemodules.de/ds/static/smileys/v2/smile2.svg[/img]')"><img alt="Smiley" title="Smiley einfügen - Größe veränderbar!" class="xob_icon" src="//img.homepagemodules.de/ds/static/smileys/v2/smile2.svg"></div>
<div class="xob_icon_c" onclick="xob_insert('[img=30px]//img.homepagemodules.de/ds/static/smileys/v2/smile.svg[/img]')"><img alt="Smile" title="Smile einfügen - Größe veränderbar!" class="xob_icon" src="//img.homepagemodules.de/ds/static/smileys/v2/smile.svg"></div>
<div class="xob_icon_c" onclick="xob_insert('[img=30px]//img.homepagemodules.de/ds/static/smileys/v2/frown.svg[/img]')"><img alt="Frown" title="Frown einfügen - Größe veränderbar!" class="xob_icon" src="//img.homepagemodules.de/ds/static/smileys/v2/frown.svg"></div>
<div class="xob_icon_c" onclick="xob_insert('[img=30px]//img.homepagemodules.de/ds/static/smileys/v2/cool.svg[/img]')"><img alt="Cool" title="Cool einfügen - Größe veränderbar!" class="xob_icon" src="//img.homepagemodules.de/ds/static/smileys/v2/cool.svg"></div>
<div class="xob_icon_c" onclick="xob_insert('[img=30px]//img.homepagemodules.de/ds/static/smileys/v2/weinen.svg[/img]')"><img alt="Weinen" title="Weinen einfügen - Größe veränderbar!" class="xob_icon" src="//img.homepagemodules.de/ds/static/smileys/v2/weinen.svg"></div>
<div class="xob_icon_c" onclick="xob_insert('[img=30px]//img.homepagemodules.de/ds/static/smileys/v2/schlafen.svg[/img]')"><img alt="Schlafen" title="Schlafen einfügen - Größe veränderbar!" class="xob_icon" src="//img.homepagemodules.de/ds/static/smileys/v2/schlafen.svg"></div>
<div class="xob_icon_c" onclick="xob_insert('[img=30px]//img.homepagemodules.de/ds/static/smileys/v2/nachdenken.svg[/img]')"><img alt="Nachdenken" title="Nachdenken einfügen - Größe veränderbar!" class="xob_icon" src="//img.homepagemodules.de/ds/static/smileys/v2/nachdenken.svg"></div>
<div class="xob_icon_c" onclick="xob_insert('[img=30px]//img.homepagemodules.de/ds/static/smileys/v2/death.svg[/img]')"><img alt="Death" title="Death einfügen - Größe veränderbar!" class="xob_icon" src="//img.homepagemodules.de/ds/static/smileys/v2/death.svg"></div>
 

<div class="xob_icon_c" onclick="xob_insert('[img=30px]//img.homepagemodules.de/ds/static/smileys/v2/heart.svg[/img]')"><img alt="Heart" title="Heart einfügen - Größe veränderbar!" class="xob_icon" src="//img.homepagemodules.de/ds/static/smileys/v2/heart.svg"></div>
<div class="xob_icon_c" onclick="xob_insert('[img=30px]//img.homepagemodules.de/ds/static/smileys/v2/glueck.svg[/img]')"><img alt="Glueck" title="Glueck einfügen - Größe veränderbar!" class="xob_icon" src="//img.homepagemodules.de/ds/static/smileys/v2/glueck.svg"></div>
<div class="xob_icon_c" onclick="xob_insert('[img=30px]//img.homepagemodules.de/ds/static/smileys/v2/rose.svg[/img]')"><img alt="Rose" title="Rose einfügen - Größe veränderbar!" class="xob_icon" src="//img.homepagemodules.de/ds/static/smileys/v2/rose.svg"></div>
<div class="xob_icon_c" onclick="xob_insert('[img=30px]//img.homepagemodules.de/ds/static/smileys/v2/idee.svg[/img]')"><img alt="Idee" title="Idee einfügen - Größe veränderbar!" class="xob_icon" src="//img.homepagemodules.de/ds/static/smileys/v2/idee.svg"></div>
<div class="xob_icon_c" onclick="xob_insert('[img=30px]//img.homepagemodules.de/ds/static/smileys/v2/feuer.svg[/img]')"><img alt="Feuer" title="Feuer einfügen - Größe veränderbar!" class="xob_icon" src="//img.homepagemodules.de/ds/static/smileys/v2/feuer.svg"></div>
<div class="xob_icon_c" onclick="xob_insert('[img=30px]//img.homepagemodules.de/ds/static/smileys/v2/sonne.svg[/img]')"><img alt="Sonne" title="Sonne einfügen - Größe veränderbar!" class="xob_icon" src="//img.homepagemodules.de/ds/static/smileys/v2/sonne.svg"></div>
<div class="xob_icon_c" onclick="xob_insert('[img=30px]//img.homepagemodules.de/ds/static/smileys/v2/haeckchen.svg[/img]')"><img alt="Häkchen" title="Häkchen einfügen - Größe veränderbar!" class="xob_icon" src="//img.homepagemodules.de/ds/static/smileys/v2/haeckchen.svg"></div>
<div class="xob_icon_c" onclick="xob_insert('[img=30px]//img.homepagemodules.de/ds/static/smileys/v2/x.svg[/img]')"><img alt="X" title="X einfügen - Größe veränderbar!" class="xob_icon" src="//img.homepagemodules.de/ds/static/smileys/v2/x.svg"></div>
<div class="xob_icon_c" onclick="xob_insert('[img=30px]//img.homepagemodules.de/ds/static/smileys/v2/frage.svg[/img]')"><img alt="Frage" title="X einfügen - Größe veränderbar!" class="xob_icon" src="//img.homepagemodules.de/ds/static/smileys/v2/frage.svg"></div>
<div class="xob_icon_c" onclick="xob_insert('[img=30px]//img.homepagemodules.de/ds/static/smileys/v2/rufezeichen.svg[/img]')"><img alt="Ausrufezeichen" title="Ausrufezeichen einfügen - Größe veränderbar!" class="xob_icon" src="//img.homepagemodules.de/ds/static/smileys/v2/rufezeichen.svg"></div>
 

Schlie�en

  • Iconbar aufrufen!
  • Reiter Forencode anklicken!
  • Erweiterte Foren-Code einblenden!
  • Werte eintragen und speichern!
  • Forencode in "nicht sichtbar" verschieben!

  • Auch hier: Forum-Bilder mit einstellbarer Größe und Tooltipps austatten

Ersetze:

1
2
3
 
[img={{breite}}]
...
[/img]
 

Mit:

1
2
3
 
<img style="width:{{breite}} !important;" src="
...
" border="0">
 

Weitere Einstellungen:

1
 
Reihenfolge: 0

Schlie�en

Interessante Links zu Emojis:

• 315 Icon-Packs of Smiley
• Emoticons auf Freepik

Weitere interessante Links zur Iconbar:

  • Meine komplette Forum-Iconbar zum herunterladen
  • Beiträge nur für Mitglieder in der neuen Iconbar
  • Versteckte Kommentare in Forum-Beiträgen nutzen!
  • Smileys in der Schnellantwort
  • Glow - Leuchtender Text mit CSS3 "text-shadow"
  • Kleine Bildergalerie in der Iconbar
  • Kopiersperre / Markierungssperre / Eigenes Kontextmenü
  • Iconbar fixieren - gut für lange Beiträge
  • Signatur manuell ausblenden

Viel Spaß
Wolfgang

Thema abonnieren Forum �bersicht Letzte Beitr�ge

Antworten

#2 | Foren-Codes für Smileys mit einstellbarer Größe minimieren - Teil 2 datum

24.01.2020 20:34 (zuletzt bearbeitet: 02.02.2020 13:23)

Wolfgang

Administrator

Informationen anzeigen

Foren-Codes für Smileys mit einstellbarer Größe minimieren - Teil 2

Betrachtet man sich die Länge eines Foren-Codes, ist sie für ein Emoji recht groß!
Möchte man die Länge minimieren, muss man für jedes Emoji einen neuen Foren-Code anlegen (18x)!
Für die Größenbestimmung kann man auf die Schriftgrößeneinheiten "px" oder "rem" verzichten, wenn man sie bei der Erstellung eines neuen Foren-Codes mit einbezieht!

Der Foren-Code würde dann so aussehen:

Vorher:

[img=50px]//img.homepagemodules.de/ds/static/smileys/v2/cool.svg[/img]

Nachher:

[cool=50]

Installation

Für alle Emoji mit Endung "svg" muss wie folgt ein neuer Foren-Code angelegt werden (18x)!

  • Iconbar aufrufen!
  • Reiter Forencode anklicken!
  • Erweiterte Foren-Code ausblenden!
  • Werte eintragen und speichern!
  • Forencode in "nicht sichtbar" verschieben!
  • Wichtig: Es ist bei dieser Lösung nicht zwingend notwendig Forum-Bilder mit einstellbarer Größe und Tooltipps austatten zu installieren!

Beispiel für Emoji "cool"!

Ersetze:

1
 
[cool={{width}}]

Mit:

1
 
<img style="width:{{width}}px !important;" src="//img.homepagemodules.de/ds/static/smileys/v2/cool.svg" border="0">

Weitere Einstellungen:

1
 
Reihenfolge: 0

Schlie�en

  • Iconbar aufrufen und Reiter "HTML" anklicken!
  • "Namen" vergeben, wie z.B. Xobor-Emojis-Min und folgende Zeilen einfügen und speichern!
  • Den neu erstellten "HTML-Code" in eine vorhandene "Smiley-Gruppe" schieben oder eine neue Gruppe erstellen!
  • Dazu Reiter "Gruppe" anklicken, Name wie z.B. "Emojis-Min" vergeben!
  • Grafik eintragen z.B.: //img.homepagemodules.de/ds/static/smileys/v2/grin.svg

  • In Zeile 2 kann der Abstand zwischen den Emojis in der Iconbar bestimmt werden!
  • In Zeile 3 wird die Größe der Emojis in der Iconbar angepasst!
  • In Zeile 4 werden die einstellbaren Emojis durch ein Mouseover vergrößert und besonders hervorgehoben!
  • Ist diese Funktion nicht erwünscht, braucht nur Zeile 4 gelöscht zu werden!
  • In Zeile 7-28 kann man über "[img=30px]" die Größendarstellung in Beiträgen bestimmen! Unterschiedliche Werte sind auch möglich!
  • Die Emojis sind auch mit Tooltipps versehen, die geändert oder auch gelöscht werden können!
  • Zum Schluss alle neuen Emojis in der "Vorschau" überprüfen!

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
 
<style>
.xob_icon_c { width:40px !important; height:40px !important;}
.xob_icon_c img { height:30px; max-height:30px !important;}
.xob_icon_c img:hover{ height:40px  !important; max-height:40px !important;}
</style>
 
<div title="Grin einfügen - Größe veränderbar!" class="xob_icon_c" onclick="xob_insert('[img=30px]//img.homepagemodules.de/ds/static/smileys/v2/grin.svg[/img]')"><img alt="Grin" class="xob_icon" src="//img.homepagemodules.de/ds/static/smileys/v2/grin.svg"></div>
<div title="Wink einfügen - Größe veränderbar!" class="xob_icon_c" onclick="xob_insert('[img=30px]//img.homepagemodules.de/ds/static/smileys/v2/wink.svg[/img]')"><img alt="Wink" class="xob_icon" src="//img.homepagemodules.de/ds/static/smileys/v2/wink.svg"></div>
<div title="Smiley einfügen - Größe veränderbar!" class="xob_icon_c" onclick="xob_insert('[img=30px]//img.homepagemodules.de/ds/static/smileys/v2/smile2.svg[/img]')"><img alt="Smiley" class="xob_icon" src="//img.homepagemodules.de/ds/static/smileys/v2/smile2.svg"></div>
<div title="Smile einfügen - Größe veränderbar!" class="xob_icon_c" onclick="xob_insert('[img=30px]//img.homepagemodules.de/ds/static/smileys/v2/smile.svg[/img]')"><img alt="Smile" class="xob_icon" src="//img.homepagemodules.de/ds/static/smileys/v2/smile.svg"></div>
<div title="Frown einfügen - Größe veränderbar!" class="xob_icon_c" onclick="xob_insert('[img=30px]//img.homepagemodules.de/ds/static/smileys/v2/frown.svg[/img]')"><img alt="Frown" class="xob_icon" src="//img.homepagemodules.de/ds/static/smileys/v2/frown.svg"></div>
<div title="Cool einfügen - Größe veränderbar!" class="xob_icon_c" onclick="xob_insert('[img=30px]//img.homepagemodules.de/ds/static/smileys/v2/cool.svg[/img]')"><img alt="Cool" class="xob_icon" src="//img.homepagemodules.de/ds/static/smileys/v2/cool.svg"></div>
<div title="Weinen einfügen - Größe veränderbar!" class="xob_icon_c" onclick="xob_insert('[img=30px]//img.homepagemodules.de/ds/static/smileys/v2/weinen.svg[/img]')"><img alt="Weinen" class="xob_icon" src="//img.homepagemodules.de/ds/static/smileys/v2/weinen.svg"></div>
<div title="Schlafen einfügen - Größe veränderbar!" class="xob_icon_c" onclick="xob_insert('[img=30px]//img.homepagemodules.de/ds/static/smileys/v2/schlafen.svg[/img]')"><img alt="Schlafen" class="xob_icon" src="//img.homepagemodules.de/ds/static/smileys/v2/schlafen.svg"></div>
<div title="Nachdenken einfügen - Größe veränderbar!" class="xob_icon_c" onclick="xob_insert('[img=30px]//img.homepagemodules.de/ds/static/smileys/v2/nachdenken.svg[/img]')"><img alt="Nachdenken" class="xob_icon" src="//img.homepagemodules.de/ds/static/smileys/v2/nachdenken.svg"></div>
<div title="Death einfügen - Größe veränderbar!" class="xob_icon_c" onclick="xob_insert('[img=30px]//img.homepagemodules.de/ds/static/smileys/v2/death.svg[/img]')"><img alt="Death" class="xob_icon" src="//img.homepagemodules.de/ds/static/smileys/v2/death.svg"></div>
<div title="Heart einfügen - Größe veränderbar!" class="xob_icon_c" onclick="xob_insert('[img=30px]//img.homepagemodules.de/ds/static/smileys/v2/heart.svg[/img]')"><img alt="Heart" class="xob_icon" src="//img.homepagemodules.de/ds/static/smileys/v2/heart.svg"></div>
<div title="Glueck einfügen - Größe veränderbar!" class="xob_icon_c" onclick="xob_insert('[img=30px]//img.homepagemodules.de/ds/static/smileys/v2/glueck.svg[/img]')"><img alt="Glueck" class="xob_icon" src="//img.homepagemodules.de/ds/static/smileys/v2/glueck.svg"></div>
<div title="Rose einfügen - Größe veränderbar!" class="xob_icon_c" onclick="xob_insert('[img=30px]//img.homepagemodules.de/ds/static/smileys/v2/rose.svg[/img]')"><img alt="Rose" class="xob_icon" src="//img.homepagemodules.de/ds/static/smileys/v2/rose.svg"></div>
<div title="Idee einfügen - Größe veränderbar!" class="xob_icon_c" onclick="xob_insert('[img=30px]//img.homepagemodules.de/ds/static/smileys/v2/idee.svg[/img]')"><img alt="Idee" class="xob_icon" src="//img.homepagemodules.de/ds/static/smileys/v2/idee.svg"></div>
<div title="Feuer einfügen - Größe veränderbar!" class="xob_icon_c" onclick="xob_insert('[img=30px]//img.homepagemodules.de/ds/static/smileys/v2/feuer.svg[/img]')"><img alt="Feuer" class="xob_icon" src="//img.homepagemodules.de/ds/static/smileys/v2/feuer.svg"></div>
<div title="Sonne einfügen - Größe veränderbar!" class="xob_icon_c" onclick="xob_insert('[img=30px]//img.homepagemodules.de/ds/static/smileys/v2/sonne.svg[/img]')"><img alt="Sonne" class="xob_icon" src="//img.homepagemodules.de/ds/static/smileys/v2/sonne.svg"></div>
<div title="Häkchen einfügen - Größe veränderbar!" class="xob_icon_c" onclick="xob_insert('[img=30px]//img.homepagemodules.de/ds/static/smileys/v2/haeckchen.svg[/img]')"><img alt="Häkchen" class="xob_icon" src="//img.homepagemodules.de/ds/static/smileys/v2/haeckchen.svg"></div>
<div title="X einfügen - Größe veränderbar!" class="xob_icon_c" onclick="xob_insert('[img=30px]//img.homepagemodules.de/ds/static/smileys/v2/x.svg[/img]')"><img alt="X" class="xob_icon" src="//img.homepagemodules.de/ds/static/smileys/v2/x.svg"></div>
<div title="Frage einfügen - Größe veränderbar!" class="xob_icon_c" onclick="xob_insert('[img=30px]//img.homepagemodules.de/ds/static/smileys/v2/frage.svg[/img]')"><img alt="Frage" class="xob_icon" src="//img.homepagemodules.de/ds/static/smileys/v2/frage.svg"></div>
<div title="Ausrufezeichen einfügen - Größe veränderbar!" class="xob_icon_c" onclick="xob_insert('[img=30px]//img.homepagemodules.de/ds/static/smileys/v2/rufezeichen.svg[/img]')"><img alt="Ausrufezeichen" class="xob_icon" src="//img.homepagemodules.de/ds/static/smileys/v2/rufezeichen.svg"></div>
 

Schlie�en

Viel Spaß
Wolfgang

Thema abonnieren Forum �bersicht Letzte Beitr�ge

Antworten

#3 | Emojis besonders hervorheben - Teil 3 datum

02.02.2020 15:37

Wolfgang

Administrator

Informationen anzeigen

Emojis besonders hervorheben - Teil 3

Mittlerweile hat die Iconbar viele Möglichkeiten für die Auswahl von Smileys und Emojis aufzuweisen.
Da bietet es sich an "Emojis mit einstellbarer Größe" besonders darzustellen.
Eine gute und einfache Variante ist eine Vergrößerung mittels "Mouseover"!

Installation

  • Es ist nur eine CSS-Änderung notwendig!
  • In Beitrag #1 + Beitrag #2 brauchen nur die Zeilen 1-5 ausgetauscht werden!
  • In Zeile 4 wird mit "height" und "max-height" die Größe des Emojis beim Mouseover bestimmt!
  • Das Mouseover-Feature ist bereits in Beitrag #1 + Beitrag #2 eingetragen!
  • Ist diese Funktion nicht erwünscht, muss Zeile 4 gelöscht werden!

1
2
3
4
5
 
<style>
.xob_icon_c { width:40px !important; height:40px !important;}
.xob_icon_c img { height:30px !important; max-height:30px !important;}
.xob_icon_c:hover img{ height:40px !important; max-height:40px !important;}
</style>
 

Schlie�en

  • Emojis mit der Endung "svg" ermöglichen recht große Darstellung von z.B. 500px.
  • Mit einem Mouseover könnte man das Emoji, wie bei der Beitragsvorschau, am oberen Rand darstellen. Etwas übertrieben, aber eindrucksvoll!
  • Es ist nur eine CSS-Änderung notwendig!
  • Die Zeilen 1-5 müssen hierzu ausgetauscht werden!
  • In Zeile 4 wird mit "height" und "max-height" die Größe der Emojis beim Mouseover bestimmt!
  • Mit "top" und "left" wird die "Mouseover-Position" festgelegt!

1
2
3
4
5
 
<style>
.xob_icon_c { width:40px !important; height:40px !important;cursor:pointer;}
.xob_icon_c img { height:30px !important; max-height:30px !important;}
.xob_icon_c:hover img{ height:350px !important; max-height:350px !important;position:fixed;top:100px;left:45%;z-index:99999;}
</style>
 