[THEME] Color-Pi v1.2 11/05/2015

[c0ldmeth0d]

Hey,

First of all, I want to thank all devs involved in both Retropie and EmulationStation, absolutely outstanding work.

Also, full credit to @nilsbyte for all of his work on “simple” and a shout out to the creator of “piulator” @phrazelle for inspiration from his theme.

I made this theme for myself, but thought I would share it and try to give back to a community that has taught me so much.

I give you Color-Pi, please excuse the potato quality screen shots at present I have no way to screenshot EmulationStation.

All systems have been themed as of @nilsbytes last “simple” theme revision v1.4, I have also included Kodi and Apps.

If you would like a certain color PM me the color hex and I’ll hook you up when I get a chance.

If you would like to change anything to suit yourself look in the 0res folder.

I have this on RetroPie v3.0b2 – EmulationStation v2.0.1a

Hope you enjoy.

PS: If you find any errors in the theme PM me a screenshot and I’ll fix it up.

Changelog(‘Color-Pi’ v1.2)
========================

11-05-2015 v1.2
Added a ‘filter’ to enhance readability
Renamed font files for ease of customisation

19-04-2015 v1.1
v1.1 Initial Release

[attachment file=”Color-Pi V1.2 Green.7z”]

[phrazelle]

Thanks for the props! Your theme looks good. I like the dark feel to it.

From a design perspective (I’m a designer by trade, so don’t take this personally – I’ve been through too many creative reviews to let suggestions bother me – please only take this as suggestion) you would get better readability on the lists/description if you put a screened box behind them. A lower opacity white or even green (with a stroke for flair) would give some meat to the areas and might be a little easier on the eyes as far as readability goes, and hopefully not distract from the design too much.

I would hardcode elements like that into my background image.

Even just lowering the opacity of the background white texture (making the background more black than white) would help in terms of readability.

Just a suggestion! Nice work!!

[c0ldmeth0d]

Thanks for the feed back, constructive criticism doesn’t bother me and most often than not is useful.

I understand exactly what you are saying and labored over the thought of adding smoked out boxes behind the text. The reasoning behind not adding them was; I wanted the background to be easily interchangeable, so this ruled out hardcoding anything into it. The other option was to create SVG’s then scale and position them behind the text, unfortunately my SVG experience is limited to modifying existing images so that ruled that option out.

If yourself or anyone else with experience could point me in the right direction I would be happy to correct the flaws in the theme.

Another thing I was looking at was the Banner/Header, the jpg is not ideal and would prefer this also to be an SVG. You would have also noticed my laziness with the branding as well, once again a png is not ideal I feel an SVG would better suit. Ideally it would be nice to be able to place a background of any colour/contrast/shade behind the text and not have to worry about readability.

My original thought was for backgrounds, fonts and colours to be easily interchangeable for ease of customisation. That way the user isn’t locked into how I think it should look.

Your thoughts/experience are appreciated.

Cheers.

[phrazelle]

Customization is cool, but 90% of the people that grab this won’t go down that road. With Simple being out there as a solid template to work from, I would focus more on polishing yours into the design you think is best.

Idk. There is no color of text that will look good over any random image. Based on the color and complexity of the image you will inevitably run into competing design. So again, I wouldn’t worry incredibly about someone being able to modify your theme at will.

All that being said, it is a cool idea making it easy to switch around if someone was so inclined. Are you talking about throwing it out there with a bunch of fonts/backgrounds/color schemes that you put together integrated? Maybe the files are already included in the asset folders and all the necessary code is added in and commented out? Because that sounds cool too. A theme that is actually a collection of similar themes or something.

If enough people can kick out full themes (I still need to round out Piulator, and I like my new Zelda theme) maybe they could get included as options on future RP builds. Then it’s less about making a unique one out of necessity and more about having options. I think that if there were a solid chunk of preset themes out of the gate, I wouldn’t have skinned any of my builds as far as I did. I just wanted more than Simple. (Not that it sucks, I just like variety.) More selection = less urge to create something new.

