How to copy an App or Widget to modify it

If you want to modify the content of an App or Widget, you can by making a copy of it in your Documents\SIMRacingApps folder. Below are the basic steps to copy the widget. But, there is more information about the design of Apps and Widgets on the main menu under the Documentation section.

CSS only

If you only want to change the CSS, there's an easier way. Use the information below to look at the existing CSS file, then copy the class(es) to your Documents\SIMRacingApps\useroverrides.css file. You can also get to this file from the main menu. If you need to modify other files, read on.

Source Code

The source code can be found here, https://github.com/SIMRacingApps/SIMRacingAppsWebContent. The apps folder contains the Apps and the widgets folder contains the Widgets.

Where to download the files to

The server looks for the files in a relative manor. For example, "widgets\StandingsTop60\StandingsTop60.html". The server first looks in your "Documents\SIMRacingApps" folder, then in the server's .exe file. So, you need to duplicate this structure in your "Documents\SIMRacingApps" folder. For example, make the folders for "Documents\SIMRacingApps\widgets\StandingsTop60\nls". Then from the source code link above, navigate to the "widgets\StandingsTop60" folder and right click each file and select "save link as". Put it in the folder(s) you just created in the same relative location.

Copy all the files

It's best to copy all the files for an App/Widget because that will protect your changes from future changes.

Renaming the App/Widget

1. Rename all the files that contain the old name to the new name.
2. Edit each and every file and search and replace the old name with the new name.

Changing the Size

If you want to change the size of the widget, you must change it in 2 places (listing.json, {widgetName}.js). Then all the percentages in the CSS file will have to be adjusted to the new size.

CSS

All the CSS settings use percentages. This way the App/Widget can scale on different DPI screen resolutions.