RetroPie forum home
    • Recent
    • Tags
    • Popular
    • Home
    • Docs
    • Register
    • Login

    [RELEASE] Modern Theme for EmulationStation (RetroPie only)

    Scheduled Pinned Locked Moved Projects and Themes
    themerookerviktoomanyzombies
    41 Posts 16 Posters 27.6k Views
    Loading More Posts
    • Oldest to Newest
    • Newest to Oldest
    • Most Votes
    Reply
    • Reply as topic
    Log in to reply
    This topic has been deleted. Only users with topic management privileges can see it.
    • RookervikR
      Rookervik Global Moderator
      last edited by

      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
      alt text
      alt text
      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

      mattrixkM B 2 Replies Last reply Reply Quote 8
      • lilbudL
        lilbud
        last edited by

        Want some help with a grid view version?

        Creator of the Radiocade: https://retropie.org.uk/forum/topic/6077/radiocade

        Backlog: http://backloggery.com/lilbud

        RookervikR 1 Reply Last reply Reply Quote 0
        • RookervikR
          Rookervik Global Moderator @lilbud
          last edited by

          @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

          1 Reply Last reply Reply Quote 0
          • RookervikR
            Rookervik Global Moderator
            last edited by

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

            B 1 Reply Last reply Reply Quote 0
            • B
              backstander @Rookervik
              last edited by

              @Rookervik
              I thought that negative space was on purpose lol

              1 Reply Last reply Reply Quote 0
              • lilbudL
                lilbud
                last edited by

                Thought I'd leave this here

                alt text

                Creator of the Radiocade: https://retropie.org.uk/forum/topic/6077/radiocade

                Backlog: http://backloggery.com/lilbud

                S 1 Reply Last reply Reply Quote 0
                • hansolo77H
                  hansolo77
                  last edited by

                  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.

                  Who's Scruffy Looking?

                  1 Reply Last reply Reply Quote 0
                  • D
                    Dochartaigh
                    last edited by 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.

                    lilbudL 1 Reply Last reply Reply Quote 0
                    • S
                      Sander2506 @lilbud
                      last edited by

                      @lilbud Nice.

                      1 Reply Last reply Reply Quote 0
                      • lilbudL
                        lilbud @Dochartaigh
                        last edited by

                        @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

                        Creator of the Radiocade: https://retropie.org.uk/forum/topic/6077/radiocade

                        Backlog: http://backloggery.com/lilbud

                        D 1 Reply Last reply Reply Quote 0
                        • D
                          Dochartaigh @lilbud
                          last edited by

                          @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?)

                          lilbudL 1 Reply Last reply Reply Quote 0
                          • lilbudL
                            lilbud @Dochartaigh
                            last edited by

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

                            Creator of the Radiocade: https://retropie.org.uk/forum/topic/6077/radiocade

                            Backlog: http://backloggery.com/lilbud

                            1 Reply Last reply Reply Quote 0
                            • mattrixkM
                              mattrixk @Rookervik
                              last edited by

                              @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.

                              My ES themes: MetaPixel | Spare | Io | Indent

                              RookervikR 1 Reply Last reply Reply Quote 0
                              • RookervikR
                                Rookervik Global Moderator @mattrixk
                                last edited by

                                @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

                                lilbudL mattrixkM 2 Replies Last reply Reply Quote 0
                                • lilbudL
                                  lilbud @Rookervik
                                  last edited by

                                  @Rookervik

                                  See if it would crash a pi. LOL

                                  I'll go grab the fire extinguisher

                                  Creator of the Radiocade: https://retropie.org.uk/forum/topic/6077/radiocade

                                  Backlog: http://backloggery.com/lilbud

                                  1 Reply Last reply Reply Quote 1
                                  • mattrixkM
                                    mattrixk @Rookervik
                                    last edited by

                                    @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.

                                    My ES themes: MetaPixel | Spare | Io | Indent

                                    RookervikR 1 Reply Last reply Reply Quote 0
                                    • RookervikR
                                      Rookervik Global Moderator @mattrixk
                                      last edited by

                                      @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.

                                      mattrixkM 1 Reply Last reply Reply Quote 0
                                      • mattrixkM
                                        mattrixk @Rookervik
                                        last edited by

                                        @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.

                                        My ES themes: MetaPixel | Spare | Io | Indent

                                        1 Reply Last reply Reply Quote 0
                                        • B
                                          BilboIII @Rookervik
                                          last edited by

                                          @Rookervik How do I change the background?

                                          RookervikR 1 Reply Last reply Reply Quote 0
                                          • RookervikR
                                            Rookervik Global Moderator @BilboIII
                                            last edited by

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

                                            B 1 Reply Last reply Reply Quote 0
                                            • First post
                                              Last post

                                            Contributions to the project are always appreciated, so if you would like to support us with a donation you can do so here.

                                            Hosting provided by Mythic-Beasts. See the Hosting Information page for more information.