banner logo

Remote Potato Theming Guide

General Info
About Themes
When Remote Potato renders a web page out to a client, it assembles the page using a series of 'template' files. These files are located within a subfolder of where the main Remote Potato application is located. To display this folder, go to the Remote Potato settings window, select the 'Appearance' tab, and click the blue hyperlink 'Show Themes Folder' in the bottom-right of the window.

An explorer window will appear, containing the currently installed themes, each of which is within its own sub-folder.
Creating a new theme
The easiest way to create a new theme is to make a duplicate copy of the 'custom' theme folder. Leave this copy as a subfolder of the main 'skins' folder, but rename it from 'custom' to the name of your new theme, e.g. 'Punky'. If you restart Remote Potato Server, your new theme will now appear as a selection within the drop-down menus.
Customising your theme
To change the appearance of your theme, all that is needed is a basic text editor and an understanding of how Remote Potato uses the template files to assemble the resulting webpage. Careful with your editing, as removing certain sections of the files, especially those enclosed by **DOUBLE STARS**, can break the functionality of Remote Potato.

Read on to gain an understanding of which files do what, and how to edit them. A basic understanding of HTML / CSS is also necessary.
A Guide to the Template Files
The master page
The most important file is masterpage.htm, which Remote Potato uses as the basis for every single page that it spits out. Take at look at this now, you will notice it is a complete HTML document, with three placeholders that get replaced when the page is generated. Placeholders within Remote Potato templates denoted by **DOUBLE ASTERISKS AROUND THEIR NAMES** like that.

The placeholders within masterpage.htm are:

**PAGECONTENT** : This is where the main content of each page will go.
**PAGETITLE** : This is the title of each page
**TIMEANDVERSIONSTRING** : This is used within the footer to output the current time, and the version of the app being used. Additionally, you may use this placeholder anywhere you like within your other template files.

You can alter the HTML of this page in any way you wish, providing that you stick to the basic house rules, and of course ensure the placeholders are somewhere within the page so that the content can be displayed!

Any files referenced by this page with a URL beginning /skin/... reside within your custom skin folder and therefore can be edited by you, for example the stylesheet styles.css which is linked to at the top of the master page. You may wish to change the name of this stylesheet, edit the sheet or link to an additional stylesheet(s).
The Theme Settings File
In the top-level folder of your theme, you will find a file called settings.xml which stores the main options for your theme. These currently are:

epgtimespan: This sets the width of the epg grid, in minutes.

epgzoom: An integer from 1-10 which dictates the 'zoom level' of the epg. Examples include:
1 - 60 pixels/hour
2 - 120 pixels/hour
4- 240 pixels/hour
Additional templates files
In addition to the master page file, you will find other .htm files within the folder. These are inserted as required by Remote Potato as part of the **PAGECONTENT** placeholder, when users travel to various pages. Within these files are additional placeholders which are themselves populated with content.

A full list of the files is coming soon - most should be self-explanatory.
Remote Potato tags its content within numerous css style tags which you can edit to change the appearance of almost anything you like.

Some common style tags used are:
  • div.pagetitle: The title at the top of each page.
  • .showproperties: The box containing the title, description and other information about a TV Show.
  • .showtitle, .showchannel, .showstarttime, .showdescription: The text containing the show details in the .showproperties box mentioned above.
  • #mainmenu: The main menu itself.
  • ul.scheduledrecordingdaygroup: Part of the list of scheduled upcoming recordings referring to a specific day.
  • .upcomingwillrecord, .upcomingwontrecord: Within a list of scheduled recordings, the list item elements are tagged with this css class depending upon whether they will record or not
There are lots more, have a look through the default theme's stylesheets to find more styles that you can customise.
Special Considerations
Linking to your skin files
To reference other files (such as graphics) within your skin folder, use the URL /skin/... e.g. /skin/background.jpg
You can create subfolders too and use /skin/folder/file.txt although this is currently untested. For example,

<IMG SRC='/skin/fancyborder.png'>

...will link to the file fancyborder.png within your own skin directory.
URLS Referencing application files
You will notice some URLs within the provided templates of the form /static/...
These reference standard application files outside of the skin structure which cannot themselves be altered. These files may, however, be referenced wherever you would like. Examples include: the white up/down arrows from the EPG, the banner from the top of the master page within the default theme.

For example, to insert a white up arrow anywhere in your skin, use:

<IMG SRC='/static/images/epgwhiteuparrow.png'>

Making the EPG wider
A frequently asked question is how to make the EPG wider. This can achieved by the following steps:

1. Edit the file settings.xml file within the theme to alter the EPG width / zoom level. See here.

2. Edit the file epg-grid.css to alter the container width:

width: 800px;
overflow: hidden;
border: none;
font-size: 0.8em;
margin: 0px;

STOP HERE if you're working on a brand new theme, i.e. a copy of the 'Custom' theme.
If you're working on a copy of the included 'Default' theme, it has its own custom css which also needs to be modified. You'll need to perform the following two additional steps:

3. Edit the template file page_viewepg_grid.htm which has a style override for the EPG size near the top:

#container{ width: 790px; }
#headerbox{ width: 798px; }

4. Edit the file styles.css to change the main container width:

-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border: solid 1px white;
padding: 5px;
margin-left: auto;
margin-right: auto;
width: 360px;
overflow: hidden;
background-image: url('/skin/images/transparentgray40.png');

If you use a copy of the 'blank canvas' Custom theme, you will only have to do the first of the above two steps.
Some Rules
There aren't many rules, but we respectfully ask that, as Remote Potato is a free app, you observe these when create themes that you plan to distribute, or request to be included with the app:
  • You should display the text (or as a graphic) 'Remote Potato' prominently and legibly at the top of each page.
  • You should display the footer text, legibly, as provided in the default theme, at the bottom of each page.