Lexi Help
Partner
www.forumieren.com

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

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

Benutzerprofil 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
Administrator
Administrator

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

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