Regeln und nützliche Hinweise
Lexi Help
Die neuesten Themen
» Registrierung defekt
von cybercrash Gestern um 22:49

» [phpBB2] index_box.tpl & Avatare verstecken
von Dr.Keks Gestern um 22:40

» [phpBB2] Avatare für Gäste unsichtbar
von Dr.Keks Gestern um 22:37

» Admin Email Ändern
von Bigtuber Gestern um 17:05

» Sternzeichen Wassermann endet am falschen Datum / Fische beginnt zu früh
von VampirinJayna Gestern um 14:22

» [phpBB3] Smilies können nicht neu erstellt werden
von Coffy Gestern um 6:13

» [Mitteilung] ModernBB - Eine neue Foren-Version für Forumieren-Foren
von chamutv Di 28 März 2017 - 20:43

» [phpBB3] [phpBB3] Forum nicht sicher
von Bigtuber Di 28 März 2017 - 17:43

» Passwort vergessen
von Bigtuber Di 28 März 2017 - 14:58

» [#9357]-[phpBB2] Registrierung funktioniert nicht
von amti Di 28 März 2017 - 14:17

» [Sammelthread] Unangebrachte Werbung
von Marcel´s Schnatterbude Mo 27 März 2017 - 9:46

» Admin Passwort vergessen
von ABC-Man Mo 27 März 2017 - 9:01

» Kalender
von Bigtuber So 26 März 2017 - 18:04

» Gifs einfügen
von Bigtuber So 26 März 2017 - 14:58

» Warrior Cats - NordClans
von Eislicht So 26 März 2017 - 0:28

» Gründeraccount Passwort vergessen
von Eozaen Sa 25 März 2017 - 20:02

www.forumieren.de

[Tuto][alle Versionen] Tooltip Benutzernamen-Tag / @Tag Aussehen anpassen

Vorheriges Thema anzeigen Nächstes Thema anzeigen Nach unten

[Tuto][alle Versionen] Tooltip Benutzernamen-Tag / @Tag Aussehen anpassen

Beitrag von inde am Mi 9 März 2016 - 19:48

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.  Freunde
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---*/
have Fun

LG inde


Zuletzt von inde am Do 12 Jan 2017 - 0:55 bearbeitet; insgesamt 1-mal bearbeitet
avatar
inde
Administrator
Administrator

Männlich Beiträge : 3812
URLAUB : 09.03.-30.03.17
Hinweis : Flash The Scene™
Anmeldedatum : 20.10.11
keine
Firefox phpBB3

Benutzerprofil anzeigen

Nach oben Nach unten

Re: [Tuto][alle Versionen] Tooltip Benutzernamen-Tag / @Tag Aussehen anpassen

Beitrag von inde am Mo 14 März 2016 - 17:30

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 Arrow Anzeige Arrow Templates Arrow Allgemeines Arrow 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}
durch Deine Grafikadresse für den Profilbutton, entferne dazu auch die Klammern. Die Anführungszeichen müssen jedoch erhalten bleiben!

Danach Klick unterhalb auf Absenden.


Veröffentliche das Template durch einen Klick auf das grüne Kreuz plus



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>
Der Friend-Button:
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>
Der Email-Button:
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>
Der Facbook-Button:
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>
Der Twitter-Button:
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
avatar
inde
Administrator
Administrator

Männlich Beiträge : 3812
URLAUB : 09.03.-30.03.17
Hinweis : Flash The Scene™
Anmeldedatum : 20.10.11
keine
Firefox phpBB3

Benutzerprofil anzeigen

Nach oben Nach unten

Vorheriges Thema anzeigen Nächstes Thema anzeigen Nach oben


 
Befugnisse in diesem Forum
Sie können in diesem Forum nicht antworten