RG351P themes guide

Last updated: 15OCT2020 (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

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)

After you’ve adjusted your settings, select the “Scape 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.

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

Amstrad CPC without the accompanying graphic

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!

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.


Changelog

15OCT2020
– published guide

One thought on “RG351P themes guide

  1. This is brilliant! Thank you. I’d scraped videos and box art but didn’t see it. Now I see that I need to refresh to see it. I also found that videos took too long to load but didn’t realise I could adjust the time. And the fonts are a bit small to read (eg the button options at the bottom of the screen) so I’ll try to make these adjustments. 🙂

    On Fri, 16 Oct 2020 at 12:00 AM, Retro Game Corps wrote:

    > Russ Crandall posted: ” Last updated: 15OCT2020 (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 exp” >

    Like

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s