RG351P themes guide

Last updated: 01NOV2020 (see Changelog for details)

One of the best things about the modified EmuELEC firmware that comes with the RG351P is that it supports a wide variety of themes, giving you the ability to really tweak and personalize the user experience. So let’s dive into how to add new themes to the RG351P, as well as how to configure them so they run just right.

Table of Contents:
Scrape box art and other media for your games
Download themes directly onto your device
How to find (and download) additional themes
Adding themes to your device
Tweaking themes for the RG351P
Adding new systems to your themes
Adjusting which systems appear in your directories
Change system order

Changelog

Scrape box art and other media for your games

The best way to take advantage of some of these unique themes is to make sure that you have saved all the media associated with your games: box art, videos, ratings, descriptions, etc. With previous systems, like the RG350, this process was complicated and tedious. Luckily, the RG351P can scrape media directly onto the device using WiFi (see my Transfer Guide to set up your WiFi connection).

The first thing you’ll want to do is set up an account with ScreenScraper.fr — it takes just a couple minutes. There are times when this scraping services is limited to registered users, so by making an account you’ll have better luck getting the service to work.

Once you’ve added your games to your device (see my Transfer Guide if you need help with that!), press START to get to the main EmuELEC menu. Go to the “Scrape” setting and adjust the settings to your liking. This is what I prefer:

Scrape from: ScreenScraper
Image source: Box 2D
Box source: None
Logo source: Wheel
Scrape ratings: Yes
Scrape videos: Yes
Scrape fanart: No
Scape manual: No
Username: (ScreenScraper username)
Password: (ScreenScraper password)

Note that for arcade games I prefer Screenshot or Title Screenshot as the image source, since most arcade games don’t have box art.

After you’ve adjusted your settings, select the “Scrape Now” button. The next screen will allow you to filter to only missing media, or re-scrape all your games. You can also specify which systems you want scraped. Once you’re ready, select the “Start” icon and let the system get to work.

Once your media has been scraped, go back to the main EmuELEC menu, select Game Settings > Update Game Lists. That will refresh your library with all of the new beautiful media.

Download themes directly onto your device

You can actually find themes to download within the EmuELEC settings. You will need to have WiFi on and connected in order for this to work. Press START on your device to bring up the EmuELEC settings, then navigate to “Updates & Downloads”. Select the “Themes” option, and you’ll see a list of themes available to download. Here are the themes that are currently listed:

es-theme-EmuELEC-carbon
Crystal-Blue
es-theme-EmuELEC-clean-style
es-theme-EmuELEC-fundamental
es-theme-EmuELEC-Roleta
es-theme-alekfull-EmueELEC
es-theme-New-EmuELEC
es-theme-supersweet-EmuELEC
es-theme-minimal-EmuELEC
es-theme-Supreme-EmuELEC
es-theme-neon-overdrive-gradient
es-theme-Spin-Master
Alekfull-ARTFLIX
Alekfull-SOLO
OGA-es-theme-minimal

How to find (and download) additional themes

The original EmuELEC is based on a number of different emulation systems, which are all based on EmulationStation. Luckily, most EmulationStation themes work very well with EmuELEC, and there is a large library to choose from thanks to years of development. To find new themes, I typically go to two different places:

• RetroPie themes doc: I will sometimes browse this listing to find some themes that I like, and then I’ll google search for its name to find its GitHub repository.
• RetroPie themes forum: Many creators will share their latest work on this forum, so it’s nice to check it from time to time.

Here are some of my favorite themes to start you on your journey of discovery, with links to download. Be sure to watch the video above if you want to see any of these themes in action. To download a theme from from GitHub, click on the green “Code” icon, then select “Download Zip”.

Adding themes to your device

Once you’ve downloaded a theme or two, let’s add them to your device.

In order to access the folder that contains the themes, you will need to set up wireless SFTP. Check out my Transfer Guide to learn how to set this up. After you are connected to your device, navigate to /storage/.config/emulationstation/themes/ and place the (unzipped) theme folder there.

On the RG351P, press START to bring up the main menu, then select UI Settings. Hover over the “Theme Set” row and press A to bring up all available themes. You should now see the theme(s) you have added. Select the theme you want to run, then press B to exit the settings. EmuELEC will restart and your new theme should now be running.

Tweaking themes for the RG351P

Many EmulationStation themes are designed for TV screens, so some of the text may appear squished or cut off on the RG351P screen. Luckily, adjusting the text is not very difficult, it just requires some experimentation.

Let’s look at the NES Box theme above as an example. As you can see from the picture (you may need to click on it to zoom), some of the text is not properly spaced: the number of players and release date on the right side are overlapping with the other text. To fix this, you need to go into the theme folder (/storage/.config/emulationstation/themes/es-theme-nes-box-master/) and find the theme.xml file. Open it up and find the portion that details this particular text:

