Teammitglieder online
Regeln und nützliche Hinweise
Neueste Themen
» kann man noch Blogs hier erstellen?von Joost Gestern um 18:40
» Einstellen der Profilfelder funktioniert nicht
von Skouliki Di 26 März 2024 - 12:54
» Gründer-E-Mail-Adresse ändern
von Skouliki Mo 25 März 2024 - 13:48
» PN's werden nicht mehr rot eingefärbt
von Skouliki Fr 22 März 2024 - 7:44
» Forum löschen, Probleme mit Gründeraccount
von Skouliki Do 21 März 2024 - 9:04
» Missbrauchsmeldung "Sexueller Inhalt" war (wieder) Werbung/Spam/Scam
von Skouliki Do 21 März 2024 - 9:03
» [phpBB3] Suchfunktion ohne Funktion
von Skouliki Mi 20 März 2024 - 8:41
» Neuer User kann sich anmelden.
von Skouliki Mi 20 März 2024 - 8:38
» Zugangsdaten vergessen/verloren
von Joost Sa 16 März 2024 - 21:07
» Schwierigkeiten mit BBCode
von Skouliki Fr 15 März 2024 - 11:51
» Entdeckt die neue Option Servimg Premium
von Joost Mi 6 März 2024 - 19:50
» Neues YAMAHA XT660-Forum
von gnadenlos Fr 1 März 2024 - 7:33
» Forum nur noch für Eingeloggte sichtbar?
von Skouliki Di 27 Feb 2024 - 7:53
» [phpBB3] Eine Frage zum Forum selbst.
von Skouliki Di 27 Feb 2024 - 7:52
» Beiträge verschwinden
von Skouliki Do 22 Feb 2024 - 7:47
» [Tutorial - alle Versionen] (De)aktiviert die Anzeige von Signaturen aus Eurem Profil
von Eto Do 15 Feb 2024 - 22:17
» Datenback-Dump?
von Skouliki Mo 12 Feb 2024 - 22:02
» Einloggen nicht mehr möglich [erbitte schnelle Rückmeldung!]
von Skouliki Mo 12 Feb 2024 - 8:15
Beiträge mit den meisten Reaktionen des Monats
» Beitrag von Joost in Entdeckt die neue Option Servimg Premium ( 2 )
» Beitrag von Joost in Missbrauchsmeldung "Sexueller Inhalt" war (wieder) Werbung/Spam/Scam
( 2 )
» Beitrag von T.G. in Zugangsdaten vergessen/verloren
( 1 )
» Beitrag von Skouliki in PN's werden nicht mehr rot eingefärbt
( 1 )
» Beitrag von Skouliki in PN's werden nicht mehr rot eingefärbt
( 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