Make VR Toolbox your SteamVR Home and add Clocks and Game shortcuts!

Learn how to create game links from your Steam Library and then add them to VR Toolbox. Also, add a couple of working digital clocks to your room!

Using Home Loader to create your Game Pages

Create a Custom Steam Shortcut page / Set your SteamVR Home to VR Toolbox

Disclaimer: This utility is an offshoot of another project. The dev was kind enough to tweak it for my uses and allow me to talk about it for your benefit. He does not support it, nor is he affiliated with VR Toolbox in any way.

Because of this, we will be using Version .48 ONLY, as this best suits our needs.

Go to https://github.com/CogentHub/HomeLoader and scroll down to examine the Readme pictures. This will give you an idea of what you are about to get into. We're just going to deal with "Normal Mode", which means that we will concentrate on "Settings menu [Normal Mode]" and "Home Loader Library". Play with the rest of it at your own risk.

1. First, scroll back up and click "Download Latest Version". On this page scroll down until you get to "Home Loader 0.48" and download the zip file: "Home_Loader_0.48.zip"
   
   
2. We need to link to files in that directory, so unzip it to place it on your C: drive so that your structure looks like this: "C:\HomeLoader\Settings.exe" etc. Please note that there are no spaces in between Home and Loader.
   
   
3. Start the program "Settings.exe"
   
   
4. A "First Run" message window will pop up, read it then click "Ok". At this point it will bring up "Steam Library Folders"; the page for you to set the paths to your Steam Libraries. If you just have the one and it's in the default place, you can just close this (red button) and move on. If you have changed the default path or have additional Steam Libraries, you can add them here. You are adding the main "Steam" folder, not any subfolders. Click the red button to close this window when you are done; you can access it again later if you need to.
   
   
5. Click "Ok" in the following "Welcome..." message after reading it.
   
   This next window will be the "Settings.exe" window and it gives you the ability to choose your SteamVR Home program. This is the program that will start with SteamVR and it will load when you exit a game. Note your other choices, including "other" for choosing your own. You can restore the default SteamVR Home at any time.
   
6. Choose "VR Toolbox" and click "yes" to changing the default Home app (to return to default, select "SteamVR"). Note that this step is needed to get the program to add the extra code that VR Toolbox needs. You can return it to default, if you'd like, after creating the game pages.
   
   
7. Next, choose "Scan Library First". Go ahead and examine the window that pops up, but when you're ready, click the "Rescan Steam Library" button in the upper right. Depending on your system and the amount of games, this could take a while.
   The list that is created is not alphbetical, but if you right click on any game you can move it up or down in the list. Personally, I organize my custom lists but I don't bother organizing the main list; too many games in that list that I don't care about.
   
   
8. First thing is to make a page of ALL of your Steam VR games: go thru the list, checking the box beside each game that you want included. It may be easier to check the "All" box and uncheck the non VR ones.
   
   
9. When you're finished, look at the buttons on the bottom. For the first page of "All VR Games", we're just going to click on "Create Game Page". This will create a page called "C:\HomeLoader\WebPage\GamePage_ALL.html" that has all the games that you just chose.
   
   
10. Now note the other 2 buttons on the bottom: "Add to Custom" and "Choose TAB".
    
    • Check the boxes for the games that you want to add to your Favorites list
      
    • Choose the "Favorites" tab from the "Choose TAB" choices
      
    • Click "Add to Custom"
      
    • Select the games that you wish to move to the next tab
      
    • Select the appropriate tab from the "Choose TAB" menu and then click "Add to Custom" to add those games to that tab
      
    • Once each tab has the games that you want and you've organized them as you like, click the "Create Game Page" for each tab. This will create a page of shortcuts using the games on each of those tabs. Don't forget to check the boxes before Creating your Game Page.

Non-Steam game pages require editing to get them to work. This is covered in a later section, along with usage.

When you are done, assuming that you have created a page for each tab (except the "Non-Steam Appl." tab), you will have added the following files:
GamePage_ALL.html
GamePage_Custom_1.html
GamePage_Custom_2.html
GamePage_Custom_3.html
GamePage_Custom_4.html

