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

    Tutorial - How to make a theme for Emulationstation and RetroPie

    Scheduled Pinned Locked Moved Projects and Themes
    themeretropie themetutorialhow tohow-to
    41 Posts 10 Posters 20.4k 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.
    • mattrixkM
      mattrixk @tekn0
      last edited by

      @tekn0 No worries. I'm glad people have found it useful. I wanted to do something to contribute to this community/project, so I was happy when I found something I could add.

      My ES themes: MetaPixel | Spare | Io | Indent

      1 Reply Last reply Reply Quote 0
      • W
        winnetouch
        last edited by

        Hy. I tried using your tutorial but I get stuck at the very begining. I create all the folders copy all the images to them and then try to set the background color of the system view. I tried typing the code myself and to directly copy your code. But no matter what I do the theme color won't change. It stays white. I'm using the pi 0/1 build and I'm building it directly over FTP on my PI. Still... This should work. I've even tried using solid black background and it still doesn't work :/.

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

          @winnetouch Without seeing the code there isn't much I can do to help. Can you paste the code into a pastebin dump and give us the link?

          My ES themes: MetaPixel | Spare | Io | Indent

          W 1 Reply Last reply Reply Quote 0
          • W
            winnetouch @mattrixk
            last edited by winnetouch

            @mattrixk I realized what the problem was. I already had roms loaded in to my pi and had to create a folder and theme.xml for every single existing system that displayed, including the retropie folder. Without that the whole theme doesn't work.

            Now I'm facing another problem. In the detailed view I don't want certain metadate like to display. I want only the image, game list and game description to display. I tried making the text transparent with this:

            <text name="md_lbl_rating, md_lbl_releasedate, md_lbl_developer, md_lbl_publisher, md_lbl_genre, md_lbl_players, md_lbl_lastplayed, md_lbl_playcount">
            <color>00000000</color>
            <forceUppercase>1</forceUppercase>
            <fontPath>./_inc/fonts/Roboto-Medium.ttf</fontPath>
            <fontSize>0.04</fontSize>
            <size>0.24 0.01</size>
            </text>

            <text name="md_developer, md_publisher, md_genre, md_players, md_playcount">
            <color>00000000</color>
            <forceUppercase>0</forceUppercase>
            <fontPath>./_inc/fonts/Roboto-Light.ttf</fontPath>
            <fontSize>0.04</fontSize>
            <size>0.23 0.02</size>
            </text>
            <datetime name="md_releasedate, md_lastplayed">
            <color>00000000</color>
            <forceUppercase>0</forceUppercase>
            <fontPath>./_inc/fonts/Roboto-Light.ttf</fontPath>
            <fontSize>0.04</fontSize>
            <size>0.23 0.02</size>
            </datetime>

            But no matter what I type the text isn't transparent :P

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

              @winnetouch I don't think you can do transparency on text (but don't quote me on that). What you can do is set

              <pos>1 1</pos>
              <origin>0 0</origin>
              

              and that basically tells the top left of the text to be positioned 100% from the top and 100% from the left, effectively hiding the text under the view-able area.

              I think there are other ways to do it, but is all I can think of at the moment. I hope it helps.

              My ES themes: MetaPixel | Spare | Io | Indent

              W 1 Reply Last reply Reply Quote 0
              • W
                winnetouch
                last edited by

                Thank you. That was my plan B if transparency wasn't an option :P.

                1 Reply Last reply Reply Quote 0
                • W
                  winnetouch @mattrixk
                  last edited by

                  @mattrixk said in Tutorial - How to make a theme for Emulationstation and RetroPie:

                  @winnetouch I don't think you can do transparency on text (but don't quote me on that). What you can do is set

                  <pos>1 1</pos>
                  <origin>0 0</origin>
                  

                  and that basically tells the top left of the text to be positioned 100% from the top and 100% from the left, effectively hiding the text under the view-able area.

                  I think there are other ways to do it, but is all I can think of at the moment. I hope it helps.

                  Wel... Tried it... Doesn't work. Or maybe i put the code in the wrong place but adding that to any of the <text></text> lines crashes the template.

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

                    @winnetouch Sorry, my bad. I just had a look at the ES Themes.md documentation for the <text> element. The <pos> will work, but <text> doesn't accept the <origin> element. That is what is breaking your theme.

                    (it's been a while since I've gone through the docs)

                    My ES themes: MetaPixel | Spare | Io | Indent

                    1 Reply Last reply Reply Quote 0
                    • B
                      bumber
                      last edited by bumber

                      Hey. I'm going through the tutorial right now, but I'm stuck at the beginning. No matter what I do, the background color refuses to change.
                      I tried what @winnetouch did and made sure I had the theme.xml in each system folder, but still nothing.
                      Here's what my code looks like: http://pastebin.com/DA52rHRH

                      EDIT: If it's any help, I'm using the portable ES build on Windows. I'm running it from a USB stick.

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

                        @bumber I figured it out. There was a single extra slash in the closing tag for the theme.xml in each folder... Man, I'm bad at paying attention to details like that.

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

                          @bumber I'm glad you figured it out. I'll quite often miss a semi-colon or something and wonder why my code won't work. Sorry I didn't help earlier. I read your post as I was about to leave work. I had a quick glance over your code but nothing jumped out at me. I was going to have a proper look when I had the chance, but it appears you've beaten me to it. Good job.

                          My ES themes: MetaPixel | Spare | Io | Indent

                          1 Reply Last reply Reply Quote 0
                          • T
                            TCMOrangeJoe
                            last edited by

                            @mattrixk
                            Hey there, i'm trying to create a rick and morty based theme for a console that i'm building. I'm usually pretty goo at coding when it comes to following simple instructions like this, but i seem to be having some trouble.
                            I've followed the tut all the way to the part where it's time to start adding pictures and color, so right now it's at the point where everything is in plain font and white background. I've started the coding, but when i checked if it was working, nothing was loading. the theme name changed and i can switch back and forth from it to other themes, but it won't let me call any images. I'm doing this on the raspberry pi 3 b, so i changed the filepaths accordingly. nothing seems to work for me. Is there something really simple that I'm possibly missing?

                            Z mattrixkM 2 Replies Last reply Reply Quote 0
                            • Z
                              Zigurana @TCMOrangeJoe
                              last edited by

                              @TCMOrangeJoe At some point your theme fails to be loaded correctly, most probably the XML parsing is failing at some typo or other error. when you run emulationstation with the '--debug' flag, do you get any additional logging? That might point you into the direction where things are going awry.

                              If tetris has thought me anything, it's that errors pile up and that accomplishments dissappear.

                              T 1 Reply Last reply Reply Quote 0
                              • T
                                TCMOrangeJoe @Zigurana
                                last edited by TCMOrangeJoe

                                @Zigurana i'm really sorry, i'm not sure if i'm doing that correctly. i quit es, then typed emulationstation --debug. when i quit es again and look through the log that is now visible on screen i can't find anything that has to do with the theme not loading, just the systems that i don't have games for.

                                Z 1 Reply Last reply Reply Quote 0
                                • Z
                                  Zigurana @TCMOrangeJoe
                                  last edited by

                                  @TCMOrangeJoe it's at the beginning, so it might just have scrolled passed the buffer-lenght? If you do this on the RPi, there should also be a logfile written to disk somewhere, maybe home/.emulationstation/debug.log? (this from memory so probably wrong)

                                  If tetris has thought me anything, it's that errors pile up and that accomplishments dissappear.

                                  1 Reply Last reply Reply Quote 0
                                  • herb_fargusH
                                    herb_fargus administrators
                                    last edited by

                                    Use an XML validator to check your XML code

                                    If you read the documentation it will answer 99% of your questions: https://retropie.org.uk/docs/

                                    Also if you want a solution to your problems read this first: https://retropie.org.uk/forum/topic/3/read-this-first

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

                                      @TCMOrangeJoe You could put the code in a pastebin for us to have a look at, we might be able to spot the problem.

                                      My ES themes: MetaPixel | Spare | Io | Indent

                                      1 Reply Last reply Reply Quote 0
                                      • X
                                        xddarko
                                        last edited by

                                        @mattrixk Is the Tutorial still existing?? Thanks.

                                        mituM 1 Reply Last reply Reply Quote 0
                                        • mituM
                                          mitu Global Moderator @xddarko
                                          last edited by

                                          @xddarko It's here - https://retropie.org.uk/docs/Creating-Your-Own-EmulationStation-Theme/.

                                          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.