• Recent
  • Tags
  • Popular
  • Home
  • Docs
  • Register
  • Login
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.5k 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.
  • M
    mattrixk @meleu
    last edited by 18 Aug 2016, 03:01

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

    Why not put this info in the wiki?

    2 main reasons:

    1. It seemed kinda presumptuous.
    2. I don't know how.

    If someone in charge says it's okay and shows me how, it's probably a better place for it.

    My ES themes: MetaPixel | Spare | Io | Indent

    H 1 Reply Last reply 18 Aug 2016, 03:19 Reply Quote 0
    • H
      herb_fargus administrators @mattrixk
      last edited by 18 Aug 2016, 03:19

      @mattrixk if it were to be added anywhere on the wiki it would be here:

      https://github.com/retropie/retropie-setup/wiki/themes

      With it being a wiki anyone can edit it as long as they are signed into their github account. If you're going to put it there you can create a heading perhaps after the theme gallery on creating a theme tutorial or if it's easier for you you can just put a link to this thread on there

      There are also docs on creating themes which in hindsight I should have added to the wiki page as well.

      For reference: https://github.com/Aloshi/EmulationStation/blob/master/THEMES.md

      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 1
      • H
        herb_fargus administrators
        last edited by 18 Aug 2016, 03:23

        update: https://github.com/RetroPie/RetroPie-Setup/wiki/Themes#creating-your-own-emulationstation-theme

        I think I'm going to redo the theme gallery tables too, the formatting is all off.

        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

        M 1 Reply Last reply 18 Aug 2016, 03:39 Reply Quote 0
        • M
          mattrixk @herb_fargus
          last edited by 18 Aug 2016, 03:39

          @herb_fargus

          Thanks for putting the link to the forum post in the wiki. I'd like to move the whole post over to the wiki (mainly so it's all in one place and not multiple posts on a thread, and for ease of updating).

          Since it's so long would it be better to be its own entry, rather than being part of the 'Themes' entry? I see 'Themes' as how to use them, whereas my tutorial is how to create one.

          How do I create a wiki page called "create-themes" and then put it in the side nav with the title "Create Your Own Emulationstation Theme" underneath the "Emulationstation Themes" link?

          I used https://github.com/Aloshi/EmulationStation/blob/master/THEMES.md extensively while learning to make themes and it is indispensable, but mine is more of a step-by-step how-to guide.

          My ES themes: MetaPixel | Spare | Io | Indent

          H 1 Reply Last reply 18 Aug 2016, 03:55 Reply Quote 1
          • H
            herb_fargus administrators @mattrixk
            last edited by 18 Aug 2016, 03:55

            @mattrixk I suppose it is kinda massive.

            you can just create a new wiki page and call it Creating Your Own EmulationStation Theme just so the page name is standard in the list of wiki pages.

            Then you can edit the sidebar after its finished to include a link to that page.

            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 1
            • Z
              Zigurana
              last edited by 18 Aug 2016, 04:08

              @mattrixk :
              This is awesome! Great work!

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

              1 Reply Last reply Reply Quote 0
              • M
                mattrixk
                last edited by 18 Aug 2016, 04:46

                Okay, so I moved the tutorial over to the wiki.

                @herb_fargus Cheers for the wiki coaching. I was hesitant to use it because I was worried I would break something. I edited the 'Themes' post to point the wiki page instead of this forum post. Did you end up putting the MetaPixel theme into the system after I renamed it to es-theme-metapixel? Could that be added to the "Themes" page too?

                @Zigurana Thank you. How is your time away? I'd like to ask you questions about getting the Child-Friendly icons working once you get back in front of your computer. I filed it as an issue on your GitHub page with some more information.

                My ES themes: MetaPixel | Spare | Io | Indent

                H 1 Reply Last reply 18 Aug 2016, 04:54 Reply Quote 0
                • H
                  herb_fargus administrators @mattrixk
                  last edited by 18 Aug 2016, 04:54

                  @mattrixk yes metapixel is in the theme installer. and yes if you have screenshots for it feel free to add them to the theme gallery on the wiki page, preferably one of the system view and one of the detailed (scraped) view. I just updated it so it should be simpler to add new images.

                  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

                  M 1 Reply Last reply 18 Aug 2016, 05:38 Reply Quote 0
                  • M
                    mattrixk @herb_fargus
                    last edited by 18 Aug 2016, 05:38

                    @herb_fargus said:

                    I just updated it so it should be simpler to add new images

                    I saw that. It looks good. Any particular reason you didn't show the Basic Views? Is it just because they are basic and there usually isn't much to see?

                    My ES themes: MetaPixel | Spare | Io | Indent

                    H 1 Reply Last reply 18 Aug 2016, 05:41 Reply Quote 0
                    • H
                      herb_fargus administrators @mattrixk
                      last edited by 18 Aug 2016, 05:41

                      @mattrixk yeah, most people scrape their roms so I figured it was most representative of the themes as people use them.

                      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
                      • M
                        meleu
                        last edited by 18 Aug 2016, 05:55

                        Forgive me for this comment that adds nothing: I love this community! :D
                        The tutorial in the wiki became really fine! Good job guys!

                        Oh wait! I would like to suggest a thing: @mattrixk maybe it would be nice to say in the "About This Tutorial" that it is Windows-based.

                        • Useful topics
                        • joystick-selection tool
                        • rpie-art tool
                        • achievements I made
                        M 1 Reply Last reply 18 Aug 2016, 06:06 Reply Quote 0
                        • M
                          mattrixk @meleu
                          last edited by 18 Aug 2016, 06:06

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

                          say in the "About This Tutorial" that it is Windows-based

                          Well... I do make my themes on a Windows PC, but I don't think it really matters what operating system you use.

                          • As long as you have a text editor you can edit the XML files, so you can do that in Win/Mac/Linux.
                          • If you need to create images you can use any image editor on whatever OS, or even some online image editors.
                          • I use Herb's Portable ES because I find it easier, but as long as you can SSH or FTP into your themes folder on the RPi, you can test your theme there (and I mention this in that section of the tutorial).
                          • Rookervik's ES Theme Helper program is Windows only, but I don't actually use it in the tutorial.

                          Having said all that though, I will make a note in the intro that I'm working on a Windows PC.

                          Cheers for the kind words guys (at least I'm assuming you're all guys considering your gravatars are all men's faces).

                          This tutorial took me about 3 weeks to make, working every chance I got: lunch times at work and late at night after everyone else was in bed, so if you notice anything funky, let me know.

                          My ES themes: MetaPixel | Spare | Io | Indent

                          H 1 Reply Last reply 18 Aug 2016, 06:08 Reply Quote 1
                          • H
                            herb_fargus administrators @mattrixk
                            last edited by 18 Aug 2016, 06:08

                            @mattrixk aww I didn't know other people used my portable es builds! I sorta did an update but retroarch got too fancy for my old computer and brokeded so I need to fix that before I can test it thoroughly enough to upload new binaries.

                            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

                            M 1 Reply Last reply 18 Aug 2016, 06:17 Reply Quote 0
                            • M
                              mattrixk @herb_fargus
                              last edited by 18 Aug 2016, 06:17

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

                              I didn't know other people used my portable es builds

                              Yahuh. When I first started I learned from Rookervik that you could load ES on a Windows computer, so I did some googling. I found the GitHub for ES, but it talked about having to compile it and a bunch of other stuff I didn't understand, so I looked for some videos of how to do it and came across one of yours. That video had a link to another video for a portable version where everything was done for me. The clouds parted and bright sunshine fell upon me as the angels sang... or something.

                              Anyway, thank you so much for it. It's made things so easy.

                              I actually don't need any of the RetroArch stuff, as I use fake roms created from renamed .txt files, so I can't play them anyway. I'm going to see if ES will still work propery if I remove the 'Systems' folder entirely. It's nearly 900mb of useless data (useless for my purposes anyway), so getting rid of it would be quite helpful.

                              My ES themes: MetaPixel | Spare | Io | Indent

                              1 Reply Last reply Reply Quote 0
                              • T
                                tekn0
                                last edited by 6 Sept 2016, 22:09

                                This is a really great tutorial. Thank you for taking the time to make this.

                                M 1 Reply Last reply 6 Sept 2016, 22:23 Reply Quote 0
                                • M
                                  mattrixk @tekn0
                                  last edited by 6 Sept 2016, 22:23

                                  @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 25 Dec 2016, 13:39

                                    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 :/.

                                    M 1 Reply Last reply 26 Dec 2016, 04:19 Reply Quote 0
                                    • M
                                      mattrixk @winnetouch
                                      last edited by 26 Dec 2016, 04:19

                                      @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 26 Dec 2016, 08:12 Reply Quote 0
                                      • W
                                        winnetouch @mattrixk
                                        last edited by winnetouch 26 Dec 2016, 08:12

                                        @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

                                        M 1 Reply Last reply 26 Dec 2016, 09:58 Reply Quote 0
                                        • M
                                          mattrixk @winnetouch
                                          last edited by 26 Dec 2016, 09:58

                                          @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 26 Dec 2016, 11:48 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.

                                            This community forum collects and processes your personal information.
                                            consent.not_received