At this point, you can close all of the Home Loader windows: we have our Game Shortcut Pages. Although they won't launch any games, you can double click on these files to have them open in your web browser to see what you've created. Don't worry about the background color, in VR Toolbox that will be translucent.

From now on, if you want to change your SteamVR Home program, start "Settings.exe". If you want to add more games or tweak your games lists, start "HomeLoaderLibrary.exe". If you add Steam Libraries, there's a "settings" icon in the lower right of the HomeLoaderLibrary window. I don't recommend playing with the other features in this version.

Now to make your new Game Pages accessible in VR Toolbox!

Adding these files to the "StartPage"

Adding Links to your Start Page for your new Game Pages:

Before we do anything, we have to get VR Toolbox ready to accept our new toys.

• Find VR Toolbox in your Steam Library under "software"
  
• Right click on it and click on "properties"
  
• In the window that pops up, find and click on "Set Launch Options..." and type in "-e" (without the quotes)
  
• While the window is open, note the "Betas" tab. This is where you would opt into the beta branch, if you wanted to.
  
• Close the window and move on.

------------
-If you code:
we're editing "C:\Program Files (x86)\Steam\steamapps\common\VRToolbox\utils\StartPage.html" to add the lines shown below, so that they show up in StartPage as a second line of cat.png icons with the needed links. Change the "cats.png" file names to the icons of your choice.
------------

Note: this is written assuming that you do NOT have coding experience or a code editor. We will use Notepad to edit our files. Although notepad cannot create the files we will be dealing with, it can edit them. Do NOT use Wordpad: you might end up copying and pasting unwanted formatting rules.

• Locate your VR Toolbox "utils" directory. Default should be: "C:\Program Files (x86)\Steam\steamapps\common\VRToolbox\utils". Note that this guide assumes that you installed HomeLoader under "C:\HomeLoader".
  
• In this directory, find the file called "Startpage.html", right click and then "copy".
  
• Go back to your desktop and click paste. This will give you a backup copy of your Startpage, in case of mistake.

What we are going to do now is show you how to create a way to access your html creations.

1. Find and open "notepad.exe". <press the windows key and start typing "notepad" and it should come up>
   
   • In Notepad, click File and Open and navigate to your "C:\Program Files (x86)\Steam\steamapps\common\VR Toolbox\utils" directory again.
     
   • Now you'll notice that there are no files there! Look in the lower right of the "Open" dialogue window and see where it says "Text Documents (*.txt)"? Hit that drop down box to the right of it and click "All Files (*.*)". Now you should see files.
     
   • Look for and open "Startpage.html"
   
   Don't worry about all the code, we're only going to play with a tiny section.
   
   
2. Open that window as wide as you can to make it easier to read and scroll to the bottom.
   
   There are two ways to do this. One is to edit one of the existing shortcuts to point to the file that you want. The other is to add some shortcuts. The problem with adding shortcuts is that you need to come up with icons. What we will do, because we want to allow room for adding clocks and other pages, is create a new line of icons, but we will use one of the icons that you already have. You can change it at your convenience.
   
   
