Lexi Help
Die neuesten Themen
» [Update] Neues Theme der mobilen Version V2
von Tierfreund-97 Gestern um 23:14

» Mobile Ansicht leider Fehlerhaft
von Br0adsw0rd Gestern um 19:31

» [phpBB2] Hintergrund festpinnen
von Fayé Gestern um 16:56

» Mein altes Forum zurückbekommen
von Bigtuber Do 29 Sep 2016 - 22:59

» Impressum
von #Frank Mi 28 Sep 2016 - 23:45

» [phpBB2] Im Beitrag Bild und Text nebeneinander anzeigen
von #Frank Mi 28 Sep 2016 - 23:43

» [phpBB2] Unicode Emojis im Forum
von Mariacher J.E. Mi 28 Sep 2016 - 22:07

» Themen-Icons
von Bigtuber Mi 28 Sep 2016 - 20:46

» [phpBB2] Schriftfarbe in der Expressantwort
von Bigtuber Mi 28 Sep 2016 - 20:09

» Themen fixieren
von inde Mi 28 Sep 2016 - 20:05

» Begriff : "merken"
von Ray Di 27 Sep 2016 - 12:14

» [PunBB] Umzug eines funktionierenden Forums von PunBB auf phpBB?
von inde Di 27 Sep 2016 - 11:07

» Servamp Forum
von Raine Kamiya Mo 26 Sep 2016 - 22:47

» [phpBB2] Probleme mit der "Postprofil" Anzeige
von Dr.Keks Mo 26 Sep 2016 - 20:56

» Private Nachrichten
von inde Mo 26 Sep 2016 - 10:05

» Wie kann man erkennen, welche Forenversion ein anderes Forum hat?
von inde So 25 Sep 2016 - 22:24

Partner
free forum

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

Vorheriges Thema anzeigen Nächstes Thema anzeigen Nach unten

Wichtig [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

inde
Moderator
Moderator

Männlich Beiträge : 2225
Hinweis : Flash The Scene™
keine
Anmeldedatum : 20.10.11
Firefox

Nutzerprofil anzeigen

Nach oben Nach unten

Wichtig 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

inde
Moderator
Moderator

Männlich Beiträge : 2225
Hinweis : Flash The Scene™
keine
Anmeldedatum : 20.10.11
Firefox

Nutzerprofil anzeigen

Nach oben Nach unten

Vorheriges Thema anzeigen Nächstes Thema anzeigen Nach oben


 
Forenbefugnisse:
Sie können in diesem Forum nicht antworten