CSS Template(s) erstellen ?

[opnsense_user12123]

Ich möchte ein neues CSS Template für OPNsense erstellen.

Nun wären meine Fragen:

1. Ist es erlaubt ein neues Template zu erstellen ?
2. Darf man es nach Prüfung und Test auch der Allgemeinheit zur Verfügung stellen ?
3. Wie bzw in welchen Strukturen ist das .css aufgegliedert bzw aufgebaut ? Bootstrap ?
4. Gibt es eine Übersicht der Klassen, Divisions die verwendet wurden ?
5. Irgendwelche Vorgaben bzw. Anhaltspunkte in irgendeiner Form ?

Danke!

[fabian]

1. Ist es erlaubt ein neues Template zu erstellen ?

Ja, man muss nur die Lizenzen beachten.

2. Darf man es nach Prüfung und Test auch der Allgemeinheit zur Verfügung stellen ?

Wenn es gut ist, ist das sogar gewollt. Im Moment gibt es nur keines, da sich keiner die Arbeit antut.
Entweder als Plugin (jeder soll es verwenden können) oder als Archiv zum Download (begrenzter Personenkreis, zum Testen)

3. Wie bzw in welchen Strukturen ist das .css aufgegliedert bzw aufgebaut ? Bootstrap ?

Es ist die SASS-Version von Bootstrap + Bootgrid

4. Gibt es eine Übersicht der Klassen, Divisions die verwendet wurden ?

Nein

5. Irgendwelche Vorgaben bzw. Anhaltspunkte in irgendeiner Form ?

keine Ahnung

[opnsense_user12123]

1. Ist es erlaubt ein neues Template zu erstellen ?

Ja, man muss nur die Lizenzen beachten.

2. Darf man es nach Prüfung und Test auch der Allgemeinheit zur Verfügung stellen ?

Wenn es gut ist, ist das sogar gewollt. Im Moment gibt es nur keines, da sich keiner die Arbeit antut.
Entweder als Plugin (jeder soll es verwenden können) oder als Archiv zum Download (begrenzter Personenkreis, zum Testen)

3. Wie bzw in welchen Strukturen ist das .css aufgegliedert bzw aufgebaut ? Bootstrap ?

Es ist die SASS-Version von Bootstrap + Bootgrid

4. Gibt es eine Übersicht der Klassen, Divisions die verwendet wurden ?

Nein

5. Irgendwelche Vorgaben bzw. Anhaltspunkte in irgendeiner Form ?

keine Ahnung

Danke mal für die Info.

Noch was:

1. Darf man Icons, Button, links usw farblich verändern oder gibt es hier Teile die nicht verändert werden sollen bzw dürfen?

2. Hängt zwar nicht mit css zusammen....
Aber hat man schonmal überlegt den Logout Button als Hauptmenüpunkt zu setzen und nicht als submenüpunkt?

Außerdem wäre es sicher von Vorteil das Menü links auf ,,Knopfdruck" nach links soweit einrücken zu lassen, dass nur noch die icons der hauptmenüpunkte sichtbar sind. Das wäre für das Dashboard zwecks Übersicht viel schöner, weil auch mehr Platz, mehr Übersicht und es wäre dadurch für eine weitere ,,colume" Platz. Natürlich könnte man das Hauptmenü links auf Knopfdruck auch wieder in die originalbreite zurücksetzen.

3. Wo finde ich denn den Link zu den lizenzvereinbarungen bzgl Veränderungen usw.

Danke im vorraus

[fabian]

1. Darf man Icons, Button, links usw farblich verändern oder gibt es hier Teile die nicht verändert werden sollen bzw dürfen?

Klar  - sollte nur einen guten Kontrast haben, damit man die Texte noch gut lesen kann. Was vermutlich nicht geändert werden sollte, sind Abstände (margin, padding) und Positionierungen (position, top, left, bottom, ...), weil die das Layout kaputt machen könnte.

2. Hängt zwar nicht mit css zusammen....
Aber hat man schonmal überlegt den Logout Button als Hauptmenüpunkt zu setzen und nicht als submenüpunkt?

War in der 15.x Serie oben neben dem Usernamen, wurde dann entfernt (hat sowieso furchtbar ausgesehen).

Außerdem wäre es sicher von Vorteil das Menü links auf ,,Knopfdruck" nach links soweit einrücken zu lassen, dass nur noch die icons der hauptmenüpunkte sichtbar sind. Das wäre für das Dashboard zwecks Übersicht viel schöner, weil auch mehr Platz, mehr Übersicht und es wäre dadurch für eine weitere ,,colume" Platz. Natürlich könnte man das Hauptmenü links auf Knopfdruck auch wieder in die originalbreite zurücksetzen.

Hat halt noch niemand implementiert...

3. Wo finde ich denn den Link zu den lizenzvereinbarungen bzgl Veränderungen usw.