3. Go all the way to the bottom of the page and look for what should be the third line from the bottom; the line that says "</div>".
   
   
4. Place your mouse pointer at the end, (above "</body>") and press "enter" a couple of times: you want a new, empty space between "</div>" and "</body>" to paste the following lines:
   
   

     
    <div class="icons">
   	<div class="tooltip"><a href="C:\HomeLoader\WebPage\GamePage_ALL.html"><img class="icon" src="images/cats.png" width="65" /> <span class="tooltiptext">Steam Library</span></a></div>
   	<div class="tooltip"><a href="C:\HomeLoader\WebPage\GamePage_Custom_1.html"><img class="icon" src="images/cats.png" width="65" /> <span class="tooltiptext">Favorites</span></a></div>
   	<div class="tooltip"><a href="C:\HomeLoader\WebPage\GamePage_Custom_2.html"><img class="icon" src="images/cats.png" width="65" /> <span class="tooltiptext">Custom2</span></a></div>
   	<div class="tooltip"><a href="C:\HomeLoader\WebPage\GamePage_Custom_3.html"><img class="icon" src="images/cats.png" width="65" /> <span class="tooltiptext">Custom3</span></a></div>
   	<div class="tooltip"><a href="C:\HomeLoader\WebPage\GamePage_Custom_4.html"><img class="icon" src="images/cats.png" width="65" /> <span class="tooltiptext">Custom4</span></a></div>
   	<div class="tooltip"><a href="C:\HomeLoader\WebPage\GamePage_Non-Steam_Appl.html"><img class="icon" src="images/cats.png" width="65" /> <span class="tooltiptext">Non-Steam Games</span></a></div>
   	<div class="tooltip"><a href="http://vrlfg.net/players"> <img class="icon" src="images/cats.png" width="65" /> <span class="tooltiptext">Steam Players Online</span></a></div>
   <div class="tooltip"><a href="https://www.twitch.tv/directory/game/Virtual%20Reality">       <img class="icon" src="images/twitch.png" width="65" />  <span class="tooltiptext">Twitch VR</span></a></div>
   <div class="tooltip"><a href="C:\Program Files (x86)\Steam\steamapps\common\VRToolbox\utils\Clock.html"><img class="icon" src="images/cats.png" width="65" /> <span class="tooltiptext">Clock1</span></a></div>
   	<div class="tooltip"><a href="C:\Program Files (x86)\Steam\steamapps\common\VRToolbox\utils\Clock1.html"><img class="icon" src="images/cats.png" width="65" /> <span class="tooltiptext">Clock2</span></a></div>
    </div>
   

   
   This will give you links to 6 pages of game shortcuts, including a link to your non-Steam games, a link to vrlfg.net and a link to the VR section of Twitch. The last 2 links are for the 2 clocks covered later. Don't worry if you haven't created pages for all of these links, yet. Having them there won't hurt anything and it makes it easy to add the appropriate pages later.
   
   
5. Save your changes
   
   
6. Close Notepad
   
   
7. Double click on Startpage.html and it should show up in your browser with an extra line of cat icons on the bottom. If you run your mouse over them, tooltips should pop up describing what they do. When you are ready to use your own icons, place your png files in the "images" directory. Then edit StartPage.html again and, in the lines we just added, modify "cats.png" to your image file names.

Now you have links to your pages!

