[RELEASE] Modern Theme for EmulationStation (RetroPie only)

Rookervik

I've had this theme sitting around for a while. So I think I will just release it...

I wanted a theme a little closer to Confluence for Kodi and allow users to change the wallpaper to whatever they want, easily. I went through quite a few design changes, and one day while petting my doggie I looked over at the computer and saw the Windows 10 task bar. So that inspired me to clean up the design and just give it sharp lines and some accents that you can change color (more on that later).

So here's the Modern theme. Clean icons instead of long strings of text for the metadata. And a wallpaper you can (MUST) choose for yourself.

Remember, backgrounds must be copied, yourself. The theme will use only one [1] background image. So choose wisely! May change later so you can have a different background for system/detailed/basic.

alt text

Installing theme: unzip the 'modern' folder to ~/.emulationstation/themes. May also be accessed through Samba going to configs/all/emulationstation... create a themes folder, then unzip there.

For the wallpaper: Open up your RetroPie system on your Windows/Mac/Linux computer, browse to the Samba share "splashscreens" and create a folder called "modern". Go into the modern folder and throw in any portable network graphics format image you want and call it "bg.png". Done. I suggest a 1280x720 image, as they run very fast even on Pi2. 1080p images scroll a little rougher, but are still just fine.

To change color of accents, copy any of the colored modern.xml files over the modern.xml file. Only modern.xml is read by the theme.

I really like this theme, and hope you will find it useful and enjoy using your own wallpapers and color schemes!

Note: This theme is not available on the RetroPie installer because it needs a wallpaper copied by the user.

Download: Modern_v1.0.zip

lilbud

Want some help with a grid view version?

Rookervik

@lilbud I'm not going to bother with grid-view until it's complete and added to the default RetroPie setup. But in these screenshots, I can see an error with the BBC Micro svg logo. I need to go check on that. It's in Luminous and Carbon as well. :D

Rookervik

Ah, guess it's not an error. The original logo has all of that negative space on the right side as well. >.>

backstander

@Rookervik
I thought that negative space was on purpose lol

lilbud

Thought I'd leave this here

alt text

hansolo77

Since this uses only 1 background (chosen by you), does that mean it works ok with a larger collection of systems? I don't like how dark and "ugly" the default Carbon theme looks, but pretty much all the other themes except those "pixelated" ones cause that white screen of death. I'd love to use this theme with the icons for # of players, star rating, etc.

Dochartaigh

@Rookervik said in [RELEASE] Modern Theme for EmulationStation (RetroPie only):

I wanted a theme a little closer to Confluence for Kodi

Confluence is the Kodi/XBMC theme where it'll show the DVD cover art for example as the featured art (with movie description and such), AND show a larger background image (think that's called "fanart"? maybe?) that's from that same movie, right?

If you can ever get something like that to work in RetroPie you'll be my hero! I HATE having the same background for every single ROM - and would LOVE it to be similar to well, to be blunt, EVERY SINGLE THEME I've ever tried and liked from pretty much every platform out there from Netflix to Amazon to FireStick, Chromecast, RasPlex, my ~7 year old Apple TV even I think, etc. etc. etc.

Sadly I don't think RetroPie is up to that level quite yet, specifically with how horribly slow all the scrapers are for some reason (so getting them to scrape a 2nd piece of art -and one at 1080p resolution- would probably melt down their servers in a ball of fire). This is what's had me try every single theme available through the RetroPie setup menu, but I just just keep using the original theme it comes with since nothing does what I'm looking for so far.

Sander2506

@lilbud Nice.

lilbud

@Dochartaigh You should try the universal XML scraper

https://retropie.org.uk/forum/topic/5291/soft-universal-xml-scraper-v2-easy-scrape-with-high-quality-picture

Dochartaigh

@lilbud
You're the second person to recommend that to me! But I'm on a Mac so no go...also looks very complicated...also can't be run on the Pi itself....and that still won't give me a Confluence-like theme, right? (since it has nothing to do with the theme itself, just the single game box art, correct?)

lilbud

@Dochartaigh you can create a template to use a background image. It is the mix template.

mattrixk

@Rookervik: This looks great, and I said it before, but I really like the icons for the metadata. I wish I'd thought of it, because now if I do it in a theme, it will just look like I'm copying you (because I will be :P).

@Dochartaigh: I don't think what you want can be done with RetroPie. EmulationStation is built to only use one image per rom in the metadata (either a screenshot or cover photo. I'll use the word "screenshot" in the rest of this answer), so even if you did have a big "fanart" image for each rom, there would be no way to use it.

You could stretch the "screenshot" to cover the background, but it would either be distorted (wouldn't maintain aspect ratio) to fill the screen, or it could have empty space above and below, or to the left and right, depending on the orientation of the image (portrait or landscape).

One way around that would be make sure every single "screenshot" you use is at the right ratio (16x9, 320x180, etc) so the image doesn't stretch when you use it as a background image. Depending on how many roms you have, that could be a very long process.

Rookervik

@mattrixk You can actually use <size>x 0</size> or <size>0 x</size> to get images to scale to a certain size and maintain aspect. Or use a <maxSize> tag, which always keeps aspect.

Another thing you can do, is for every game, you save a full-screen screenshot. They will all load dynamically... and with a custom theme, every game would have it's own background, box art, and everything. But holy hell, that would be a lot of work. I could try to set up a preview for a single system just for fun. See if it would crash a pi. LOL

lilbud

@Rookervik

See if it would crash a pi. LOL

I'll go grab the fire extinguisher

mattrixk

@Rookervik: Yeah, I was referring to the max-size tag, but that would leave borders on either the top and bottom, or left and right of the image if the image wasn't exactly 16:9. What I would love is a min-size tag that will fill the screen and just crop off the overhang.

If you know any CSS, I liken the max-size tag to background-size: contain;, and I'd love a min-size tag that works like background-size: cover;. Maybe it's just me.

Does <size>x 0</size> work the same as max-width?

for every game, you save a full-screen screenshot

That would be a heck of a lot of work, even if you set up photoshop actions or something, especially if you have a large collection. It might be worth it if you have a special setup that has just your favourite couple of dozen games or something.

Rookervik

@mattrixk I can't remember how that works at the moment. maxSize is the tag, but I don't think you can use a zero in one of the parameters without crashing the theme. Since maxSize already crops it to that size while keeping the aspect.

mattrixk

@Rookervik: I haven't had the chance to touch any theme stuff for a while. With xmas coming up I may get the opportunity to work on some stuff.

BilboIII

@Rookervik How do I change the background?

Rookervik

@BilboIII Please read the first post of the thread, it has complete instructions.