Custom CSS (Cascading Style Sheet) can be used by designers to style the look and feel of the website. Please be advised that prior knowledge of using CSS is needed. It is also recommended to perform CSS-related edits on the Staging version of your site first, instead of the Live site. You can always publish changes in Staging to the Live version later. Also, if you are updating or replacing previous CSS styling, please remember to keep a backup of the old styling or CSS file in case you need to revert to it later on.

 


There are two ways to add your own custom styling to your website using CSS:




• Adding CSS via the Advanced Settings Options •

1 - Log in to Private Office:

  • A. Enter the URL private-office.myrealpage.com
  • B. Enter your username (the email address you used when signing up).
  • C. Enter your password (which you chose during the sign-up process).
  • D. Click Login.


2 - From the Dashboard:

  • A. Click the Website tab.
  • B. Click All Web Pages.



3 - From the pages section:

  • A. Look to the lefthand sidebar, scroll down to the Settings group, and click on the Advanced Settings link.
  • B. In the text area labeled Custom content in the <head> section, type or paste in your CSS code. Please follow the following format: <style>[Add Your CSS Here]</style>
  • C. Once you're done, click on the Save button.




• Uploading your own custom CSS file •

1 - Log in to Private Office:

  • A. Enter the URL private-office.myrealpage.com
  • B. Enter your username (the email address you used when signing up).
  • C. Enter your password (which you chose during the sign-up process).
  • D. Click Login.


2 - From the Dashboard:

  • A. Click the Website tab.
  • B. Click All Web Pages.



3 - Opening Your Web-Drive:

  • A. Click on the Images & Files tab.



4 - In the Web-Drive pop-up window:

  • A. Click on the My Web-Drive folder.
  • B. Select a folder to place your file in.
  • C. Click on the Upload... button



5 - In the Upload file(s) pop-up window:

  • A. Click on the Choose File(s) button.
  • Note: You can also drag and drop files from your computer into this window. If you choose to do this, please skip to Step 7 of this guide.



6 - From your file browser:

  • A. Locate the CSS file you want to upload and select it.
  • B. Click on the Open button.



7 - Uploading the file:

  • After the previous step, your file will upload automatically. Wait for it to complete uploading. The upload window will automatically close after uploading, and you will be taken back to your Web-Drive window.



8 - Once CSS File is Uploaded:

  • A. Locate the CSS file you have just uploaded and right-click on it. This will open up a menu.
  • B. From the options, click on the option Copy Link (URL)...



9 - In the pop up:

  • A. Copy the entire URL that is in the text box.
  • B. Click on the Close to close the URL widow.
  • C. Close the Web Drive window and return to your Private Office dashboard.



10 - From the Dashboard:

  • A. Click the Website tab.
  • B. Click All Web Pages.



11 - From the pages section:

  • A. Look to the lefthand sidebar, scroll down to the Settings group, and click on the Advanced Settings link.
  • B. In the text area labeled Custom content in the <head> section, type or paste in your CSS code. Please follow the following format: <link href="[Paste the URL you copied from step 9 here]" rel="stylesheet" type="text/css">
  • C. Once you're done, click on the Save button.




Click here to learn how to edit CSS files that have already been uploaded in the Web Drive