Teammitglieder online
Regeln und nützliche Hinweise
Neueste Themen
» Profil in beiträgen nur im blog deaktivieren.von derforumde Heute um 18:19
» Das Plauderforum ist zurück!
von Eto Mo 25 Nov 2024 - 17:59
» Style-Wechsel funktioniert nicht mehr
von Miho Mo 25 Nov 2024 - 11:05
» [Invision] Editor über den Bildrand ziehbar + Schriftgrößenproblem
von Skouliki Mi 20 Nov 2024 - 8:06
» Passwort für meinen Adminbereich vergessen.
von Joost Sa 9 Nov 2024 - 10:13
» [Invision] Signatur wird nicht immer eingefügt
von Skouliki Mo 4 Nov 2024 - 16:33
» [Invision] Schriftgröße Navigationsleiste, Links und Forenbeschreibungen
von Skouliki So 27 Okt 2024 - 13:29
» [Invision] Transparent Logohintergrund/Struktur
von Joost So 27 Okt 2024 - 12:58
» png wird im servimg in ein jpg umgewandelt
von Skouliki Mi 23 Okt 2024 - 20:26
» Passwort Vergessen (SilentHowl)
von Joost Do 17 Okt 2024 - 17:14
» [Invision] Hintergrundbild fixieren
von Skouliki Mo 14 Okt 2024 - 11:30
» Paßwort vergessen
von Joost So 13 Okt 2024 - 17:58
» Anti-Spam-Prüfung
von Hana19 Sa 12 Okt 2024 - 16:59
» Private Nachrichten bleiben im Postausgang hängen
von Skouliki Fr 11 Okt 2024 - 11:11
» [phpBB3] Mittelteil des Forums verschoben
von Eto Mo 7 Okt 2024 - 20:50
» [phpBB3] Farbpalette ändern
von Skouliki Mo 7 Okt 2024 - 10:08
» [Klassische Version] Account löschen
von Joost Sa 5 Okt 2024 - 21:05
» Chatbox einloggen nicht möglich
von Joost So 29 Sep 2024 - 8:01
Beiträge mit den meisten Reaktionen des Monats
» Beitrag von Agorass in Passwort für meinen Adminbereich vergessen. ( 2 )
» Beitrag von Keks in [phpBB2] Unterforen Nebeneinander
( 1 )
[Tuto][alle Versionen] Tooltip Benutzernamen-Tag / @Tag Aussehen anpassen
Das Forum der Foren :: Hilfe und Unterstützung :: Probleme mit Scripten oder Codes :: [Sammlung] Scripts/Codes und Template-Änderungen
Seite 1 von 1 • Teilen
[Tuto][alle Versionen] Tooltip Benutzernamen-Tag / @Tag Aussehen anpassen
Da die Anzeige für den Tooltip Benutzernamen-Tag in einigen Styles nicht so wirklich hineinpasst....
...habe ich einmal eine kleine Anleitung für nicht so geübte User erstellt. Besser schaut es dann schon wie im folgenden aus.
Eigentlich ist mit der Grafik wie auch mit den Kommentaren im CSS-Code schon alles beschrieben, wobei natürlich in den Deklarationen für die Hintergründe (unter Punkt 1. und 2.) entweder die Grafik (background-image) oder aber die Hintergrundfarbe (background-color) entfallen kann um den Code abzukürzen.
Geübte User wissen natürlich dies noch weiter auszubauen.
LG inde
...habe ich einmal eine kleine Anleitung für nicht so geübte User erstellt. Besser schaut es dann schon wie im folgenden aus.
Eigentlich ist mit der Grafik wie auch mit den Kommentaren im CSS-Code schon alles beschrieben, wobei natürlich in den Deklarationen für die Hintergründe (unter Punkt 1. und 2.) entweder die Grafik (background-image) oder aber die Hintergrundfarbe (background-color) entfallen kann um den Code abzukürzen.
Geübte User wissen natürlich dies noch weiter auszubauen.
- Zur Anleitung - Klick:
Der Code für Dein persönliches CSS zum Mitnehmen.- Code:
/*---Start---Tooltip Benutzernamentags---*/
/* -1- Hintergrund oberer Teil*/
.tooltipster-content {
background-color: #000000;
background-image: url("BILD-URL");
border: 1px solid #0000ff;
}
/* -2- Hintergrund unter Teil bzw. Bereich der Icons*/
.tooltip-actions {
background-color: #000000 !important; /*Wichtig bzw. !important muss gesetzt werden*/
background-image: url("BILD-URL") !important; /*Wichtig bzw. !important muss gesetzt werden*/
border: 1px solid #0000ff;
}
/* -3- oberer Pfeil*/
div.tooltipster-arrow-top.tooltipster-arrow span {
-webkit-transform:rotate(360deg) !important;
border-style: solid !important;
border-width: 12px 12px 0 12px !important;
border-color: #0000ff transparent transparent transparent !important;/*Die Farbe des Pfeils einstellen*/
}
/* -4- unterer Pfeil*/
div.tooltipster-arrow-bottom.tooltipster-arrow span {
-webkit-transform:rotate(360deg) !important;
border-style: solid !important;
border-width: 0 12px 12px 12px !important;
border-color: transparent transparent #0000ff transparent !important;/*Die Farbe des Pfeils einstellen*/
}
/* -5- Schriftfarbe für Rang, Beiträge, Freunde etc.*/
.tooltip-content {
color: #ffffff;
}
/*---Ende---Tooltip Benutzernamentags---*/
LG inde
Zuletzt von inde am Do 12 Jan 2017 - 0:55 bearbeitet; insgesamt 1-mal bearbeitet
inde- Admin a.D.
- Beiträge : 5658
Anmeldedatum : 20.10.11
Re: [Tuto][alle Versionen] Tooltip Benutzernamen-Tag / @Tag Aussehen anpassen
Heute möchte ich noch hinzufügen wie Du die Icons auf Deinen Style abstimmst.
Melde Dich dazu mit Deinem Gründer-Account an um die Templates zu bearbeiten.
Suche im Admin-Bereich Anzeige Templates Allgemeines das Template "mentions_tooltip" und öffne dieses.
Suche innerhalb des Templates nach "switch_button_tooltip_PROFILE.URL", welches Du in einem unbearbeiteten Template in Zeile 71 findest.
Ersetze unmittelbar darunter den Code
Danach Klick unterhalb auf Absenden.
Veröffentliche das Template durch einen Klick auf das grüne Kreuz
Das Ergebnis:
Wiederhole die einzelnen Arbeitsschritte für die noch ausstehenden Icons und setze jeweils hinter dem entsprechenden Abschnitt Deine Grafikadresse wie im ersten Beispiel ein. <img src="Bild-URL"
Der PN-Button:
Soweit zunächst die bisherigen Möglichkeiten, ich gehe einmal davon aus das diese Funktion noch weiter ausgebaut wird.
LG inde
Melde Dich dazu mit Deinem Gründer-Account an um die Templates zu bearbeiten.
Suche im Admin-Bereich Anzeige Templates Allgemeines das Template "mentions_tooltip" und öffne dieses.
Suche innerhalb des Templates nach "switch_button_tooltip_PROFILE.URL", welches Du in einem unbearbeiteten Template in Zeile 71 findest.
Ersetze unmittelbar darunter den Code
- Code:
{switch_button_tooltip_PROFILE.IMAGE}
Danach Klick unterhalb auf Absenden.
Veröffentliche das Template durch einen Klick auf das grüne Kreuz
Das Ergebnis:
Wiederhole die einzelnen Arbeitsschritte für die noch ausstehenden Icons und setze jeweils hinter dem entsprechenden Abschnitt Deine Grafikadresse wie im ersten Beispiel ein. <img src="Bild-URL"
Der PN-Button:
- Code:
<a href="{switch_button_tooltip_PM.URL}" title="{switch_button_tooltip_PM.LANG}">
<img src="{switch_button_tooltip_PM.IMAGE}" alt="{switch_button_tooltip_PM.LANG}" />
</a>
- Code:
<a href="{switch_button_tooltip_FRIEND.URL}" title="{switch_button_tooltip_FRIEND.LANG}">
<img src="{switch_button_tooltip_FRIEND.IMAGE}" alt="{switch_button_tooltip_FRIEND.LANG}" />
</a>
- Code:
<a href="{switch_button_tooltip_MESSAGES.URL}" rel="nofollow" title={switch_button_tooltip_MESSAGES.LANG}">
<img src="{switch_button_tooltip_MESSAGES.IMAGE}" alt="{switch_button_tooltip_MESSAGES.LANG}" />
</a>
- Code:
<a href="{switch_button_tooltip_FACEBOOK.URL}" target="_blank" title{switch_button_tooltip_FACEBOOK.LANG}">
<img src="{switch_button_tooltip_FACEBOOK.IMAGE}" alt="{switch_button_tooltip_FACEBOOK.LANG}" />
</a>
- Code:
<a href="{switch_button_tooltip_TWITTER.URL}" target="_blank" title="{switch_button_tooltip_TWITTER.LANG}">
<img src="{switch_button_tooltip_TWITTER.IMAGE}" alt="{switch_button_tooltip_TWITTER.LANG}" />
</a>
Soweit zunächst die bisherigen Möglichkeiten, ich gehe einmal davon aus das diese Funktion noch weiter ausgebaut wird.
LG inde
inde- Admin a.D.
- Beiträge : 5658
Anmeldedatum : 20.10.11
Ähnliche Themen
» [Tuto] [Alle Versionen] Verschiedene Styles per Wahlschalter im Forum
» [Tuto] [alle Versionen] Rahmen - Hintergrund um Avatare in Beiträgen
» [Tuto] [alle Versionen] Funktion "diesen Code markieren"
» [Tuto] [mobile Version] [Alle Versionen] Betriebssystem OS? - Screenshot?
» [Tuto][alle Versionen] ServIMG komfortables hochladen von Bildern in einem Popup
» [Tuto] [alle Versionen] Rahmen - Hintergrund um Avatare in Beiträgen
» [Tuto] [alle Versionen] Funktion "diesen Code markieren"
» [Tuto] [mobile Version] [Alle Versionen] Betriebssystem OS? - Screenshot?
» [Tuto][alle Versionen] ServIMG komfortables hochladen von Bildern in einem Popup
Das Forum der Foren :: Hilfe und Unterstützung :: Probleme mit Scripten oder Codes :: [Sammlung] Scripts/Codes und Template-Änderungen
Seite 1 von 1
Befugnisse in diesem Forum
Sie können in diesem Forum nicht antworten