Per your current design, you could fade the background a bit (put it over a black layer in a design program and drop the opacity 10-20%) and get a lot more out of the text without adding content boxes. Maybe even just losing the white (highlights) from the background image. If the white areas were more grey I don’t think it would compete with the white text as much.

As for SVG creation, I use Adobe Illustrator, but there are a plethora of resources out there online that boast SVG creation. This free program looks legit: https://inkscape.org/

I suppose SVGs aside, scalability is really only an issue in the sense of 16:9 or 4:3. Someone correct me if I’m wrong here, but as long as you are designing in those aspect ratios at the largest possible resolution (something like 1920×1080 @ 96ppi for 16:9 and 1600×1200 @ 96ppi for 4:3,) the themes should scale down to lower resolution displays in their respective aspect ratios without issue. So you could always just make 2 versions and the user would grab whichever fit their application; 16:9 or 4:3.

[c0ldmeth0d]

I’m not sure how people can restrain from customising the interface to suit themselves, for me I get as much fun out of modifying as I do from the end purpose of the machine.

I had planned on adding additional fonts, colours and backgrounds into the initial release but wanted to gauge interest before doing so, the plan was to give fonts a generic name e.g. description.ttf & gamelist.ttf so that the user could just rename a font, dump it in the asset folder restart… done. Only issue being font size as they vary greatly. The same goes for the background, as long as the new image is of the same dimension, rename to the generic name overwrite the file… done. As for the small amount of code that needs to be changed for customising colour, I would just clone and modify the xml and have the user overwrite the existing xml.

As you will see I have moved all code for visual customisation to the global xml for ease of customisation.

I considered adding the code in then commenting out, but I wanted to make it as easy as possible for those that aren’t confident in modifying the xml’s.

As for the background, you have given me an idea that may give me the result that I want without compromise. I will give it a go when I get a chance.

I have Illustrator but used Inkscape in this case, when possible I will sit with Adobe and see what I can come up with. But if you are correct in the scaling of the themes I think I would stick with png’s as from my perspective they aren’t as time consuming.

[phrazelle]

Haha, fair enough. I submitted that and was like…well, that was bs. I would totally have skinned these one way or the other. :) Your base version should be pretty sweet. I’m excited to see the changes you are implementing.

If you’re just trying to create a template for people, I think you are in a great spot. Even though Simple is fairly easy to customize, it definitely isn’t setup as a template. You might want to write a guide to go with it. If you go that route, feel free to use any parts of this pdf that I created for my first go round, or don’t. Haha, I think it’s somewhat easy to follow, but would love for someone else to add to it/get it into something usable.

http://www.instructables.com/files/orig/FB0/EFNY/I48C86QJ/FB0EFNYI48C86QJ.pdf

[c0ldmeth0d]

People that theme can’t help themselves, I wasn’t going to touch the Pi, two days in I was looking to see what could be done. I am my own worst enemy.

Okay, so everything went to plan. Readability is at a supreme, I’m pretty happy with it, just need to make a few changes and I’ll put the new one up. I just wish I could take better screen shots. The potato quality shots don’t do it justice. I might look at something to remote view the interface. Taking photos of a monitor is akin to using whiteout on the same monitor to correct typos:) IMO.

As you can see from the screenshot now you could put any image in the background and it won’t affect readability. I also reduced the opacity of the header so that you can see the whole image (although depending on feedback, I may revert).

As for the guide, I had a look at the one you posted above. It looks like a good concise guide that I wouldn’t change, there is nothing of value that I could add to enhance it further. But if I do come up with something useful I will be sure to tack it on.

Oh yeah, where is this Zelda theme you speak of… I would be interested in having a look.

[robertybob]

Have the change you made to it been implemented in the version within RetroPie? :)

[c0ldmeth0d]

Do you mean will this theme be added to RetroPie?

or

Have I updated the theme with the above changes?

[dischargehammer]

@c0ldmeth0d

Your Theme looks amazing. I’m pretty new to Retropie and think that the default simple theme is in fact a little too simple for my tastes. Do you have a new revision of your theme with better readability ?

