BlockCMS
      Back to home
      1. Support Center
      2. Advanced Features
      3. BlockCMS

      How Do I Override The Default Style Sheets (CSS)

      This article will guide you on how to add custom styling (CSS) to your website.

      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

      Login to myRealPage: 

      Click here to visit this help article to log in to your account.

      1 - Navigate to "Websites" tab:

      • Click on "Websites" to manage your website.

      2 - Click on "Site Settings" in the left hand column:

      3 - Click on "ADVANCED" in the left hand column:

      4 - Click the "EDIT" button under the "CUSTOM <HEAD> CONTENT" area:

      5 - Type or paste in your CSS code

      • Note: Please follow the following format: <style>[Add Your CSS Here]</style>

      6 - Click "OK" in the bottom right corner:

      7 - Click "SAVE ADVANCED" in the top right corner to save your changes:


      Uploading your own custom CSS file

      Login to myRealPage: 

      Click here to visit this help article to log in to your account.

      1 - Navigate to "Websites" tab:

      • Click on "Websites" to manage your website.

      2 - Click on "Images & Files" in the left hand column:

      Note: You can skip ahead to Step #X if you are linking your CSS file from a 3rd party

      3 - Select a folder to upload your CSS file to:

      • A. Upload...: Click Upload... to upload your CSS file to the webdrive

      4 - Click "CHOOSE FILE(S)" in the webdrive area:

      • Note: You can also drag and drop your CSS file into the area to upload your file

      5 - Select your CSS file from the file browser:

      • A. Open: Once your CSS file is selected, click Open to upload your file.

      6 - 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)...

      7 - Copy the URL for the CSS file:

      8 - Click on "Site Settings" in the left hand column:

      9 - Click on "ADVANCED" in the left hand column:

      10 - Click "EDIT" on the "CUSTOM <HEAD> CONTENT area:

      11 - Type in or past your CSS code in the text editor:

      • Note: For linking your CSS file use the following:
        <link href="[Paste the URL you copied from step 7 here]" rel="stylesheet" type="text/css">

      12 - Click "OK" in the bottom right corner:

      13 - Click "SAVE ADVANCED" in the top right corner to save your changes: