Using CSS for a Custom design

Before starting, you will need to have a default.css file provided to you by your Account Manager. If you do not have this, please contact [e-mail] 

Once you have your default.css file, you will need to have be able to upload the file only that can be accessed by Harvest.

Your Account Manager will make an update to your account and advise when you can start making edits to your default.css file.

To make edits, please follow these steps:

1. On Chrome browser, go to the menu > More tools > Developer tools. This will load a panel either within the browser or detached.
2. Hitting F12 will do the same
   
   
   
   
3. Using the first icon on the top left of the Dev Tools, select to highlight different areas of the player to view and edit.
   
   
   
   
4. When an area is selected, you will see it highlight
5. The HTML/CSS code load up the area you are looking at. In some cases, you will need to expand the codes to drill down to find the exact item you need
6. The attribute at the bottom are editable. Just double click a few times to edit.
   there is a colour picker to help.
   
   
   
   
7. Once you are happy with the outcome, copy the styles name e.g #topNavContainer and find it in your CSS file. If it doesn’t exist, add it the the relevant header.
   Either edit the existing attributes or for new changes, add them along with the style

For additional help, https://www.w3schools.com/css/ is a great resource for learning CSS.