Normalerweise findest du den Lizenztext oben in der Datei. In der Regel musst du den 1:1 kopieren und dann darfst du deinen Namen in einer eigenen Zeile dazuschreiben.

[opnsense_user12123]

Hi Fabian,

Danke mal für deine Unterstützung.

Nachdem ich mich in das Framework ein wenig eingelesen habe, stellt sich für mich die Frage, ob ich nun ein .scss erstelle und dann ein .css daraus generiere oder ob es reicht nur das css zu modifizieren?

Außerdem habe ich festgestellt, dass es sich bei den Icons ja nur um eine Schriftart handelt.
Wobei das Stylesheet dazu wiederum nicht im Template Ordner liegt sondern eine Ebene darüber liegt.

Sollte hier auch zuerst das sass file modifiziert und dann daraus das eigentliche Stylesheet generiert werden?

Für mich gibt es hier einen einfachen Weg und einen komplizierten.
Sicherheitstechnisch ist es sicher egal aber die Frage bleibt: was ist gewünscht?
Und je nachdem richtet sich natürlich auch der Zeitaufwand.

Danke

[franco]

Hallöchen,

Das SCSS ist ja nur dafür da, dass man das Branding anpassen kann. Man muss also nicht den Umweg gehen wenn man nur ein Layout hat. Dann einfach das CSS anpassen. Das SCSS wird vom Browser ja nicht beachtet.


Grüsse
Franco

[opnsense_user12123]

Das SCSS ist ja nur dafür da, dass man das Branding anpassen kann. Man muss also nicht den Umweg gehen wenn man nur ein Layout hat. Dann einfach das CSS anpassen.

Es ist mir eh nur Recht, da es weniger Aufwand ist.

Das SCSS wird vom Browser ja nicht beachtet.

Danke, dass wußte ich schon.

Für mich ist wichtig so sauber wie möglich zu arbeiten. Trotzdem wollte ich fragen ob overriding erlaubt ist?

LG

[fabian]

Für mich ist wichtig so sauber wie möglich zu arbeiten. Trotzdem wollte ich fragen ob overriding erlaubt ist?

Wie oben schon geschrieben - ja ist es (solange die Lizenz eingehalten wird).

[opnsense_user12123]

Ich habe die neuen RC1 und RC2 noch nicht installiert bzw getestet. Weiß jemand ob es im Quellcode der .css Dateien zu Umstellungen oder Erneuerungen kommt bzgl. der Klassen die verwendet werden?

Danke!

[franco]

main.scss wurde in einigen Details überarbeitet, ja.


Grüsse
Franco

[opnsense_user12123]

Ich bin gerade dabei ein neues Template zu erstellen !.

War jetzt die ganze Arbeit umsonst ? :-(

Außerdem stellt sich die Frage, wie oft sich die main.scss in Zukunft wieder verändern wird. Man kann ja nicht jedesmal eine komplett neues Template erstellen!

Wäre es nicht hilfreich ein paar grundlegende Vorlagen zu verwenden, an die sich jeder hält auch wenn eine neue Version von OPNsense rauskommt? Zumindest über einen gewissen Zeitraum.

Wer ist den hier der richtige Ansprechpartner und kann mir erklären welche Klassen sich namentlich oder inhaltlich verändert haben?

Vorallem wäre für mich auch interessant zu wissen, in wieweit ich jetzt meine main.css nochmals modifizieren muss.

[opnsense_user12123]

Kann mir niemand genauere Infos zu den Änderungen in der neuen Version sagen, außer das was bei der RC2 steht ?

Ich versuche wirklich ernsthaft ein brauchbares Template zu erstellen und möchte wirklich nicht sinnlos weiterarbeiten ohne mehr Details zu haben!

Was genau wurde denn nun CSS technisch geändert. Neue Klassen? Namensänderungen der Klassen? Verbesserungen der Darstellung usw ??

Bitte um Info!

[franco]

Hier kann man alle Änderungen gut nachvollziehen.

https://github.com/opnsense/core/commits/master/src/opnsense/www/themes/opnsense

[opnsense_user12123]

Danke Franco!

Ich habe jetzt keine massiven Änderungen feststellen können.
Ich werde jetzt mal auf die Release Version warten und dann die neue main.css anpassen.

In der Zwischenzeit werde ich mal weiterarbeiten.

Danke!

[theq86]

Aufs Release warten ist an sich ne gute Idee so kurz vor einem Major Release.

In Minor oder Bugfix Releases werden in der Regel ohnehin keine gravierenden Änderungen am Produkt vorgenommen, sodass du dann erstmal deine "Ruhe" vor vielen Änderungen haben solltest.

Es macht mMn auch keinen Sinn jetzt noch für die 17er Linie etwas anzufangen, denn wer sich ne Sense ins Haus stellt ist auch schlau genug regelmäßig Updates einzuspielen.

Generell kannst du dich in GitHub am schnellsten und einfachsten über Änderungen informieren.