I wonder if there is another way to browse through the systems. For example a screen that shows all the systems at once, so you wouldn’t have to search for the system you would want to play like in the simple theme.

On another note. How do you get covers for the games to show ? is there something built in to EmulationStation that visualises covers ? Or even better, is there a way to automaticly download covers (that would be absolutely awesome)?

Greetings from germany

(Sorry my english is crap but i hope i was able to make my thoughts clear)

[labelwhore]

There is a scraper in ES that will attempt to grab the box art. Hit start > scraper > then you get a bunch of options for what systems to scrape.

Thanks for this skin, btw, it looks amazing and is really easy to customize. Toss is a new BG image, change the text color and the line at the top and bam! I made mine match the Kodi Amber skin and it looks really great.

I do have one question though, is there a way to keep the background image on the system select screen from sliding left/right or fading when you’re switching between systems? I think it would look even better if that background were static, but I only see the two options in ES.

[c0ldmeth0d]

[quote=97060] @c0ldmeth0d

Your Theme looks amazing. I’m pretty new to Retropie and think that the default simple theme is in fact a little too simple for my tastes. Do you have a new revision of your theme with better readability ?[/quote]

Thank you, and yes see OP.

[quote=97060]I wonder if there is another way to browse through the systems. For example a screen that shows all the systems at once, so you wouldn’t have to search for the system you would want to play like in the simple theme.[/quote]

I think you are talking about grid view, I’m fairly certain this has been discussed but not implemented yet.

[quote=97060]On another note. How do you get covers for the games to show ? is there something built in to EmulationStation that visualises covers ? Or even better, is there a way to automaticly download covers (that would be absolutely awesome)?[/quote]

As labelwhore said there is a scraper built into ES. If you don’t get the results you are after you can do them manually.

[quote=97060](Sorry my english is crap but i hope i was able to make my thoughts clear)[/quote]

Your English is better than a vast majority of native speakers that I come across… certainly not crap.

[quote=97100]Thanks for this skin, btw, it looks amazing and is really easy to customize. Toss is a new BG image, change the text color and the line at the top and bam! I made mine match the Kodi Amber skin and it looks really great.[/quote]

Glad you enjoy it, check the fonts I have made it easier to swap them out as well.

[quote=97100]I do have one question though, is there a way to keep the background image on the system select screen from sliding left/right or fading when you’re switching between systems? I think it would look even better if that background were static, but I only see the two options in ES.[/quote]

I think this is hard coded in, I couldn’t find an option, this also drives me up the wall. If @nilsbyte could chime in we could lay it to rest and either get over it… or plead for an option to be implemented in a future release of EmulationStation.

[robertybob]

[quote=96547]Do you mean will this theme be added to RetroPie?

or

Have I updated the theme with the above changes?

[/quote]

Sorry, I meant to ask whether the attachment is the most up to date. Silly question lol.

How eager would you be to see this added to RetroPie? Could you make this happen?

[thatguyinfl]

Just wanted to say great theme and thank you for sharing this. It is exactly what my pi was missing. Love, love, love this!!! Appreciate the time you put into it. It definitely shows!

Luis

[c0ldmeth0d]

No worries, glad you are enjoying it.

[sjuarez00]

so i’ve downloaded the file to my desktop, now how do i copy it to my pi and use it?

[jm73]

Hi I cannot get this folder across to my etc/emulationstation/themes/ folder

I can even tried to set write permisions but they get override either using flasfxp or winscp

driving me crazy how can i get this them onto my pi from win 7 machine there is more than ample room on sd card raspberry pi 2 with retropi 3.0

[herbfargus]

Can you not just install it from the setup script?

[phrazelle]

In WinSCP, when you are logging into your Pi:

• Click the ADVANCED TAB on the login screen for your specific connection (make sure you are running an SCP connection)
• Under the SCP SHELL section, change the SHELL value to SUDO SU –

Now your SCP connection sends all commands/requests as a super user and you shouldn’t have issues copying files or folders over.

Hope that helps!

[jm73]

thanks for the reply

I ended up running few linux commands to chown and that worked :-)

[Author]

Posts