<view name="detailed,video">
      <text name="md_lbl_releasedate, md_lbl_players, md_lbl_rating, md_rating, md_players, md_releasedate">
         <fontPath>./_inc/fonts/sans-black-cond-italic.ttf</fontPath>
         <fontSize>0.034</fontSize>
      </text>
      <text name="md_lbl_rating">
         <origin>0.5 0.5</origin>
         <pos>0.850 0.35</pos>
         <size>0.6 0.6</size>
         <color>ffffff</color>
         <zIndex>2</zIndex>
      </text>  
      <rating name="md_rating">
         <origin>0.5 0.5</origin>      
         <pos>0.83 0.35</pos>
         <size>0.05 0.05</size>
         <zIndex>2</zIndex>
         <filledPath>./_inc/images/star_full.png</filledPath>
         <unfilledPath>./_inc/images/star_hollow.png</unfilledPath>
      </rating>
      <text name="md_lbl_players">
         <origin>0.5 0.5</origin>
         <pos>0.850 0.27</pos>
         <size>0.6 0.6</size>
         <color>ffffff</color>
         <zIndex>2</zIndex>
      </text>
      <text name="md_players">
         <origin>0.5 0.5</origin>
         <pos>0.930 0.27</pos>
         <size>0.6 0.6</size>
         <color>ffffff</color>
         <zIndex>2</zIndex>
      </text>
      <text name="md_lbl_releasedate">
         <origin>0.5 0.5</origin>
         <pos>0.850 0.31</pos>
         <size>0.6 0.6</size>
         <color>ffffff</color>
         <zIndex>2</zIndex>                 
      </text>
      <datetime name="md_releasedate">
         <origin>0.5 0.5</origin>
         <pos>0.930 0.31</pos>
         <size>0.6 0.6</size>
         <color>ffffff</color>
         <zIndex>2</zIndex>        
      </datetime>
     
   </view>

So the position (“<pos>”) code that contains the “md_lbl_players” and “md_releasedate” needs to be tweaked (highlighted in bold above). The default x coordinate value is 0.93 for each of these lines, but I have found that 0.950 for the players label and 0.960 for the release date seem to look best. Note that you’ll need to restart EmulationStation, or switch to another theme and then back to your desired theme, in order to see the changes. And here we are:

Another example with this theme is that I love how it transitions to a video preview after a few moments, but I find myself waiting longer than I’d like in order to see the video. So you can go into that theme.xml file and adjust the delay in the video setting:

   <view name="video">   
      <video name="md_video">
         <origin>0.5 0.5</origin>
         <pos>0.748 0.65</pos>
         <maxSize>0.43 0.43</maxSize>
         <delay>3</delay>
         <zIndex>2</zIndex>         
         <showSnapshotNoVideo>true</showSnapshotNoVideo>
         <showSnapshotDelay>true</showSnapshotDelay>
      </video>             
   </view>

In the example above, the default delay before the video appears is 3 seconds. I found that a delay of 0.5 was perfect — just enough time to see the box art for a moment before the video kicks in. Note that some themes, like Crystal Blue, allow you to customize the theme within the EmuELEC UI settings on the device.

One last example for this NES Box theme: it contains a small marquee (logo) of the game but it only shows up at the very bottom-right of the screen. If you change the marquee code to the one below (it’s at the bottom of the theme.xml file), you’ll get a nice logo of the game below the boxart/video.

 <image name="md_marquee">
          <pos>1 1</pos>
          <origin>0.5 0.5</origin>
          <pos>0.750 .93</pos>
          <maxSize>0.2 0.2</maxSize>
          <zIndex>1</zIndex>         
       </image> 

So in summary, if you have a theme where the font is too big, small, or in a poor position, or if you have some settings you want to tweak, I encourage you to open up that theme.xml file and adjust the numbers to your liking. Just be sure to keep a copy of the original theme.xml file before you start tweaking, in case you mess things up.

Adding new systems to your theme

Some themes, like my favorite NES Box theme, don’t have graphic support for every system. For example, if you add an “amstradcpc” folder to your “Games” directory on your SD card, and load it up with Amstrad CPC games (in .dsk format), EmuELEC will detect the games and you can start playing them. But when you open up the system through the NES Box theme, it just shows the system logo, and not a nice graphic like with the other systems (see the image above).

So I’m going to walk you through how to add graphics to this particular theme, but the method is essentially the same for any theme.

So to add a graphic, the best thing to do is to go into the theme folder and see what the other graphics look like. Use wireless SFTP to access the “Storage” partition on your device, and go to /storage/.config/emulationstation/themes/es-theme-nes-box-master/ and look at some of the system folders inside. You’ll find that the graphics are all named “background_icon.png”, and they are 1920×1080 in size with a transparent background. So then logically, you’ll want to create a 1920×1080 .png file with a transparent background, with the graphic part on the right side. If you don’t have Photoshop, I recommend the free online graphic design program Photopea — it works like a charm and requires no login/account. Once you have created your graphic, you will want to save it as “background_icon.png”

Graphic above courtesy of Discord user Hocheeming

Now you want to add this updated graphic to your system. Navigate to /storage/.config/emulationstation/themes/es-theme-nes-box-master/amstradcpc on your “Storage” partition, and inside you’ll see that it doesn’t have a background_icon.png file. Add the one you just created to this folder. Next, you need to tell the theme to look for this new file. In that same folder, you’ll see a “theme.xml” file. Open that up, and you’ll see a bunch of code. Find this code:

<view name="system"> 
        <image name="logo"> 
                <path>./system.png</path> 
        </image> 
</view> 

This code basically tells the theme to only look for the system logo, but not the fancy graphic you just created. To fix this, replace the code above with this code:

  <view name="system">
        <image name="logo">
                <path>./system.png</path> 
        </image> 
        <image name="background_icon" extra="true"> 
  <origin>0 0</origin> 
  <pos>0 0</pos> 
  <size>1 1</size> 
  <zIndex>3</zIndex> 
  <path>./background_icon.png</path> 
</image> 
  </view>

That’s it. Really, it’s not rocket science, I just grabbed that code above from a system that DID have a fancy graphic, and it worked.

So if you have a theme that is missing some graphic you want to see, or if you want to replace it with one of your own, I recommend you look around in the /storage/.config/emulationstation/themes/(name of theme) folder and see what you can find! This can also be used to move around existing images in your theme — there are a lot of extra folders and images that you may not be using, but you could always borrow those images for systems you are using.

Adjusting which systems appear in your directories

Say you like playing Neo-Geo Pocket and Neo-Geo Pocket Color games, but you want these games to show up in a single directory in EmuELEC, instead of two separate directories. At first glance, these directories are distinct: only .ngp files are recognized in the ngp folder, and only .ngc files are recognized in the ngpc folder.

You can adjust this by going into the /storage/.config/emulationstation/es_systems.cfg file and adding the .ngp or .ngc extension to the code for that respective system. So for example, here is the ngpc code from that file:

<system> 
  <name>ngpc</name> 
  <fullname>SNK Neo-Geo Pocket Color</fullname> 
  <manufacturer>SNK</manufacturer> 
  <release>1999</release> 
  <hardware>portable</hardware> 
  <path>/storage/roms/ngpc</path> 
  <extension>.ngc .NGC .zip .ZIP .7z .7Z</extension> 
  <command>/emuelec/scripts/emuelecRunEmu.sh %ROM% -P%SYSTEM% --core=%CORE% --emulator=%EMULATOR% --controllers="%CONTROLLERSCONFIG%"</command> 
  <platform>ngpc</platform> 
  <theme>ngpc</theme> 
  <emulators> 
    <emulator name="libretro"> 
      <cores> 
        <core default="true">mednafen_ngp</core>
      </cores> 
    </emulator> 
  </emulators> 
</system>

So if you added .ngp and .NGP to the <extension> line, then NGP games would also show up in your NGPC folder. I like doing that for some of these systems so I don’t have a ton of directories.

Change system order

You may have noticed that the order your systems are displayed in EmuELEC don’t really make any sense. That’s because EmuELEC sorts them in an odd format: alphabetical by manufacturer, then by system release date. The problem is that this information isn’t complete in the file that is used to make the sorting order. So let’s break down how you can change the system order.

First, using WiFi FTP, connect to your device and go open up the /storage/.config/emulationstation/es_systems.cfg file. Here you will see all of the systems listed. Let’s look at the Neo Geo Pocket Color, from the previous section:

<system> 
  <name>ngpc</name> 
  <fullname>SNK Neo-Geo Pocket Color</fullname> 
  <manufacturer>SNK</manufacturer> 
  <release>1999</release> 
  <hardware>portable</hardware> 
  <path>/storage/roms/ngpc</path> 
  <extension>.ngc .NGC .zip .ZIP .7z .7Z</extension> 
  <command>/emuelec/scripts/emuelecRunEmu.sh %ROM% -P%SYSTEM% --core=%CORE% --emulator=%EMULATOR% --controllers="%CONTROLLERSCONFIG%"</command> 
  <platform>ngpc</platform> 
  <theme>ngpc</theme> 
  <emulators> 
    <emulator name="libretro"> 
      <cores> 
        <core default="true">mednafen_ngp</core>
      </cores> 
    </emulator> 
  </emulators> 
</system>

So this device will appear after SEGA and before SONY, since that’s where the manufacturer name (SNK) falls alphabetically. If you want it to appear somewhere else, you will want to rename the manufacturer to something else — it doesn’t matter what word you use, you could use “banana” for all that it matters.

Among the devices with “SNK” as the manufacturer, this system will be organized by release date (1999). So if you want it to appear before the Neo Geo, or Neo Geo Pocket, you will want to adjust the release date as needed.

And really, that’s it. Nintendo devices are odd because the Nintendo DS doesn’t have a manufacturer or release date listed, but it’s easy enough just to add those two lines of code. So my recommendation is to go and adjust the release dates on all the Nintendo devices so they appear in an order that makes sense to you. This is how I have mine organized (by console, then handheld):

NES
SNES
N64
Game Boy
Game Boy Color
Game Boy Advance
NDS

---

Changelog

01NOV2020
– added Change systems order section

31OCT2020
– added instructions for NES Box marquee

15OCT2020
– published guide