• Go into VR Toolbox (just start SteamVR if you've already set it as default)
  
• Use the menu to "add screen" and your modified start page should be there. Bring it up and click one of your new game page links. Assuming you picked one that has links, you should have a page of your games with a grey background color.
  
• Point at your new screen with the controller
  
• Press menu and look in the left side of the window that pops up
  
• We're looking for "Transparency" and you want to use the drop down menu to set that to "alpha". That should make the background translucent.
  
• Click "menu" again and now you can move and resize your game page anyway you'd like!

Now "add screen" to add each of the pages that you created to your space!

When you're happy, save your setup and just click an icon to launch your game! If you've set VR Toolbox as your default home, you'll be returned to it when you're done!

Adding Page Titles

Adding Titles to your pages:

If you code:
We're adding 1 line each game page and adding a few lines to the "games.css" file.

As usual, we will use Notepad to edit our files.

Our files will be located in the HomeLoader WebPage directory: "C:\HomeLoader\WebPage" and each will start with "GamePage" and end with ".html"

Which files they are will depend on what files you made in the previous section with Home Loader. But they will all have the same structure. We'll assume that you've created the main page "GamePlay_ALL.html".

1. Open Notepad, navigate to "C:\HomeLoader\WebPage" and open "GamePlay_ALL.html"
   
2. The 12th line should read "</script>", place the curser behind it and press enter a couple of times. We're looking for a little space to put the following line in between '</script>' and '<div class="icons">'.
   
3. Copy and, in that space, paste the following line:
   

   <h1>All of my VR Games</h1>
   

   The text "All of my Games" may be replaced by any text that you desire, as long as it stays under 35 characters.
   
4. Click File/Save to save your changes.
   
5. Click File/Open and browse to "C:\HomeLoader\WebPage\css"
   
   • In the dialogue window, in the bottom right, where it says "Text Documents (.txt)"; change that to "All Files (*.*)"
     
   • Click "games.css" to open it for editing.
   
   
6. The 7th line is a bracket: "}" place the curser behind it and press enter a couple of times to give us space between "}" and ".tooltip {"
   
7. In that space, paste the following code:
   

   h1 {
   	color: white;
   	margin-top: 25px;
   	font-family: Segoe Script;
           text-align: center;
   	text-decoration: underline;
   	font-size: 350%;
   	text-shadow:
   		-1px -1px 0 #000,
   		1px -1px 0 #000,
   		-1px 1px 0 #000,
   		1px 1px 0 #000;	
                 } 
   

8. Click File/Save
   
9. Close Notepad
   Double click on "GamePlay_ALL.html" to show your newly titled Game Page in your default browser!
   
   To add titles to your other pages, add the same line to each html file in the same place.
   
   So, on "GamePage_Custom_1.html", edit it with Notepad and paste the same line after "</script>" and before "<div class="icons">. Except this time I changed the text to "My VR Favorites":
   

   <h1>My VR Favorites</h1>
   

   
   We've already added the css code, so nothing else is needed. Do the same thing for your other GamePlay files, changing the title text to something that you want, each time.
   
   You now have titles for each of your Game Pages!
   Keep in mind; if you use HomeLoader to make another file, it will replace your modified file with the new one, so you will have to go back and add the title to the GamePlay files, again. However, you should NOT have to redo the css file.
   
   Also, if you mess up one of these html files and can't figure out how to fix it, just use Home Loader to re-create it!
   

Adding Clocks: Part 1 html

Adding Clocks:

If you code:
We're creating 2 html files (Clock.html and Clock1.html) and a css file (clock.css) with the following code.

In one respect, this is easy. However, since neither Notepad nor Wordpad can create files in the needed formats, this gets a little tricky.

Since we can't create the type of files that we need, we will grab one and modify it, then save it as the file name that we need.

1. To start, find that file "StartPage.html" that we pasted to our desktop. Now rename it to "StartPageOld.html"
   
2. Navigate back to your VR Toolbox "utils" folder: "C:\Program Files (x86)\Steam\steamapps\common\VRToolbox\utils", right click and copy that "StartPage.html" file again, and paste it to your desktop. Now we have a file we can modify.
   
   
3. If you've been following this guide, then you already know how to bring up Notepad to edit files. In addition, by now Windows has probably learned that you like Notepad, so if you right click on the file, and follow that menu, it should have an option to "Open with... Notepad"
   However you get there, once you have your file up in Notepad (make sure it's the file on the desktop, not the one in VR Toolbox!), delete the entire contents so that you have an empty page.
   
   -----------------------
   Clock:
   
   
4. Now paste the following code:
   

   <!DOCTYPE html>
   <html>
   <head>
     <meta charset="UTF-8">
     <title>Clock</title>
     <link href="css/clock.css" rel="stylesheet" type="text/css">  
   </head>
   
   <script>
      var d = new Date();
      var weekday = new Array(7);
      weekday[0] = "Sunday";
      weekday[1] = "Monday";
      weekday[2] = "Tuesday";
      weekday[3] = "Wednesday️";
      weekday[4] = "Thursday";
     weekday[5] = "Friday";
     weekday[6] = "Saturday";
     var n = weekday[d.getDay()];
     var myTimer = setInterval(setClock,1000);
      function setClock(){	
   	   document.getElementById("clock").innerHTML=new Date().toLocaleTimeString();
   	   document.getElementById("today1").innerHTML = n;
   	   }
   </script>
   <body>
   <div id="clockback">
        <h1 id="today1"></h1>
        <center><p id="clock">HH:MM:SS</p></center>
   </div>
   </body>
   </html>
   
   

   
   
5. Now the tricky part: click "File\Save-as" and in that dialogue window:
   
   • First navigate to your "C:\Program Files (x86)\Steam\steamapps\common\VRToolbox\utils" directory
     
   • Next, give the file the name "Clock", being careful not to change the "html" extension, so that it looks like this: "Clock.html"
     
   • Next, change the "Save as type:" to "All Files (*.*)"
     
   • And, very important, change the "Encoding" to UTF-8
     
   • Now click "Save"
   
   
6. Let's do the same thing for the other clock. Go back to your Notepad file, now called "Clock.html" and delete the contents again.
   
   ----------------------------
   Clock1:
   
   
7. This time paste the following text:
   

   <!DOCTYPE html>
   <html>
   <head>
     <meta charset="UTF-8">
     <title>Clock1</title>
     <link href="css/clock.css" rel="stylesheet" type="text/css">
     </head>
   
   <script>
   function getDayStr() { 
      var y = new Date();
      var weekday = new Array(7);
      weekday[0] = "Sunday";
      weekday[1] = "Monday";
      weekday[2] = "Tuesday";
      weekday[3] = "Wednesday"
      weekday[4] = "Thursday";
      weekday[5] = "Friday";
      weekday[6] = "Saturday";
      var n = weekday[y.getDay()];
      return n;
      }
      
   function getTimeStr() {
          var dt = new Date();
          var d = dt.toLocaleDateString();
          var t = dt.toLocaleTimeString();
          t = t.replace(/\u200E/g, '');
          t = t.replace(/^([^\d]*\d{1,2}:\d{1,2}):\d{1,2}([^\d]*)$/, '$1$2');
          var time1 = t;
          return time1;
   	   /* Thank You! To ArturG from StackOverFlow for this code: https://stackoverflow.com/users/1604457/arturg */
          }
   	
   function getDateStr() {
         var dt = new Date();
         var d = dt.toLocaleDateString();
         var t = dt.toLocaleTimeString();
         t = t.replace(/\u200E/g, '');
         t = t.replace(/^([^\d]*\d{1,2}:\d{1,2}):\d{1,2}([^\d]*)$/, '$1$2');
         var date1 = d;
         return date1;
   	  /* Thank You! To ArturG from StackOverFlow for this code: https://stackoverflow.com/users/1604457/arturg */
         }
         
   var myTimer = setInterval(setClock,1000);
   function setClock(){	
   	   document.getElementById("today").innerHTML = getDayStr();
   	   document.getElementById("myDate").innerHTML = getDateStr();
   	   document.getElementById("myClock").innerHTML = getTimeStr();
   	   }
   	   
   </script>
   
   <body>
   <div id="clockback">
      <h1 id="today"></h1>
      <center><p id="myDate"></p></center>
      <center><p id="myClock">HH:MM</p></center>
   </div>
   </body>
   </html>
   
   

   
   
8. And save it again: "File/Save as...",
   
   • Navigate to "C:\Program Files (x86)\Steam\steamapps\common\VRToolbox\utils" directory
     
   • This time name it "Clock1.html"
     
   • Set the "Save as type" to "All Files (*.*)"
     
   • Set the Encoding to UTF-8
     
   • Click "Save"
   
   
   You should now have files called "Clock.html" and "Clock1.html" in your "VR Toolbox\utils" directory.
   
   Next section, we make the css files for them, pretty much the same way.
   

Adding Clocks: Part 2 css

Making the needed 'css' file:

Again, since we can't create the type of files that we need, we will grab one and modify it, then save it as the file name that we need.

1. Navigate to your VR Toolbox "css" folder: "C:\Program Files (x86)\Steam\steamapps\common\VRToolbox\utils\css".
   
2. In that folder, right click, copy the file "lightvr.ss" and paste it to your desktop. Now we have a file that we can modify, again.
   
   
3. Using Notepad, open it up and delete the contents. Paste in the following code:
   
   

   body {
       background-color: rgba(65,0,0,0.4);
       font-family: Segoe Script, sans-serif;
   	text-shadow:
   		-1px -1px 0 #FF0,
   		1px -1px 0 #FF0,
   		-1px 1px 0 #FF0,
   		1px 1px 0 #FF0;
       }
     
   #clockback {
   	background-color: rgba(0,0,0,0.8);
   	border: 3px solid red;
       }
     
   h1 {
   	text-align: center;
   	color: white;
   	}
   	
   #today {
   	margin-top: -15px;
   	margin-bottom: -230px;
   	font-size: 1500%;
   	}
   	
   #today1 {
   	margin-top: -15px;
   	margin-bottom: -75px;
   	font-size: 1000%;
   	}
   
   #clock {
   	color: white;
   	display: inline;
   	font-size: 1400%;
   	padding: 10px;
   	text-shadow:
   		-1px -1px 0 #FF0,
   		1px -1px 0 #FF0,
   		-1px 1px 0 #FF0,
   		1px 1px 0 #FF0;
   	}
   	
   #myDate {
   	color: rgba(255,140,0,1.0);
   	font-size: 900%;
   	padding: 10px;
   	margin-bottom: -320px;
   	}
   	
   #myClock {
   	color: #1CD06E;
   	font-size: 1500%;
   	padding: 10px;
   	margin-bottom: -45px;
   	}
   
   

   
   
