# Skin Development! **URL:** \ **Category:** Theme\ **Tags:** launcher, theme\ **Created:** [July 27, 2018, 9:51pm UTC](https://forum.clockworkpi.com/t/skin-development/931 "2018-07-27T21:51:49Z")\ **Posts on this page:** 20\ **Page:** 1
**Author:** ![xstrex](https://yyz1.discourse-cdn.com/flex029/user_avatar/forum.clockworkpi.com/xstrex/32/467_2.png) [@xstrex](https://forum.clockworkpi.com/u/xstrex)\ **Post date:** [July 27, 2018, 9:51pm UTC](https://forum.clockworkpi.com/t/skin-development/931/1 "2018-07-27T21:51:49Z")
Started doing some initial tinkering with custom skins! No where near complete, but figured I’d share what I’ve got so far… Once I have something more portable, and polished, I’ll link it here. ![IMG_0986](https://cdck-file-uploads-canada1.s3.dualstack.ca-central-1.amazonaws.com/flex029/uploads/clockworkpi/original/1X/13b0cd3df282690223e4ef028052c31acb652e6b.jpg) ---
**Author:** ![DEVINisMETAL](https://yyz1.discourse-cdn.com/flex029/user_avatar/forum.clockworkpi.com/devinismetal/32/482_2.png) [@DEVINisMETAL](https://forum.clockworkpi.com/u/DEVINisMETAL)\ **Post date:** [July 27, 2018, 9:55pm UTC](https://forum.clockworkpi.com/t/skin-development/931/2 "2018-07-27T21:55:37Z")
@xstrex looking sick! ---
**Author:** ![eashwar](https://yyz1.discourse-cdn.com/flex029/user_avatar/forum.clockworkpi.com/eashwar/32/509_2.png) [@eashwar](https://forum.clockworkpi.com/u/eashwar)\ **Post date:** [July 27, 2018, 10:40pm UTC](https://forum.clockworkpi.com/t/skin-development/931/3 "2018-07-27T22:40:34Z")
This looks awesome xstrex! Looking forward to trying this out on mine. ---
**Author:** ![QuantumKraken](https://yyz1.discourse-cdn.com/flex029/user_avatar/forum.clockworkpi.com/quantumkraken/32/11986_2.png) [@QuantumKraken](https://forum.clockworkpi.com/u/QuantumKraken)\ **Post date:** [July 27, 2018, 11:05pm UTC](https://forum.clockworkpi.com/t/skin-development/931/4 "2018-07-27T23:05:32Z")
Have you attempted adding the other color names from home/cpi/launcher/sys.py/UI/skin\_manager.py to the skin config file yet? High, Text, Front, URL, Line, TitleBg, Active, White are all of them ---
**Author:** ![xstrex](https://yyz1.discourse-cdn.com/flex029/user_avatar/forum.clockworkpi.com/xstrex/32/467_2.png) [@xstrex](https://forum.clockworkpi.com/u/xstrex)\ **Post date:** [July 27, 2018, 11:12pm UTC](https://forum.clockworkpi.com/t/skin-development/931/5 "2018-07-27T23:12:26Z")
Awesome, thanks man, good catch, testing them now! That helped a lot! - without knowing what twm.mod was doing, I had no way of knowing if the skin\_manager was looking for colors in .twmrc or what… Anyways, more pictures coming! ---
**Author:** ![xstrex](https://yyz1.discourse-cdn.com/flex029/user_avatar/forum.clockworkpi.com/xstrex/32/467_2.png) [@xstrex](https://forum.clockworkpi.com/u/xstrex)\ **Post date:** [July 27, 2018, 11:40pm UTC](https://forum.clockworkpi.com/t/skin-development/931/6 "2018-07-27T23:40:09Z")
I know the colors look a little lame atm, but this is progress! Thanks for the help @QuantumKraken. Here’s the key I’ve been looking for: [Colors] High = #f44242 (unknown) Text = #f48f41 (Actual text, on title bar) Front = #f4df41 (volume OSD) URL = #41f455 (unknown) Line = #41f4f4 (lines at top and bottom of screen, maybe?) TitleBg = #000000 (the title bar) Active = #4164f4 (unknown) White = #494949 (main background color) ![IMG_0988](https://cdck-file-uploads-canada1.s3.dualstack.ca-central-1.amazonaws.com/flex029/uploads/clockworkpi/original/1X/f21371fed157f2b89fa11d7b3f023c87bcf11e06.jpg) Next image will be much better (now that I know what most of the conf file names represent)! EDIT: IF anyone figures out my "unknown"s above, please let me know… ---
**Author:** ![xstrex](https://yyz1.discourse-cdn.com/flex029/user_avatar/forum.clockworkpi.com/xstrex/32/467_2.png) [@xstrex](https://forum.clockworkpi.com/u/xstrex)\ **Post date:** [July 28, 2018, 12:44am UTC](https://forum.clockworkpi.com/t/skin-development/931/7 "2018-07-28T00:44:49Z")
Think I finally got this figured out, and looking a bit better! ![IMG_0990](https://cdck-file-uploads-canada1.s3.dualstack.ca-central-1.amazonaws.com/flex029/uploads/clockworkpi/original/1X/33be403da7ddb4c5a5f6acc06671b64553ef71c1.jpg) ![IMG_0991](https://cdck-file-uploads-canada1.s3.dualstack.ca-central-1.amazonaws.com/flex029/uploads/clockworkpi/original/1X/d1449b7e8cfdd5e18a3114b3acf166ac790b1e97.jpg) I’ll get it packaged up, and posted here in a moment. Applying the skin is a manual process, requiring ssh access, hopefully that changes soon! ---
**Author:** ![xstrex](https://yyz1.discourse-cdn.com/flex029/user_avatar/forum.clockworkpi.com/xstrex/32/467_2.png) [@xstrex](https://forum.clockworkpi.com/u/xstrex)\ **Post date:** [July 28, 2018, 2:48am UTC](https://forum.clockworkpi.com/t/skin-development/931/8 "2018-07-28T02:48:32Z")
…and done. Apparently I’ve got too much free time on my hands! > **[xstrex/ClockworkPi-Skins](https://github.com/xstrex/ClockworkPi-Skins)** > > Skins for the ClockWorkPi Launcher. Contribute to xstrex/ClockworkPi-Skins development by creating an account on GitHub. Would someone please test this process, and let me know if it works? It should! ---
**Author:** ![QuantumKraken](https://yyz1.discourse-cdn.com/flex029/user_avatar/forum.clockworkpi.com/quantumkraken/32/11986_2.png) [@QuantumKraken](https://forum.clockworkpi.com/u/QuantumKraken)\ **Post date:** [July 28, 2018, 7:15am UTC](https://forum.clockworkpi.com/t/skin-development/931/9 "2018-07-28T07:15:45Z")
``` cd /home/cpi/apps/launcher/skin git clone https://github.com/xstrex/CWP-Skin-Blue.git . ``` Doesn’t clone “blue” into the directory because the directory is not empty. Otherwise, this works great! Just copy “blue” into the skins folder and adjusting a config is a snap! ---
**Author:** ![xstrex](https://yyz1.discourse-cdn.com/flex029/user_avatar/forum.clockworkpi.com/xstrex/32/467_2.png) [@xstrex](https://forum.clockworkpi.com/u/xstrex)\ **Post date:** [July 28, 2018, 9:54am UTC](https://forum.clockworkpi.com/t/skin-development/931/10 "2018-07-28T09:54:11Z")
Thanks, I’ll look into fixing this in the morning. EDIT: Updated the instructions to reflect the change. ---
**Author:** ![Michel\_Jones](https://yyz1.discourse-cdn.com/flex029/user_avatar/forum.clockworkpi.com/michel_jones/32/439_2.png) [@Michel\_Jones](https://forum.clockworkpi.com/u/Michel_Jones)\ **Post date:** [July 28, 2018, 2:24pm UTC](https://forum.clockworkpi.com/t/skin-development/931/11 "2018-07-28T14:24:45Z")
Is it possible to make a tape inspired simple music player like this? ![images](https://canada1.discourse-cdn.com/flex029/uploads/clockworkpi/original/1X/47f8f64fc224b8996eb8ec35120b0cf352c37720.jpeg) with the tapes turning. ![images](https://canada1.discourse-cdn.com/flex029/uploads/clockworkpi/original/1X/ad296798577041456d3f28a7ba67b80a346996b3.png) ---
**Author:** ![Metalcory](https://yyz1.discourse-cdn.com/flex029/user_avatar/forum.clockworkpi.com/metalcory/32/409_2.png) [@Metalcory](https://forum.clockworkpi.com/u/Metalcory)\ **Post date:** [July 28, 2018, 5:39pm UTC](https://forum.clockworkpi.com/t/skin-development/931/12 "2018-07-28T17:39:32Z")
WOOOOW good job I really like it! I´ll try to make one by myself! when I have some time in my life ☹ Thanks for diggin´\<3 ---
**Author:** ![QuantumKraken](https://yyz1.discourse-cdn.com/flex029/user_avatar/forum.clockworkpi.com/quantumkraken/32/11986_2.png) [@QuantumKraken](https://forum.clockworkpi.com/u/QuantumKraken)\ **Post date:** [July 28, 2018, 7:40pm UTC](https://forum.clockworkpi.com/t/skin-development/931/13 "2018-07-28T19:40:43Z")
Hey, what all doesn’t the skin manager change? I’m thinking of trying to edit the scripts in home/cpi/launcher/sys.py/UI to hook into the skin manager over the next couple days or so. Like, the color of the scroll bar in settings is located in scroller.py, and can’t be modified with the config file. The more we know we can’t change the more we know we need to hunt down. 😈 ---
**Author:** ![xstrex](https://yyz1.discourse-cdn.com/flex029/user_avatar/forum.clockworkpi.com/xstrex/32/467_2.png) [@xstrex](https://forum.clockworkpi.com/u/xstrex)\ **Post date:** [July 28, 2018, 8:52pm UTC](https://forum.clockworkpi.com/t/skin-development/931/14 "2018-07-28T20:52:24Z")
It’s probably possible to make it look like that, but that’s outside of the scope of a skin. Also any kind of animation would have to be coded by hand, as all the images used in the UI are (non-animated) PNGs. ---
**Author:** ![xstrex](https://yyz1.discourse-cdn.com/flex029/user_avatar/forum.clockworkpi.com/xstrex/32/467_2.png) [@xstrex](https://forum.clockworkpi.com/u/xstrex)\ **Post date:** [July 28, 2018, 9:11pm UTC](https://forum.clockworkpi.com/t/skin-development/931/15 "2018-07-28T21:11:55Z")
Great idea! Please let me know how this works out, and also document what you change, so we can make it scriptable/portable/repeatable! - Like you said, the scroll bar for sure; that one has been bugging me. - I’m still trying figure out if the font color (not font type) can be changed. - Also the confirmation text box… Like when you select Power Off, and it asks “Are you sure?” That pop-up color, and text, doesn’t seem to be effected by the skin colors. - The loading, and splash screens. As a note; all images and graphical elements, like icons, are png’s, and need to be changed by hand, but that’s really part of the skin, IMO. My blue skin is only using the following options in the skin.conf file: ```auto Text = #c1c1c1 Front = #c91010 Line = #2d2d2d TitleBg = #111111 White = #000000 ``` I’d really like to know what these map to: ```auto High URL Active ``` In my testing, I mapped them to some random colors (noted previously) and applied the skin, but those colors never showed up in the UI, so we might need to dig through the launcher code to find them, and what they map to. ---
**Author:** ![xstrex](https://yyz1.discourse-cdn.com/flex029/user_avatar/forum.clockworkpi.com/xstrex/32/467_2.png) [@xstrex](https://forum.clockworkpi.com/u/xstrex)\ **Post date:** [July 28, 2018, 9:14pm UTC](https://forum.clockworkpi.com/t/skin-development/931/16 "2018-07-28T21:14:10Z")
Any suggestions on what color skin I should make next? I’m typically a fan of the darker pallet, being a Linux console junkie, and all… ---
**Author:** ![eashwar](https://yyz1.discourse-cdn.com/flex029/user_avatar/forum.clockworkpi.com/eashwar/32/509_2.png) [@eashwar](https://forum.clockworkpi.com/u/eashwar)\ **Post date:** [July 29, 2018, 3:49am UTC](https://forum.clockworkpi.com/t/skin-development/931/17 "2018-07-29T03:49:31Z")
I think a red theme would be pretty cool! I’m a huge fan of the Xenoblade Chronicles series, so a “Xenoblade Red” scheme that I’d like to see would use all the colors from [this image](https://xenobladechronicles2.nintendo.com/assets//img/media/downloads/1536x2048_Tablet_Xenoblade_Chronicles_2_Wallpaper02.jpg). I plan on making this next weekend since I’m a little busy this week, but if you would like to make it that would be cool! (P.S. what vim plugins do you use?) ---
**Author:** ![hpcodecraft](https://yyz1.discourse-cdn.com/flex029/user_avatar/forum.clockworkpi.com/hpcodecraft/32/663_2.png) [@hpcodecraft](https://forum.clockworkpi.com/u/hpcodecraft)\ **Post date:** [August 2, 2018, 7:49pm UTC](https://forum.clockworkpi.com/t/skin-development/931/18 "2018-08-02T19:49:04Z")
Thanks for the Github repo and your documentation! I’ve just installed your skin and it works 🙂 Instead of fiddling with config.py, I took a different approach though: symlinks. I renamed the default skin folder to “original” first: > cd ~/apps/launcher/skin/ > mv default original Then I created a symlink to have the default path again: > ln -s original default The launcher works with this, too. I’m not sure if the config.py is overwritten by launcher updates, so this way you’ll keep your skin even if that should be the case. Also, potentially upcoming skin manager apps would only have to deal with deleting and recreating the link and not modify config files. Just an idea 😉 Off to developing my own skin now… ---
**Author:** ![xstrex](https://yyz1.discourse-cdn.com/flex029/user_avatar/forum.clockworkpi.com/xstrex/32/467_2.png) [@xstrex](https://forum.clockworkpi.com/u/xstrex)\ **Post date:** [August 2, 2018, 8:00pm UTC](https://forum.clockworkpi.com/t/skin-development/931/19 "2018-08-02T20:00:06Z")
Thanks for the input man! Yea I thought about using links, instead of editing config. I’m sure that would work out just fine. I just didn’t know what direction the devs were going with the launcher/skin-manager, nor did I want to step on their toes, and make something just to have to reengineer it later. Anyways. Yes the config.py gets overwritten after new updates get applied. Would love to try out your skin, once it’s ready! I should have some time tonight to bust out a Red one, think it would look pretty slick! Also, currently the skin is quite large because of the ttf’s, I’ve thought about linking those to the ‘default’ skin, to save space, but wasn’t sure the links would survive packaging and redistribution. Let me know if you come up with a better solution! ---
**Author:** ![xstrex](https://yyz1.discourse-cdn.com/flex029/user_avatar/forum.clockworkpi.com/xstrex/32/467_2.png) [@xstrex](https://forum.clockworkpi.com/u/xstrex)\ **Post date:** [August 2, 2018, 8:00pm UTC](https://forum.clockworkpi.com/t/skin-development/931/20 "2018-08-02T20:00:52Z")
Btw @hpcodecraft, fun handle! Lol [Next page](https://forum.clockworkpi.com/t/skin-development/931.md?page=2)