How can I change the background of the Transparent Skin?

 It's easy to customize the Transparent Skin and give a branded experience to your users.

Here're the steps you need to customize the Skin by changing it's background.

1. Log in to the Control Center and go to Customize > Skins.

2. Upload the background image using the Manage Images form.

Use the Upload an Image > Choose File, then press Upload.

Try to use an image which is at least 1280x2000 pixels because the registration page is long vertically.

3. Click on the View Custom Files link. Your file should be listed there if the upload was successful.

Each operator has it's own image directory on our server. Here you can find out where your images are located. There is a line:

YOUR CUSTOM IMAGES IN FOLDER: /skinimages/your_operator_username/

Please note that your_operator_username is in LOWERCASE. Copy this path (/skinimages/your_operator_username/), you will need it. Now click on Back to Skins.

4. Create a New Skin based on the transparent skin. You can do this in the Customize > Skins menu. Enter a name of a new skin, select Transparent as 'based on', then press 'Create a New Skin'.

5. Edit style.css. If you edit this Skin, you can find the Skin files. Search style.css and press Edit.

6. Edit the background element of the css. Find this line: 

background: #24bfc2 url(/customer/customer_images/basic/tr_background.jpg)  top center;

Replace the background colour and the url. Path to your URL is what you have copied in Step 3 (your custom images folder). So after editing, the line should look something like this:

background: #564a34 url(/skinimages/your_operator_username/room.jpg)  top center;

Where your_operator_username is your Operator Username in lowercase, and room.jpg is the filename which you have uploaded in Step 1 (case sensitive!). Try to choose a background colour which is similar to the background image colour.

Click on Save and Back to File List.

7. You can test the Skin by using the 'Test this Skin with' option on the Skin Editor page.

8. If you like the result, you just have to assign this Skin to be used with your location. Go to Customize > Skins and use the Assign link. ANother option is to modify your location in the Manage > Locations > click on name > Modify Hotspot Data and click on Splash Page Settings where you can select your newly created Skin.

YOU'RE DONE!