Skin ändern

[Blondy59]

Hallo Leute,
kann mir jemand von Euch dabei helfen einen bestehenden Skin zu ändern.
Es handelt sich um den Skin Jazz. Möchte eigendlich nur ein Bild oben rechts
einbinden, und ein paar Farben ändern.

Danke Euch schon mal für Eure Antworten.

Blondy59

[Werner]

Kleine Bilder kann man in einem Stück einfügen .
Das Bild muss nur einen Rahmen haben und wie in meinem Bild, oben rechts einen einzelnen Punkt (Möglichst in einer Farbe, die in dem Bild nicht vorkommt)

Große Bilder, die beim verkleinern von Silverjuke, nicht mehr passen würden, müssen dreigeteilt werden. (Wie in dem Bild was ich hochgeladen habe)

Silverjuke Bild variabel.jpg (124.49 KiB) Viewed 10305 times

Sagen wir mal das einzufügende Bild hat den Dateinamen Logo.PNG

Dann muss im Skin solch eine Zeile eingefügt werden (Wo genau zeige ich später) :
<!-- Logo -->
<img src="Logo.PNG" x="10" y="20"
In diesem Fall würde die linke obere Bildecke, 10 Bildpunkte von Links und 20 Bildpunkte von Oben erscheinen.



Oder wenn Das Bild beim verkleinern mitwandern soll ( Bei Oben Rechts ist das der Fall) :
<!-- Logo -->
<img src="Logo.PNG" x="100%-210" y="4"

X steht für die Position von Links nach Rechts gezählte Bildpunkte. In diesem Fall soll das Bild "immer" 210 Punkte von Rechts und 4 Punkte von oben bleiben. ( Auch wenn Silverjuke verkleinert wird )
Also von ganz Hinten (100%) 210 Punkte zurück.

Man kann auch 50% angeben, dann würde ab der Mitte gezählt ...


Sehr Wichtig ist, das der Rahmen durchgehend die gleiche Farbe hat !!!
Der Dateiname und Dateiendung identisch sind. (Auch Groß/Kleinschreibung beachten)

[Werner]

Wenn Du nur das Yazz Logo anpassen möchtest, dann geht das ganz einfach.

Skindatei in einem neuen Ordner verschieben und die Dateiendung von .sjs in .zip ändern.
Dann mit Winzip in dem neuen Ordner entpacken.

In diesem Ordner, die Datei namens title.png suchen und in title-old.png umbenennen. Oder Du änderst dieses Bild und bist fertig

Danach den Ordner in Yazz.sjs umbenennen. (Den Ordner erkennt Silverjuke nun als Skindatei)

Das angehängte Bild title.png runterladen und das neue in diesen Rahmen einfügen. Der grüne Rahmen darf nicht verändert werden !

Und dann in dem Yazz.sjs Ordner als title.png speichern .

In Silverjuke , einmal auf Silverness Skin und dann den Jazz auswählen.
Fertig

[Werner]

Hi, ich schreibe lieber hier im Forum als über die Private Nachrichten Funktion. (So kann es Anderen helfen die das gleiche Problem haben )
Freut mich das es mit dem ändern des Bildes geklappt hat.
In der Privat Nachricht hast Du auch nochmal wegen dem ändern von Farben gefragt ...

In dem neu angelegten Yazz.sjs Ordner musst Du folgende Dateien Suchen und die Hier farblich markierten Stellen Stellen mit den neuen Hex Farbwerten anpassen :
menu-white.xml

<!-- menue,-->

<div x="8" y="next" w="208" h="208" />
<box x="0" y="same" w="100%" h="100%" bgcolor="#eef3fa" />
<img x="-8" y="0" h="100%" src="outer-bg-white.png" />

<!-- search -->
<if cond="search">
<div x="3" y="20" w="202" h="35" />
<img src="search-bg-white.png" x="0" w="100%" />
<input x="7" y="7" w="100%-55" h="19" fgcolor="#ffffff" bgcolor="#2c2c2c" />
<button x="next+3" y="7" src="search-buttons-white.png" srcindex="0" target="searchbutton" />
<button x="next" y="same" src="search-buttons-white.png" srcindex="1" target="searchbutton" cmw="19" />
<box x="0" y="-16" w="100%" h="14" target="searchinfo" inactive="1" fgcolor="#000000" />
</if>