4. Now click "File/Save as":
   
   • Navigate to "C:\Program Files (x86)\Steam\steamapps\common\VRToolbox\utils\css"
     
   • Rename the file "clock.css"
     
   • Change the "Save as type:" to "All Files (*.*)"
     
   • Set the "Encoding" to UTF-8
     
   • Click "Save"
   
   This should give you a file called "clock.css" in the css directory.
   
   
5. Back up one folder to the "utils" folder and double click the file "Clock.html". You should now have a working clock in your default browser!
   
6. Double click "Clock1.html" and verify that it works now, too.

Now, when you get into VR Toolbox in VR, select your StartPage and click on either of the two cat icons on the end. You should now have a clock in VR!


In VR:

• Point and click the menu button and change the "Transparency" to "alpha".
  
• Click menu again to return.
  
• Now go ahead and resize it and move it where you'd like.
  
• Bring up the other one and see which one you like.
  
• When you are happy, save your settings and you're good to go!

I can't change the vertical size of the web page that displays the clocks, so I usually bury the bottom in a desk or behind a window. Enjoy!

Changing the size of your game icons

Changing game icon size:

Ok, this one is fairly simple. We are just going to make a couple of small changes to our css file.

1. Navigate to your "C:\HomeLoader\WebPage\css" directory
   
