Eigenen Skin erstellen - wie am besten starten???

Hallo,

habe mir die beiden Posts oben angeschaut und leider vergebens in der Doku bzw. dem Wiki vergebens gesucht.

Ich suche eine Minianleitung wie man mit dem entwickeln eigener Skins am besten startet.

Folgendes habe ich vorbereitet:

  • Git installiert.
  • Darkskin intalliert.
  • Darkskin ausgewählt.

Nun aber meine Fragen zum Handling:

  • Arbeite ich mit dem Originalskin oder besser mit einer Kopie (natürlich nach den Namenskonventionen)?
  • Wie sieht es aus mit Updates? Wenn ich mit dem Originalskin arbeite, bleiben dann meine Änderungen erhalten oder werden die überschrieben? Wenn ich mit einer Kopie arbeite, wie kommen dann die Updates rein?

Weiterhin generelle Fragen:

  • Darf ich eure Standardicons vom herkömlichen Webfront anpassen (z.B. die Farbe) und weiterverwenden?
  • Wenn ich den Skin mit der IPS Community teilen sollte, darf ich dann die Icons von euch modifiziert weitergeben?
  • Ausserdem, wo finde ich eigentlich die Standardicons vom herkömmlichen Webfront?
  • Da ich ja nicht die ganze Zeit mit dem Testskin arbeiten möchte, besteht die Möglichkeit einen Konfigurator komplett zu kopieren - so das ich eine absolut identische Umgebung habe zum entwickeln und eine für den Livebetrieb?

Danke für eure Mühen - insbesondere dir Paresy, für die neue Möglichkeit Skins zu erstellen. So kann ich mal endlich wieder ein wenig basteln ;).

  • Arbeite ich mit dem Originalskin oder besser mit einer Kopie (natürlich nach den Namenskonventionen)?

Einfach den DarkSkin Ordner kopieren und einen deiner Wuschnamen geben

  • Wie sieht es aus mit Updates? Wenn ich mit dem Originalskin arbeite, bleiben dann meine Änderungen erhalten oder werden die überschrieben? Wenn ich mit einer Kopie arbeite, wie kommen dann die Updates rein?

Skins brauchen keine Updates. Du änderst mit einem Skin ja nur Bruchteile des WebFronts. Normalerweise sollte das bei Updates gar keine Auswirkung haben. Falls wir aber mal etwas am WebFront umbauen, und deine CSS Änderungen dadurch nicht mehr greifen, musst du natürlich etwas an deinem Skin anpassen.

  • Darf ich eure Standardicons vom herkömlichen Webfront anpassen (z.B. die Farbe) und weiterverwenden?
  • Wenn ich den Skin mit der IPS Community teilen sollte, darf ich dann die Icons von euch modifiziert weitergeben?
  • Ausserdem, wo finde ich eigentlich die Standardicons vom herkömmlichen Webfront?

Du kannst eigentlich nur die Farbe anpassen. Unsere Icons sind als WebFont verpackt… Somit kannst du nicht wirklich etwas daran ändern. Und somit erübrigen sich die anderen Fragen.

Beispiel zum Ändern der Farbe:


.icon {
  color: red;
}

  • Da ich ja nicht die ganze Zeit mit dem Testskin arbeiten möchte, besteht die Möglichkeit einen Konfigurator komplett zu kopieren - so das ich eine absolut identische Umgebung habe zum entwickeln und eine für den Livebetrieb?

Neuer Konfigurator. Und dann beim alten auf Duplizieren klicken und in den neuen kopieren lassen.

Das klingt Klasse, hatte schon einen kopiert und angefangen anzupassen - wollte es nur genau wissen, nicht das sonst die Arbeit umsonst wäre.

Wenn man die Icons gar nicht neu erstellen müsste, sondern einfach so anpassen könnte das wäre ja der Hammer, das würde ne Menge Arbeit ersparen (freu).

Mit dem Konfiguration duplizieren ist auch schick.

Es ist echt der Hammer, wie IPS einen überrascht mit welcher Liebe zum Detail ihr arbeitet :).

Freue mich schon heute auf dieses Skin im Repository :slight_smile:

Ich auch. Irgendwie wird die Möglichkeit mit dem Repository noch sehr spärlich genutzt :rolleyes:

Falls da noch mehr Input von mir benötigt wird, stellt in dem passenden Thema einfach Fragen dazu.

paresy

