XF2.1 Sidebar Trigger icon verändern

N

Nathea

Aktives Mitglied
Lizenzverwender
Registriert
5. Juli 2019
Beiträge
57
Punkte
33
Ich hatte es angedroht :cool: dass ich mit meinen Fragen starten werde. Hier ist die erste ;)

Unter XF 1.5 war/ist bei uns die Sidebar ein- und wieder ausklappbar. Diese Möglichkeit bietet XF 2 ja auch, ich habe die Einstellungen dazu auch gefunden und aktiviert. So weit, so gut.

Nun hatten/haben wir aktuell ein icon zum Ein- und Ausklappen, das sich verändert, je nachdem, ob die sidebar ein- oder ausgekllappt ist:

eingeklappt - Bildschirmfoto 2019-08-18 um 18.04.02.png

ausgeklappt - Bildschirmfoto 2019-08-18 um 18.05.27.png

Da uns die "drei Punkte", die im UIX-Template standardmäßig eingebaut sind, nicht gefallen haben, wollte ich das icon wieder auf "Pfeile" umstellen. Ich habe dazu die beiden Font Awesome icons "fa-angle-double-right" und "fa-angle-double-left" ausgewählt.

Um die icons einzubauen, habe ich die Stelle im PageContainer gesucht (und gefunden), an dem bisher die dots eingebunden waren und habe die icons mit folgendem Code versucht zu ersetzen:

Code: 
<xf:comment> anderes Sidebar-icon eingebaut - hier die alte Version
            <a class="uix_sidebarTrigger__component uix_sidebarTrigger {{ (property('uix_sidebarTriggerPosition') == 'sectionLinks') ? 'p-navgroup-link' : 'button'}}" data-xf-init="tooltip" title="{{ phrase('th_sidebar_uix')}}">
                <xf:fa icon="fa-ellipsis-v" class="mdi mdi-dots-vertical" />
                <span class="uix_sidebarTrigger--phrase">{{ phrase('th_sidebar_uix') }}</span>
            </a></xf:comment>

            <a class="uix_sidebarTrigger__component uix_sidebarTrigger {{ (property('uix_sidebarTriggerPosition') == 'sectionLinks') ? 'p-navgroup-link' : 'button'}}" data-xf-init="tooltip" title="{{ phrase('th_sidebar_uix')}}">
                <xf:fa icon="fa-angle-double-right" class="fas fa-angle-double-right" />
                <span class="uix_sidebarTrigger--phrase">{{ phrase('th_sidebar_uix') }}</span>
            </a>
        </xf:if>           
        <xf:if is="property('uix_sidebarMobileCanvas')">
           
<xf:comment> anderes Sidebar-icon eingebaut - hier die alte Version
            <a class="uix_sidebarCanvasTrigger uix_sidebarTrigger__component p-navgroup-link" data-xf-init="tooltip" title="{{ phrase('th_sidebar_uix')}}">
                <xf:fa icon="fa-ellipsis-v" class="mdi mdi-dots-vertical" />
                <span class="uix_sidebarTrigger--phrase">{{ phrase('th_sidebar_uix') }}</span>
            </a></xf:comment>

            <a class="uix_sidebarCanvasTrigger uix_sidebarTrigger__component p-navgroup-link" data-xf-init="tooltip" title="{{ phrase('th_sidebar_uix')}}">
                <xf:fa icon="fa-angle-double-left" class="fas fa-angle-double-left" />
                <span class="uix_sidebarTrigger--phrase">{{ phrase('th_sidebar_uix') }}</span>
            </a>           
        </xf:if>
    </xf:if>
</xf:set>

Ihr seht: Ich habe eine "fallback-Ebene" eingebaut ;) um mir das System nicht zu zermatschen. Der Effekt des Codes: Ich erhalte tatsächlich das "aufklappen"-icon, nicht jedoch das "wieder einklappen"-icon.

Wo liegt mein Denkfehler?

Viele Grüße,
Sylvia
 
Nathea schrieb:
Ihr seht: Ich habe eine "fallback-Ebene" eingebaut
Zum Vergrößern anklicken....
Du sprichst von dem Kommentar?

Erstens benutzt ThemeHouse nicht FontAwesome Sondern Material Design Icons von Google, soweit ich weiß sogar extern eingebunden...

Das Icon, das du zu verändern versuchst, gibt es in dem Style nicht als Auf- und Ein-geklappt. Das müsstest du erst selbst einbauen.
Das solltest du vor allem nicht im HTML Code sondern in CSS machen.

Musst du mal testen, hab das gerade zwischen Tür und Angel erstellt; einfach in die extra.less:
CSS: 
.mdi-dots-vertical::before {
    content: "\F1D9";
}

.uix_sidebarCollapsed .mdi-dots-vertical::before {
    content: "\F1D9";
}
Dort musst du aber den Code für "Material Design Icons" eintragen.
 
@Nathea diesen Code in die extra.LESS und es funktioniert. Kannst du dir hier anschauen: XenTutorials
CSS: 
/**** Start Change Icon Sidebar Trigger ****/
.uix_sidebarTrigger .mdi-dots-vertical {
    &:before {
        content: @fa-var-angle-double-left;
    }
}
.uix_sidebarCollapsed .uix_sidebarTrigger .mdi-dots-vertical {
    &:before {
        content: @fa-var-angle-double-right;
    }
}
/**** End Change Icon Sidebar Trigger ****/
 
