XF2.0 Grundeinstellungen des Styles

Tamara-Jasmin

Tamara-Jasmin

Bekanntes Mitglied
Registriert
30. Mai 2018
Beiträge
593
Punkte
88
XF Version
  1. 2.2.10 PL1
XF Instanz
Hosting
PHP-Version
8.9
MySQL/MariaDB
8.033
Provider/Hoster
Artfiles.de
Schönen Abend erst mal euch allen!

Einfach genial das XF2 auf dem aktuellsten Stand ist was die Einrichtung mit CSS/LESS betrifft!
Habe mich sofort zurecht gefunden in den Styleeinstellungen. Tolle Sache!
Jede neue Software bringt allerdings Umstellungen mit sich - und bevor ich eine Frage im Forum stelle, lese ich .. und lese .. .und google ...
Auch hier gibt es etliche Beiträge über die extra.css - und manche mögen die kommende Frage vielleicht sogar peinlich finden. Aber ich weiss nicht wo ich diese finden soll ;) In einem XF1 Thema wurde ein Hinweis auf die Templates gegeben. Aber auch hier habe ich keinen Hinweis ermitteln können.
Habe heute mit dem Developer Tool einiges ausprobiert und müsste einige änderungen nun abspeichern. Nur blöd wenn man nicht weiss wo ;)
Kann ich auch davon ausgehen das ich ein Hintergrundbild im <body>-Bereich dort manuell einfügen muss?
In den Einstellmöglichkeiten habe ich nur für die Container die Möglichkeit gefunden Hintergrundbilder zu verwenden, wovon ich aber nur eine nutzen möchte (blockleiste).
(Nachtrag: War schon richtig bei PageSetup und PageBackground. Habe nur einen Ordern im Pfad vergessen!) Ist aber auch von der Beschreibung nicht eindeutig - war eher ein raten.
Dem p-body-inner noch einen rgba-Wert zugewiesen - 90-95% seitenbreite - und schon ist der grossteil der Optik erledigt ;)

Nachtrag II:
p-body ist nicht <body>, das ist klar - und dachte das reicht mir.
Allerdings habe ich nun den Hintergrund auch in der transparenten Navigationsleite (dir ich noch beide mit top:37px in den header-Bereich verschieben muss. Dadurch müssten zu viele Elemente angepasst werden, was nicht sein müsste, wenn ich das Hintergrundbild direkt im body-tag einfügen könnte.
Also bleibt die Frage bestehen ob die in den Styles geändert werden kann - oder manuell in der extra.css eingetragen werden muss.


In vB4 gab es eine Möglichkeit die Templates im Quellcode anzeigen zu lassen. Ist das hier auch möglich um die zu ändernden Templates leicht und einfach zu finden?

Gibt es hier auch einen Debug-Modus den man aktivieren kann?

Danke und liebe Grüsse:
Tammy
 
Zuletzt bearbeitet:
Tamara-Jasmin schrieb:
In vB4 gab es eine Möglichkeit die Templates im Quellcode anzeigen zu lassen. Ist das hier auch möglich um die zu ändernden Templates leicht und einfach zu finden?
Zum Vergrößern anklicken....
Standardmäßig leider nicht, ich habe allerdings ein Add-on gebaut mit dem das geht - funktioniert aber leider (noch) nicht sauber.

Gibt es hier auch einen Debug-Modus den man aktivieren kann?
Zum Vergrößern anklicken....
Ja.

PHP: 
$config['debug'] = true;
 
Kirby schrieb:
ich habe allerdings ein Add-on gebaut mit dem das geht - funktioniert aber leider (noch) nicht sauber.
Zum Vergrößern anklicken....

Gibt es schon einen Link?

Die extra.css Frage wäre mir jetzt allerdings am wichtigsten ... Du weist das doch sicher ;)

LG: Tammy
 
Tamara-Jasmin schrieb:
Auch hier gibt es etliche Beiträge über die extra.css - und manche mögen die kommende Frage vielleicht sogar peinlich finden. Aber ich weiss nicht wo ich diese finden soll
Zum Vergrößern anklicken....
Alle Templates (XHTML) und CSS-Dateien lassen sich im ACP im Template-Editor oder mit dem TMS bearbeiten. Die EXTRA.css ist von Hause aus vorhanden und wird überall eingebunden. Somit lassen sich in dieser Pro Style viele Dinge verändern / einbinden, die nicht global mit dem TMS umgesetzt werden sollen oder können.