2. Using Notepad again, open "games.css"
   
3. Find the 3rd paragraph down:
   

   .tooltip {
       position: relative;
       display: inline-block;
       font-size: 30px;
       line-height: 35px;
   height: 25%;
   width: 33%;
   }
   

4. Remove the last 2 lines: "height: 25%" and "width: 33%" so that it now looks like this:
   

   .tooltip {
       position: relative;
       display: inline-block;
       font-size: 30px;
       line-height: 35px;
       }
   

5. Scroll down to the last paragraph that looks like this:
   

   .icon {
     margin-top: 20px;
     margin-right: 1px;
     margin-bottom: -10px;
     margin-left: 1px;
     border-radius: 25px;
     }
   

6. We're going to add the line
   

   width: 300px;
   

   to it so that it looks like this:
   

   .icon {
     width: 300px;
     margin-top: 20px;
     margin-right: 1px;
     margin-bottom: -10px;
     margin-left: 1px;
     border-radius: 25px;
     }
   

   
   
7. Click File/Save; you are done!
   
   That line is what sets the width. "width: 300px" should give you 5 game icons across each page. Change the "300" to a larger number to give you larger icons, smaller to shrink them. The smaller they are, the more fit on a page. The tooltips should not be affected.
   
   Remember: you have to go into VR to see how they fit! If you have VR Toolbox up and running while you do this, you need to refresh the page to see the changes.
   
   Note that this will effect all icons on all pages; at this time, I don't have an easy way to change icon size on the individual pages. If there's enough need, I could probably come up with one.
   

Adding non-Steam games (including Oculus) -coming soon

You do have to have Oculus and Revive installed.

More coming soon!

Changing the new icons on the modified StartPage -coming soon

Hopefully, by the time I get to this, the devs will have added some icons that I can point to.... Please ask.

More coming soon.