<box x="3" y="next" w="1" h="1" bgcolor="0e0e0e" /> <!-- init position -->
<if cond="albumView">
<button x="same" y="next+2" src="menu-white.png" srcindex="0" target="albumView" />
</if>
<if cond="coverView">
<button x="next+4" y="same" src="menu-white.png" srcindex="1" target="coverView" />
</if>
<if cond="listView">
<button x="3" y="next+4" src="menu-white.png" srcindex="2" target="listView" />
</if>
<if cond="startVis">
<button x="next+4" y="same" src="menu-white.png" srcindex="3" target="startVis" />
</if>

</div>

<!-- change view colours -->

<button x="3" y="next+5" src="color-white.png" srcindex="1" target="layout:default"/>

<img x="-8" y="100%" h="8" w="100%+8" src="outerdown-bg-white.png" />


</div>

Jenachdem welches Windows Du hast, kannst Du die Farben / Hex Werte mit dem normalen Paint Programm / Farb-Pipette herausfinden, oder Du brauchst solch ein Tool :
http://usability-now.com/tools/pipette- ... -anzeigen/


-

[Blondy59]

Schönen Dank für Deine Anleitung. Eine Frage habe ich noch. Kann man in den Container wo die Alben drin sind auch ein Hintergrund Bild einfügen?

[Werner]

In der nowplaying.xml Datei



<!-- now playing -->



<div x="100%-337" y="117" w="329" h="100%-230" />

<img h="100%" src="lcd_left.png" />
<img x="next" w="100%-12" src="lcd_top.png" />
<box x="same" y="next" w="same" h="100%-15" bgcolor="#0e0e0e" />
<img x="same" y="100%-6" w="same" src="lcd_bottom.png" />
<img x="next" h="100%" src="lcd_right.png" />
<img x="next" y="0" h="100%" src="outer-bg.png" />
<img x="17" y="17" w="300" h="300" src="bg-cover.png" />
<box x="10" y="10" w="300" h="300" target="displaycover" />
<box x="10" y="next+20" w="300" h="20" fgcolor="#00bfff" hicolor="ffff00" id="title" />
<box x="10" y="next+2" w="50" h="20" fgcolor="#78ddff" hicolor="ffff00" id="YearTest" />
<box x="next+10" y="same" w="240" h="20" fgcolor="#78ddff" hicolor="ffff00" id="TestGenre" />

<!-- rating -->

<button x="10" y="next+11" src="bg-rate.png" srcindex="0" onclick="setRating1();" />
<button x="next" y="same" src="bg-rate.png" srcindex="1" onclick="setRating2();" />
<button x="next" y="same" src="bg-rate.png" srcindex="2" onclick="setRating3();" />
<button x="next" y="same" src="bg-rate.png" srcindex="3" onclick="setRating4();" />
<button x="next" y="same" src="bg-rate.png" srcindex="4" onclick="setRating5();" />
<button x="next+15" y="same" src="bg-rate.png" srcindex="6" onclick="setRating0();"/ />

<box x="10" y="same" h="20" b="10" fgcolor="#808080" id="rating1aus" />
<box x="next" y="same" h="20" b="10" fgcolor="#808080" id="rating2aus" />
<box x="next" y="same" h="20" b="10" fgcolor="#808080" id="rating3aus" />
<box x="next+1" y="same" h="20" b="10" fgcolor="#808080" id="rating4aus" />
<box x="next+2" y="same" h="20" b="10" fgcolor="#808080" id="rating5aus" />
<box x="next+13" y="same" h="20" b="10" fgcolor="#808080" id="rating0aus" />

<box x="10" y="same-6" w="121" h="47" fgcolor="#ffff00" hicolor="c40000" id="rating" />
<box x="158" y="same+5" w="60" h="20" fgcolor="#e8e8e8" hicolor="ff3cae" target="currtime" />

<!-- selection -->
<button onclick="program.search=player.getAlbumAtPos(player.queuePos); program.viewMode=0" x="next+14" y="same-3" src="select-picture.png" srcindex="0" />
<button onclick="program.search=player.getArtistAtPos(player.queuePos); program.viewMode=1" x="next+3" y="same" src="select-picture.png" srcindex="1" />
<button onclick="program.search='';" x="next+3" y="same" src="select-picture.png" srcindex="2" />


<box x="10" y="next+11" w="300" h="20" fgcolor="#ff3cae" hicolor="f8f8f8" id="artist" />
<box x="10" y="next+3" w="300" h="20" fgcolor="#fb90d0" hicolor="f8f8f8" id="album" />



<!-- seek -->
<if cond="editQueue">
<scrollbar target="seek" x="10" y="next+12" w="300" src="control-seek.png" hideifunused="1" />
</if>
<else>
<scrollbar target="seek" x="10" y="same" w="300" src="control-seek-disabled.png" hideifunused="1" />
</else>