Tealk schrieb:
Erstens benutzt ThemeHouse nicht FontAwesome Sondern Material Design Icons von Google, soweit ich weiß sogar extern eingebunden...
Zum Vergrößern anklicken....
Nur zum Teil korrekt. Im Standard nutzt ThemeHouse in ihren Themes die Material Icons, in den Style-Eigenschaften kann man aber auf FontAwesome umstellen und dann werden die lokalen Templates von XenForo genutzt.
Screenshot 2019-08-19 17.17.57.png
Tealk schrieb:
Dort musst du aber den Code für "Material Design Icons" eintragen.
Zum Vergrößern anklicken....
Hier würde ich auch immer die Default Variablen von XenForo nutzen (siehe Code oben), da die meisten Themes diese umschreiben wie zB ThemeHouse in ihrer uix_icons.less.
 
Die Option gibts aber nicht schon immer, hat mein Gejammer doch geholfen :p
 
Ich habe bisher immer FonAwesome mit UI.X Theme genutzt. :smoke:
 
Ja, damals noch FA 4.7.0 ;)
 
interessant, ich hab sogar noch das Ticket von denen wo sie meinten nö das wollen wir nicht xD
 
Dann habe ich diese Einstellmöglichkeit in XF2 wohl fehlinterpretiert?

Bildschirmfoto 2019-08-19 um 17.11.19.png

Den Tipp mit der extra.less probiere ich gleich aus, danke dafür!

Edit:
Gerade probiert, rasch noch die Pfeile-Richtung getauscht, funktioniert sensationell :oops:
 
Zuletzt bearbeitet:
Mal kurz Offtopic:
Habe ich irgendwas verpasst oder warum wirken Deine Beiträge etwas "verwirrt".
Nethea schreibt - und @McAtze innerhalb 15 Minuten 4x hintereinander .... Auf der einen Seite sieht es aus als würdest Du Dich jedesmal verbessern und selber erweitern, auf der anderen Seite sieht es aus als würden Beiträge fehlen auf die Du antwortest.
Hab das öfter mal bei Dir ....

upload_2019-8-19_22-15-49.png

LG:Tammy
 
Nur gut, das ich es ihr nicht sagen muss/kann. :drinks:
Wollen wir wetten, ob sie es noch selbst raus bekommt, warum es so "verwirrend" ist? :D ;) :popcorn:
 
Ich muss Euch noch mal nerven :)

Die passenden icons habe ich mit eurer Hilfe einbinden können, nun "arbeite" ich noch am Hintergrund dieser Buttons.

Mit folgender Syntax kann ich zwar den Hintergrund des icons selbst definieren (im Beispiel: weiss), nicht jedoch den der ganzen Hintergrundfläche, hier im Screenshot grau hinterlegt.

PHP: 
/**** Start Change Icon Sidebar Trigger ****/
.uix_sidebarTrigger .mdi-dots-vertical {
    &:before {
        content: @fa-var-angle-double-right;
        background: #fff;       
    }
}
.uix_sidebarCollapsed .uix_sidebarTrigger .mdi-dots-vertical {
    &:before {
        content: @fa-var-angle-double-left;
        background: #fff;
    }
}
/**** End Change Icon Sidebar Trigger ****/

Bildschirmfoto 2019-08-23 um 15.14.38.png

Wie bekomme ich es hin, dass der Hintergrund schlicht weiss bleibt, ohne Schatten und ohne Rahmen?
 
Hast Du mal einen Link für mich zu der Seite?
Dann schau ich mir das heute Nacht mal an.... bin nur gerade auf der Arbeit und kann das nicht sofort machen.

Sehr wahrscheinlich ist das wo anders schon positioniert.
Versuche mal ob mit "border:none;" der Rahmen weg ist, dann brauchst Du nur noch den "Schatten" überschreiben - und gut ist.
Versuch auch mal "background-color" statt "background".

LG: Tammy
 
Zuletzt bearbeitet:
@Nathea kann man mal den Link zu deiner Webseite haben? Dann wäre das ganz schnell gemacht in dem man den inspector aus dem Developer Tool nutzt.
 
Geht leider nicht, da wir die nicht online haben, sondern lokal die Tests durchführen :(

Kann ich Dir Code ausleiten, mit dem Du was anfangen kannst?
 
Tamara-Jasmin schrieb:
...
Versuche mal ob mit "border:none;" der Rahmen weg ist, dann brauchst Du nur noch den "Schatten" überschreiben - und gut ist.
Versuch auch mal "background-color" statt "background".
Zum Vergrößern anklicken....
Die Änderungen verändern lediglich den kleinen Bestandteil des Feldes, das das icon selbst ausmacht. Ich möchte aber gern den grauen Hintergrund weghaben, der garantiert seine Einstellungen von einer anderen Stelle erhält. Die finde ich aber nicht :(
 
Ich kann leider keine Unterhaltung mit Dir starten - der menüpunkt ist nicht vorhanden.
Versuch mal ob Du mich erreichen kannst....

LG: Tammy
 
@Nathea du musst für den Background eine Ebene höher gehen auf a. oder ähnlich
 
Du musst dich einloggen oder registrieren, um hier zu antworten.
Zurück
Oben