XenForo behandelt CSS-Dateien wie Templates, was den Umgang mit ihnen sehr einfach macht.

Hier noch ein paar Infos zum Debug Mods
https://www.xendach.de/resources/der-debug-modus-des-xenforo.31/
 
Sorry, ich hab kein Wort verstanden und weiss immer noch nicht wo sich die Datei befindet.
Bei vB4 hab ich unter Templates die Datei additional.css aufgerufen und direkt bearbeitet. Und die Stelle suche ich ;)
Im moment arbeite ich nur mit den kleinen "Zusatzfeldern" -> "Freiform CSS/LESS-Code"

Sag mir bitte nicht dass all die "zerstückelten" Felder zu einer "imaginären" extras.css generiert werden ...

LG: Tammy
 
Es gibt unter XF2 kein Template EXTRA.css, das gab es nur bei XF1.
Wohl aber gibt es dasTemplate extra.less, dieses ist per Default leer und dort zu finden wo Du auch alle anderen Templates findet - ACP / Appearance / Templates

Wenn Du intensiver designen willst:
PHP: 
$config['designer']['enabled'] = true;

Anschließend kannst Du auf der Shell per
Code: 
php cmd.php xf-designer:enable <styleid> <name>

den Designer Mode für ein bestimmtes Style aktivieren, also z.B.
Code: 
php cmd.php xf-designer:enable 2 tamara-jasmin

Damit wird der Designer-Mode für das Style mit der ID 2 aktiviert, fortan könenn Templates dann unter src/styles/tamara-jasmin/templates/public direkt (mit deinem bevorzugten Editor) bearbeitet werden.

Das ganze funktioniert natürlich nur wenn die Installation lokal läuft (von abgefahrenen Konstruktionen wie per VPN getunneltem SMB o.ä. mal abgesehen ;))

XF2 Designer Modus
 
Zuletzt bearbeitet:
Tamara-Jasmin schrieb:
In vB4 gab es eine Möglichkeit die Templates im Quellcode anzeigen zu lassen. Ist das hier auch möglich um die zu ändernden Templates leicht und einfach zu finden?
Zum Vergrößern anklicken....

im xenbase framework von pixel exit ist ein ganz gelungener design modus drin, der die im frontend bei mouseover einiges an infos ausgibt.
 
Gibt es auch eine Liste der Less-Variablen?
Ich sehe Variablen, die mir in der Konfiguration noch nicht vorgekommen sind.
Z.B. bei dem aktiven Button stand irgendwas mit @xf_borderradius_small oder so ähnlich (habs schon gelöscht). Hätte das natürlich gerne auch mit der nächsten Variablen um einen Wert erhöhnt.
So muss ich die Variable löschen - und 6 Pixel eintragen. Zwar weiss ich wo man den Radius ändert - allerdings ist dort nirgends ein Hinweis zu sehen in welche Less-Variable diese geschrieben werden.

Wegen meiner fehlenden Englischkenntnisse stehe ich hier oft an. Jetzt fällt mir ein das ich das wohl mit medium oder large hätte ändern können. Sicher bin ich mir nicht. Aber ich überlege dann oft Stundenlang ... was kommt nach small ...

So eine Liste zum Ausdrucken wäre für den Beginn gar nicht mal schlecht.
Sonst erstell ich beizeiten mal eine wenn es die noch nicht gibt.

LG: Tammy
 
Zuletzt bearbeitet:
Du meinst vmtl.
Code: 
@xf-borderRadiusSmall

Das ist die Style-Eigenschaft borderRadiusSmall, einfach oben rechts im Backend in die Suchbox eingeben/kopieren und anklicken

Eine Liste der Style-Eigenschaften kannst Du dir aus der Tabelle xf_style_property ziehen.

Zwar weiss ich wo man den Radius ändert - allerdings ist dort nirgends ein Hinweis zu sehen in welche Less-Variable diese geschrieben werden.
Zum Vergrößern anklicken....
Aber sicher doch, der Variablenname wird mit angezeigt - allerdings nur dann wenn der Debug-Modus aktiviert ist.
xf2-stylevar.png
 