</div>

[Werner]

In der nowplaying-white.xml Datei:

<!-- now playing -->



<div x="100%-337" y="117" w="329" h="100%-230" />

<img h="100%" src="lcd_left-white.png" />
<img x="next" w="100%-12" src="lcd_top-white.png" />
<box x="same" y="next" w="same" h="100%-15" bgcolor="#eef3fa" />
<img x="same" y="100%-6" w="same" src="lcd_bottom-white.png" />
<img x="next" h="100%" src="lcd_right-white.png" />
<img x="next" y="0" h="100%" src="outer-bg-white.png" />
<img x="17" y="17" w="300" h="300" src="bg-cover-white.png" />
<box x="10" y="10" w="300" h="300" target="displaycover" />
<box x="10" y="next+20" w="300" h="20" fgcolor="#2c2c2c" hicolor="ffff00" id="title" />
<box x="10" y="next+2" w="50" h="20" fgcolor="#5a5a5a" hicolor="ffff00" id="YearTest" />
<box x="next+10" y="same" w="240" h="20" fgcolor="#5a5a5a" hicolor="ffff00" id="TestGenre" />

<!-- rating -->

<button x="10" y="next+11" src="bg-rate-white.png" srcindex="0" onclick="setRating1();" />
<button x="next" y="same" src="bg-rate-white.png" srcindex="1" onclick="setRating2();" />
<button x="next" y="same" src="bg-rate-white.png" srcindex="2" onclick="setRating3();" />
<button x="next" y="same" src="bg-rate-white.png" srcindex="3" onclick="setRating4();" />
<button x="next" y="same" src="bg-rate-white.png" srcindex="4" onclick="setRating5();" />
<button x="next+15" y="same" src="bg-rate-white.png" srcindex="6" onclick="setRating0();"/ />

<box x="10" y="same" h="20" b="10" fgcolor="#808080" id="rating1aus" />
<box x="next" y="same" h="20" b="10" fgcolor="#808080" id="rating2aus" />
<box x="next" y="same" h="20" b="10" fgcolor="#808080" id="rating3aus" />
<box x="next+1" y="same" h="20" b="10" fgcolor="#808080" id="rating4aus" />
<box x="next+2" y="same" h="20" b="10" fgcolor="#808080" id="rating5aus" />
<box x="next+13" y="same" h="20" b="10" fgcolor="#808080" id="rating0aus" />

<box x="10" y="same-6" w="121" h="47" fgcolor="#e1a900" hicolor="c40000" id="rating" />
<box x="158" y="same+5" w="60" h="20" fgcolor="#5a5a5a" hicolor="ff3cae" target="currtime" />

<!-- selection -->
<button onclick="program.search=player.getAlbumAtPos(player.queuePos); program.viewMode=0" x="next+14" y="same-3" src="select-picture-white.png" srcindex="0" />
<button onclick="program.search=player.getArtistAtPos(player.queuePos); program.viewMode=1" x="next+3" y="same" src="select-picture-white.png" srcindex="1" />
<button onclick="program.search='';" x="next+3" y="same" src="select-picture-white.png" srcindex="2" />


<box x="10" y="next+11" w="300" h="20" fgcolor="#003ce1" hicolor="f8f8f8" id="artist" />
<box x="10" y="next+3" w="300" h="20" fgcolor="#5279e3" hicolor="f8f8f8" id="album" />



<!-- seek -->
<if cond="editQueue">
<scrollbar target="seek" x="10" y="next+12" w="300" src="control-seek-white.png" hideifunused="1" />
</if>
<else>
<scrollbar target="seek" x="10" y="same" w="300" src="control-seek-disabled-white.png" hideifunused="1" />
</else>

</div>

[Werner]

Das Gleiche in den Dateien:
playlist.xml
playlist-white.xml

workspace.xml (Ist besonders Wichtig, würde ich als Erstes machen - Ist der Bereich unter den Covern, wo Künstler / Album / Lied behandelt wird)
workspace-white.xml (Ist besonders Wichtig, würde ich als Erstes machen - Ist der Bereich unter den Covern, wo Künstler / Album / Lied behandelt wird)

Also alle Stellen anpassen wo fgcolor oder bgcolor oder hicolor steht

[Werner]

@ Kann man in den Container wo die Alben drin sind auch ein Hintergrund Bild einfügen?

Soweit ich weiß, geht das geht leider nicht .
Man kann aber den Randbereich so anpassen das es trotzem ganz gut aussieht :)

screenshot.png (494.36 KiB) Viewed 10256 times

[Blondy59]

Danke werde ich morgen gleich mal versuchen.