OPNsense Forum
International Forums => German - Deutsch => Topic started by: opnsense_user12123 on January 09, 2018, 05:52:39 pm
-
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!
-
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
-
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
-
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.
-
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
-
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
-
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
-
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).
-
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!
-
main.scss wurde in einigen Details überarbeitet, ja.
Grüsse
Franco
-
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.
-
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!
-
Hier kann man alle Änderungen gut nachvollziehen.
https://github.com/opnsense/core/commits/master/src/opnsense/www/themes/opnsense
-
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!
-
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.
-
Also...ich bin schon weitergekommen mit meinem Template. Werde jetzt aber noch auf die final release warten um das css dann abzugleichen bzw die Änderungen in das css file vom neuen release zu übernehmen.
was ich aber dringend benötige wäre eine "github for dummies" Beschreibung!.
Ich verwende github Desktop für Windows und kann dort "pushen" und "pull", also upload und download machen. Benötige ich einen eigenen User oder reicht der OPNsense user ?
Zweite Frage.
Da ja auch schon jemand anderer im englischen Forum ein eigenes template erstellt hat, und hierfür über das makefile irgendetwas erstellen musste, was mir aber überhaupt nicht klar ist.
Ich habe mir dieses neue template bereits angesehen und es in einem "misc" ordner gefunden. kann ich meine files mit dem auch in das misc Verzeichnis uploaden? oder muss ich da vorher noch irgendetwas mit dem makefile machen?
3. Mir wurde in diesen Thread vorab gesagt ich muss das css nicht aus dem sass file erstellen. Im englischen Forum wird dies aber verlangt. Ist dies jetzt unbedingt nötig?
Wie gesagt. ich kenn mich da wirklich zu wenig aus und möchte nichts falsch machen. bitte um Detail "opnsense github for dummies" like!
DANKE!
-
> Benötige ich einen eigenen User oder reicht der OPNsense user ?
Wofür, der hat doch mit Github gar nichts zu tun?
Was für Github für Dummies brauchst du denn?
-
ok. github user habe ich.
die restlichen fragen habe ich ja oben beschrieben. ich schreib meine fragen jetzt nicht nochmals!
-
Kein Grund Puls zu bekommen :o Ich habe lediglich den Github User hinterfragt. Deine anderen Themen scheinen beim drüberfliegen ja nichts direkt damit zu tun zu haben, deshalb die Frage.
-
Also nochmals Fragen!
1. Wie kann ich meinen Template Folder hochladen?
2. Wohin kann ich meinen Template Folder hochladen (misc Verzeichnis so wie das andere neue Template "Dark Team" ?
3. Wozu ist das "Makefile" da und wozu benötige ich es und woher bekomme ich es ?
4. Reicht es jetzt einfach mal den Hauptordner (Template Ordner) mit dem modifizierten .css hochzuladen oder muss ich jetzt schon bevor es noch fertig ist das .sass file anpassen und konvertieren bevor ich es hochladen darf ? (wäre wesentlich aufwändiger)
5. Ich verwende Github Desktop für Windows. Gibt es ein besseres Tool für Github das unter Windows läuft?
6. Kann mir jemand bitte eine Anleitung wie eine Art "Tuturial for Dummies" was ich jetzt genau machen muss damit ich mein CSS-Template online stellen kann bzw es zuerst mal auf Github zum testen bereit stellen kann hier erstellen.
Ich bin im Bereich OPNsense und Github totaler Anfänger und möchte nichts falsch machen. Wie gehe ich richtig vor? Ich möchte nichts falsch machen bzw zerstören!Mein Ziel ist es das Template (bei gefallen) als Plugin der Allgemeinheit zur Verfügung zu stellen.
Danke!
-
Also nochmals Fragen!
1. Wie kann ich meinen Template Folder hochladen?
2. Wohin kann ich meinen Template Folder hochladen (misc Verzeichnis so wie das andere neue Template "Dark Team" ?
git clone URL VON DEINEM REPOSITORY
cd plugins/misc
git checkout -b dein_design
cp -r theme-rebellion dein_design
cd dein_design
# Name im Makefile und der Paketbeschreibung ändern
cd src/opnsense/www/themes
mv theme-rebellion dein_theme
Jetzt kannst du die Dateien bearbeiten und auf eine VM kopieren etc.
3. Wozu ist das "Makefile" da und wozu benötige ich es und woher bekomme ich es ?
Das kannst du aus einem anden Plugin kopieren und anpassen oder selber schreiben.
Die Datei ist dazu da, dass man daraus ein Paket (installierbares Plugin) machen kann und hat auch Kommandos zum Entwickeln.
4. Reicht es jetzt einfach mal den Hauptordner (Template Ordner) mit dem modifizierten .css hochzuladen oder muss ich jetzt schon bevor es noch fertig ist das .sass file anpassen und konvertieren bevor ich es hochladen darf ? (wäre wesentlich aufwändiger)
Wenn es wartbar sein soll (offizielles Plugin), soll es schon mit den SASS-Dateien funktionieren.
Für den Browser funktioniert es auch mit den puren CSS-Dateien (für den internen- und Heimgebrauch also völlig OK).
5. Ich verwende Github Desktop für Windows. Gibt es ein besseres Tool für Github das unter Windows läuft?
Man kann unter Windows auch über die Powershell arbeiten (ist inkludiert in GitHub für Windows).
Ich nehme mal an, du fragst hier nach einer IDE die CSS, SASS und LESS unterstützt. Ein besserer Editor wie Atom kann hier auch helfen.
Hier ein paar Editoren und IDEs, mit denen man arbeiten kann (ich erhebe keinen Anspruch auf vollständigkeit):
* Aptana Studio (http://www.aptana.com/), Open Source
* Atom (https://atom.io/), Open Source
* Eclipse (https://eclipse.org/ide/), Open Source
* Emacs (https://www.gnu.org/software/emacs/), Open Source
* PHP- und WebStorm (https://www.jetbrains.com/phpstorm/), Kostenpflichtig
* Vim (https://vim.sourceforge.io/), Open Source
* Visual Studio Code (https://code.visualstudio.com/), Open Source
Im Falle von IDEs kann sich diese selbst oder mittels eines Plugins um GIT kümmern. Benutzer von Editoren verwenden Git häufig über die Kommandozeile. Wenn du deinen branch ausgecheckt hast kannst du mit folgendem Befehl deine Änderungen übernehmen:
git add .
git commit -m "Changes you did"
mit "git push" kannst du deine Änderungen veröffentlichen (in deinen Fork schreiben).
6. Kann mir jemand bitte eine Anleitung wie eine Art "Tuturial for Dummies" was ich jetzt genau machen muss damit ich mein CSS-Template online stellen kann bzw es zuerst mal auf Github zum testen bereit stellen kann hier erstellen.
Hoffe, oben ist genug information.
-
Danke an Fabian dafür. Ich möchte aber auch sagen, dass man diese Informationen einfach selbst zusammentragen kann mit etwas Disziplin und Geduld. Da muss man nicht unbedingt das Forum beauftragen und kommt dann wieder wenn es eine spezifische Frage zu OPNsense auf GitHub gibt. ;)
-
@Fabian Danke Fabian. Ein wirkliches Howto for dummies. Ich denke eine große Hilfe für jeden der OPNsense unterstützen will.SUPER. Genau soetwas habe ich gesucht.
@Franco Ich gebe dir Recht, aber ich investiere neben meinem Beruf und Privatleben freiwillig auch viel Zeit und Energie um ein brauchbares Template zu erstellen. Ich bin deshalb über jede Information die mir Stunden oder Tage von Zeitaufwand erspart sehr dankbar.
-
ich investiere neben meinem Beruf und Privatleben freiwillig auch viel Zeit und Energie
Okay, ich lass das mal so stehen... 8)
Grüsse
Franco
-
Posted by: opnsense_user12123
ich investiere neben meinem Beruf und Privatleben freiwillig auch viel Zeit und Energie um ein brauchbares Template zu erstellen.
Ich bin deshalb über jede Information die mir Stunden oder Tage von Zeitaufwand erspart sehr dankbar.
Ich denke, dass dir das keiner in Abrede stellen will. Jeder, der etwas beiträgt ist willkommen. Dass man das meist in der Freizeit machen muss ist klar, wenn man nicht beruflich für das Projekt/die Firma tätig ist.
Dennoch, OPNsense ist ein Projekt das weit über Templating hinausgeht. Es ist so umfassend, dass es leider nicht damit getan ist, ein Template per FTP hochzuladen und fertig. Die Entwicklung muss über viele Technologien und viele Contributer hinweg einheitlich gestaltet werden. Das fügt natürlich eine zusätzliche Ebene der Komplexität ein. Es bedeutet auch, dass du dich selbst mit Dingen befassen musst, die du nicht kennst und auch einiges Neues lernen musst. Das ist leider der unbequeme Teil, ohne den es aber nicht geht.
Aber niemand zwingt dich morgen fertig zu sein. Nimm dir ruhig die Zeit und du wirst sehen, es lohnt sich. Schritt für Schritt verstehst du mehr und wenn dein Projekt dann fertig ist, wirst du umso stolzer sein.
Was Franco meint ist, dass dir zwar hier geholfen wird was OPNsense angeht, aber Vieles drumherum musst du auch selbst in Erfahrung bringen. Denn auch wir verbringen unsere Freizeit hier und können kein "Mentor für alles auf Abruf" sein.
-
Ich wollte mit meiner Frage niemanden verärgern. :-(
Ich weiß es auch sehr zu schätzen was Fabian hier geschrieben hat.
Mein Dank gilt auch Franco, der mir und vielen anderen schon sehr oft geholfen hat.
Und wenn sich Fabian schon die Mühe gemacht hat, das hier zusammen zu schreiben, wäre es vielleicht sinnvoll wenn man dieses "Mini Tutorial" auf das Wiki stellt, damit wären zumindest einige Fragen zum Thema Css Template / Plugin / Github usw beantwortet und dadurch sollte es auch eine Entlastung an Fragen für die Community zu diesem Thema geben.
Sorry nochmals und Danke für die tolle Unterstützung! :-)
P.S Ich werde aktuelle News zu meinem Template in naher Zukunft hier posten. Ich warte halt auf die final Release um es dann auf die Neuerungen anzupassen. Ich bin leider ein Perfektionist und möchte für dieses tolle Produkt das Beste erreichen. LG
-
Man könnte ins Wiki vielleicht ein paar Eckpfeiler zu Templating und Styling schreiben.
Aber dennoch sehe ich das ein wenig anders. Ich will jetzt nicht klugscheißen, aber ich will dir erklären, wie manche Sachen funktionieren und warum manches so ist, wie es ist.
"Mini-Tutorials" wie du es nennst bilden eben nur einen Mini-Teil ab. Das kann im schlechtesten Fall dafür sorgen, dass ein Beiträger zwar gut anfängt, sich dann aber etwas in Details verrennt oder dann langsam "vom Weg abkommt" - weiß nicht wie ich es genauer beschreiben kann. Manchmal ist es eben nicht genug "nur ein bisschen" zu können/machen.
Allumfassende Tutorials sind mit extremem Aufwand verbunden und es wird dabei viel Wissen "kopiert", das man sich von woanders einfacher holen könnte. Es gibt in der Entwicklung die Begriffe Scope und Concern.
Je nach Kontext bedeuten sie unterschiedliche Sachen, aber im Falle hier verwende ich sie mal synonym. Gemeint ist die Zuständigkeit und wie weit sie reicht. Was also im Scope ist, und was nicht.
Wenn man die Zuständigkeiten nicht trennt und begrenzt ufert es aus.
Der Scope des Wikis, des Forums, der Webseite und des Codes hier ist und bleibt OPNsense. Daher findest du hier auch Infos und Dokumentation zu fast allem (auch der Architektur von Plugins).
Github zB. ist aber ein völlig anderer Scope, ein anderes Thema. Dahinter steckt nicht nur die Webseite, sondern in erster Linie auch die Versionsverwaltung Git. Beides auch Themen, zu denen sich schon ganze Bücher füllen lassen. Wenn jetzt jedes Projekt das mit Git arbeitet noch ein eigenes Git-Tutorial schreiben würde/müsste, kannst du dir den Berg an zusätzlicher Arbeit sicher erahnen ;-)
Wenn ich beim Bäcker um die Ecke ein belegtes Brötchen kaufe frage ich so gesehen den Bäckermeister ja auch nicht, warum man ein Schnitzel klopft. Der packt halt das Schnitzel einfach aufs Brötchen.
Wenn du Hilfe zu Github brauchst, schaust du hier: https://help.github.com/
Wenn du mehr über Git verstehen willst, für das Github nur eine Oberfläche ist, schau hier: https://git-scm.com/doc
Überall findest du auch leicht verständliche Tutorials und Erklärungen. Zuhauf sogar auf deutsch. Aber niemand wird hier einzeln alles zusammenklauben und komprimiert zur Verfügung stellen. Denn selbst das würde irgendwann in ein ganzes Buch münden.
Was fabian geschrieben hat sind kleine Tipps und Anhaltspunkte für dich. Ein Tutorial um es ins Wiki zu schreiben ist es nicht.
Keiner wird dich hier für Fragen köpfen. Auch nicht wenn es mal um ein anderes Thema geht wie externe Entwicklungstools und wie sie mit OPNsense interagieren. Aber man kann sich nun mal nicht hinstellen und sagen: Hier ist mein Fragenkatalog, bitte beantworten und danach ein Tutorial erstellen. Ich glaube so kam es nämlich ein bisschen rüber.
-
@nasq: Ich mag mich irren aber ich glaube die Frage/Aussage war eher bezogen auf das Mini-Tutorial und den Bezug auf opnSense bzw. die Entwicklung im Github dort, weniger Git/Github im spezifischen. Ich stimme dir sonst komplett zu was Git/Github angeht, das hat im Wiki sicher weniger bis nichts zu suchen. Aber was ich aus der Frage herausgelesen hatte war, dass es Sinn machen würde im Wiki/der Doku ggf. einen Stub oder ein "Mini-Howto" zu schreiben, wie man solche Dinge wie Plugins, Addons o.ä. angeht. Fabians Beitrag war da sehr zielführend, da hier klar war "nehme dir den Clone von Github aus Directory X, kopiere Y und Z in <dein_projekt> und beginne dann zu bauen, benutze ggf. die Makefiles etc. und wenns fertig ist, kannst du den ganzen Kram zusammenpacken und als Pull Request einstellen". Solch ein "How to make a Plugin/Addon/Template" Scaffold/Rohgerüst, wäre sicherlich nicht unpraktisch, denn mir selbst ging es auch schon an mancher Stelle so, dass ich überlegt hatte, ob sich das nicht besser als Paket o.ä. bauen lässt, wenn man allerdings nur schwer/umständlich oder mit großem Aufwand irgendwie alle Informationen zusammen trägt (aus Sicht des Willigen), ist da die Hürde relativ hoch. Gibt es solch ein kleines Howto etc. wie man sich da relativ leicht eine (nennen wir es ) Build Umgebung für Plugin/Addon/Paket/Template zusammenbrauen kann, ist auch die Hürde geringer, dass sich mancher daran versuchen kann/wird, so etwas zu bauen.
Und ich denke das ist dann schon im Scope des Wikis oder der Doku - oder zumindest dann im Scope des Projekts auf Github (wenn man Doku und DevDoku trennen möchte)?
Grüße
Jens
-
Was die Einstiegshürde betrifft muss ich dir zustimmen. Gerade für Nicht-Entwickler ist sie ziemlich hoch und meiner Meinung nach fehlt dem Wiki ein vielen Fällen einfach ein "How to get started".
Es ist sehr viel Architektur dokumentiert und die Doku ist nun mal auch ziemlich code - und detailzentrisch.
Auch die einzelnen How-Tos lassen leider etwas Tiefe vermissen.
Aber das geht jetzt auch langsam aus dem Scope des Threadtitels. ;D