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

Um alle Funktionen nutzen zu k�nnen, aktivieren Sie bitte JavaScript in ihrem Browser!

Der Treffpunkt f�r Hilfe, Tricks & Tipps � 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!

Themen-Einstellungen

Thema drucken

Bereich wechseln

Start Willkommen! Ank�ndigungen & Termine, wichtige News. Stellen Sie Ihr eigene Webseite vor. Betriebssystem MS Windows & andere Betriebssysteme Betriebssystem MS Windows 11, 10, 8 und 7 - Tricks & Tipps. MS Windows 11, 10, 8 und 7 - Fragen & Antworten. Linux, Ubuntu und andere Betriebssysteme. �rger mit dem PC, Laptop oder Tablet? �rger mit dem PC, Laptop oder Tablet - Vorbeugung und Hilfe? �rger mit dem PC, Laptop oder Tablet - 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 Elektronik & Elektrotechnik - Fragen & Antworten 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: 11.05.2025 08:53)

Wolfgang

Administrator

Informationen anzeigen

Beitr�ge:	3663
Registriert seit:	10.12.2006
Blog:	Wolfgangs Blog

Homepage:	Nicht angegeben
Letzte Spende	Betrag � Forum Spende
Sternzeichen	Skorpion
Likes	1528

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=auto=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=auto=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=auto=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=auto=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=auto=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=auto=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=auto=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=auto=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=auto=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=auto=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=auto=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=auto=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=auto=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=auto=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=auto=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=auto=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=auto=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=auto=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=auto=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=auto=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=auto=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=auto=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={{hoehe}}={{breite}}]
...
[/img]
 

Mit:

1
2
3
 
<img style="height:{{hoehe}}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 Iconbar in der Bildergalerie
  • Kopiersperre / Markierungssperre / Eigenes Kontextmenü
  • Iconbar fixieren - gut für lange Beiträge
  • Signatur manuell ausblenden

Viel Spaß
Wolfgang

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

Beitr�ge:	3663
Registriert seit:	10.12.2006
Blog:	Wolfgangs Blog

Homepage:	Nicht angegeben
Letzte Spende	Betrag � Forum Spende
Sternzeichen	Skorpion
Likes	1528

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=auto=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

Viel Spaß
Wolfgang

Antworten

#3 | Emojis besonders hervorheben - Teil 3 datum

02.02.2020 15:37

Wolfgang

Administrator

Informationen anzeigen

Beitr�ge:	3663
Registriert seit:	10.12.2006
Blog:	Wolfgangs Blog

Homepage:	Nicht angegeben
Letzte Spende	Betrag � Forum Spende
Sternzeichen	Skorpion
Likes	1528

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>
 

Schließen

Bis dann
Wolfgang

Antworten

Bilder vergrößern per "Mouseover", mittels "CSS" oder "Tooltipps" � � Neu! Weitere Diashow in der Bildergalerie!

�hnliche Themen

Antworten

Letzter Beitrag

Iconbar mobil fürs Xobor (v6) anpassen
Erstellt im Forum Das neue Template Xobor (v6). von Wolfgang 0 12.10.2021 19:34
Wolfgang • Zugriffe: 579
Xobor-Superklick in der Iconbar: Version 1-5
Erstellt im Forum Das neue Template Xobor (v6). von Wolfgang 7 25.09.2021 15:59
Wolfgang • Zugriffe: 3314
Super Kategorienauswahl für das Smiley-Menü - Version 1-3
Erstellt im Forum Das neue Template Xobor (v6). von Wolfgang 9 06.10.2023 19:50
bienchen • Zugriffe: 3870
Multi-Dialog-Assistent für die Iconbar
Erstellt im Forum Alles f�r Ihr eigenes Forum oder Ihrer Webseite - Hilfe, Tricks & Tipps! von Wolfgang 20 16.11.2024 08:53
Anne • Zugriffe: 10594
Iconbar & Navileiste fixieren - Teil 1(2)
Erstellt im Forum Alles f�r Ihr eigenes Forum oder Ihrer Webseite - Hilfe, Tricks & Tipps! von Wolfgang 15 25.04.2025 11:30
Wolfgang • Zugriffe: 2986

Smileys für Themen-Markierungen einfügen und bearbeiten! - Teil 1+2
Erstellt im Forum Alles f�r Ihr eigenes Forum oder Ihrer Webseite - Hilfe, Tricks & Tipps! von Wolfgang

21.04.2025 18:20
von

Kipper-Spedition • Zugriffe: 2635

Besonderheiten zur Xobor-Iconbar
Erstellt im Forum Alles f�r Ihr eigenes Forum oder Ihrer Webseite - Hilfe, Tricks & Tipps! von Wolfgang 0 13.07.2015 15:58
Wolfgang • Zugriffe: 2101
Schriftarten über die Iconbar verändern!
Erstellt im Forum Alles f�r Ihr eigenes Forum oder Ihrer Webseite - Hilfe, Tricks & Tipps! von Wolfgang 8 06.01.2022 18:27
Wolfgang • Zugriffe: 3430
Trennlinie für die Iconbar
Erstellt im Forum Alles f�r Ihr eigenes Forum oder Ihrer Webseite - Hilfe, Tricks & Tipps! von Wolfgang 1 14.02.2016 01:56
Wolfgang • Zugriffe: 3381

Foren Spende

Hallo !

Wir hoffen, dass Dir unser Forum gef�llt und Du Dich hier genauso wohlf�hlst wie wir.

Um Dir und den anderen Mitgliedern das Bestm�gliche bieten zu k�nnen, w�rden wir das Forum gern werbefrei gestalten, mit tollen neuen Extras erg�nzen.

Wenn Du uns dabei unterst�tzen m�chtest, kannst Du mit Hilfe einer kleinen Spende dazu beitragen.

Deine Spende hilft!

Spendenziel: 45 €

17%

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

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

Emojis besonders hervorheben - Teil 3

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