Zuletzt bearbeitet:
Mich nervt gerade etwas die untere Navigationszeile.
Sitze bereits den ganzen vormittag schon dran und komme nicht auf die Lösung. Keine Ahnung wo ich mich festgefressen habe.

Die obere Karteireiter habe ich mit position: relative und top:-28px 1px über den unteren Rand der Wiese gezogen.
Die untere Navigationsleiste sollte logischerweise daran anschliessen. Funktioniert einwandfrei wenn ich auch hier mit position:relative
und top: -28px arbeite.
Allerdings lässt sich nicht mehr hovern!
Auf dem Bild sieht man die Leiste mit top:-20px. Da geht das hovern vom unteren Textrand bis zum ende des divs (bottom).
das heisst: Der hover wird mit top:-28px nicht mitgezogen. Wie geht denn das bitte?

Hat da jemand eine Idee?

Im übrigen:
Ein Bug von 2.0?
Bei vielen Unterforen, die man über das Elternelement öffnet, wird kein overflow:scroll erzeugt. Das teil ist teils 5000px nach unten lang.
hier sollte wohl ein max-height: 500px +-150px sinnvoll sein ;)

Zugriff von ausserhalb leider (noch) nicht möglich.

Komme erst um 19 Uhr zurück und melde mich dann auf evtl. Antworten.

LG: Tammy
 

Anhänge

  • turm_untere_nav.jpg
    turm_untere_nav.jpg
    52,1 KB · Aufrufe: 9
Vorab: Ich bin nicht so der CSS Expeerte, aber warum nicht einfach
Code: 
.p-navSticky--primary
{
margin-top -28px;
}
um die ganze Nav 28px nach oben zu ziehen?

Alternativ vielleicht
Code: 
.p-header-logo--image img
{
height: <höhe-28>px;
overflow: visible;
}
 
Andreas... Du bist der Held ;) Danke!

Erst dachte ich: Hä? margin? Blödsinn!
Keine Ahnung wo ich da überall schon gebastelt habe, aber an margin-top hab ich gar keinen Gedanken verloren.
So brauch ich auch meine untere Navzeile gar nicht mehr verschieben, da sich diese automatisch mit der verschobenen oberen nach oben "zieht".
Nun ist auch der grosse Abstand unter der Leiste weg, der durch das hochziehen entstanden ist. 4 Einstellungen mit einem Code gelöst ;)
(In meinem Fall ist das übrigens die Klasse "p-nav", da ich das blöde "Sticky" deaktiviert habe;) - wenn Sticky aktiviert ist, wäre das Deine genannte Klasse. )

Was Du mir allerdings mit dem Logo sagen möchtest, kann ich jetzt nicht nachvollziehen.
Wenn Du Dich auf die fehlende Scrollleiste beziehst, da meinte ich ganz was anderes.
In der Forenübersicht in einer Kategorie z.B. 5 Foren, die jeweils unterforen haben.
Unter dem Forum steht ein Text: Unterforen
klickt man diesen an, öffnen sich gnadenlos alle Unterforen in einem Menü. Dieses sollte aber eher übersichtlich sein - so um 500-600px, aber nicht
so lang, das man 5 Minuten rollen muss um runter zu kommen - und eigentlich den Rest des Forums schon gar nicht mehr sieht.
In einer Box mit 500/600px kann man dann recht übersichtlich rechts an der Seitenleiste runterrollen - aber doch bitte nicht die ganze Seite ;)

Als Beispiel habe ich ein Forum mit Veranstaltungen (ein überbleibsel aus meiner Testzeit von vb4 2011) und allen Deutschen KFZ Kennzeichen
Klar - das ist ein krasses Beispiel - aber selbst wenn es nur 30 Unterforen sind ist das schon sehr unschön. Mühsam ist beides bei so vielen Foren,
da man immer runterrollen muss. Aber das Bild wird beim runterrollen einer Seite extrem unruhig und lenkt extrem ab!

LG: Tammy
 
Zuletzt bearbeitet:
Du musst dich einloggen oder registrieren, um hier zu antworten.
Zurück
Oben