Habe mich bisher auch noch nicht ran getraut. Finde es unheimlich schwierig da passende Icons zu finden.
Müsste ja schon ein komplettes Set sein, zusammen gesucht sieht ja nach nix aus.

Aber da kann man ja richtig Geld für lassen, wie ich das bisher gesehen habe…

Manchmal reicht es aber auch einfach nachzufragen, die icons damals die ich im ipsHomecontrol hatte, waren eigentlich zum lizensieren. Ich hatte aber nachgefragt, ob ich diese auch für eine Nichtkommerzielle Software verwenden durfte und hatte die schriftliche Genehmigung dafür bekommen ;).

Nur den Fragenden konnte in dem Fall geholfen werden :).

Ich kann zwar kein php, bzw. verstehe ich mittlerweile die Abläufe und kann recht viel zusammenkopieren, aber in Sachen Photoshop / HTML und eigentlich auch css war ich immer ziemlich fit. Und selbst mir ist der Einstieg irgendwie zu kompliziert. Gut ich habe vorhin Firebug installiert und wenn ich mich bischen reinfuchse dann wird das schon irgendwie, aber die Hürde am Anfang liegt schon hoch.

Grüße !

Zumal ich zumindest das Problem habe, das sich meine Frau an den original-skin gewöhnt hat. Änderungen sind da nicht zwingend erwünscht :wink:

Ja, aber wenn man schon keine eigene GUI mehr hat (ipsHomecontrol ist ja schon ne Weile her - heute an den Funktionsumfang vom Webfront ranzukommen ist echt schwer), dann möchte man doch schon wenigstens ein wenig individualisieren ;).

Ich hab es auch mal versucht.

Erste Ergebnisse gibt es hier.

Wir allerdings noch etwas dauern bis ich alles so habe wie ich will. Die lliebe Zeit. :o

https://github.com/RWNidda/BlackYellowSkin

Schaut schon mal gut aus !

@Paresy:

Kannst du das mit dem Konfigurator genauer definieren?

Ich bin in dem Punkt IPS > Konfigurator Instanzen. Da habe ich einen Webfront Konfigurator mit dem Namen iDevices. Wenn ich den mit Rechte Maustaste anspreche, dann habe ich nicht den Punkt Duplizieren.

Weiterhin habe ich nun da ein neues Element vom Typ Webfront Konfigurator erstellt. Wie kann ich denn nun genau die Eigenschaften „übertragen“?

Danke für deine / eure Hilfe.

Im Konfigurator auf Struktur gehen. Dann ist ganz rechts der Button Duplizieren.

Danke dir, hat wunderbar funktioniert.

Bin auch schon ein paar kleine Schritte weiter.

Aber da beiße ich mir gerade die Zähne aus, ich finde einfach nicht heraus, welche CSS Elemente das sind. Das Hauptelement ist .container, aber die ausgeklappten Elemente (vom angepassten Variablenprofil) bekomme ich einfach nicht heraus:

Möchte Quasi den gesamten Bereich ohne Rahmen komplett in Weiß haben (um Temperatur Garten und Grad).

Könnt ihr mir auf die Sprünge helfen?

Danke vielmals.

P.s. Paresy: Das mit dem einfärben der Icons gefällt mir echt gut - das macht echt Laune auch „mal eben“ einen Skin anzupassen :).

Wenn ich dich nicht falsch verstanden hab.

.ipsCategory > .container .childContainers {

Strange, wenn ich da ein background-color: white; reinpacke - dann habe ich den Rahmen weiß (Background hätte ich eher den Hintergrund als den Rahmen erwartet).

Doch damit habe ich schon mal einen Teilerfolg. Der Rahmen ist nun „weg“ - doch der Rahmen drumherum ist noch vorhanden. Quasi der türkise Rahmen drumherum (außer oben - denke mal das ist ein schwarzer Rahmen jedoch mit Opacity).

Firefox mit Firebug Addon nutzen ;-), dann kannst du die Struktur der Seite erkennen und Elemente verändern. Wenn die Suche eroflgreich war passt du das Richtige im IPS an.

Ich mache dafür einfach noch mal Werbung: http://discover-devtools.codeschool.com/

paresy

@Ralf: Hatte Safari mit Entwicklertools genutzt und auch Firefox allerdings mit den Webdesign Tools.

Schliesslich habe ich ja auch schon einiges anpassen können, aber hier ist einiges ziemlich „verschachtelt“.

Heute Abend schau ich mir das noch mal genauer an, war gestern auch ziemlich müde - vielleicht sieht das ja heute anders aus.