Skip to main content
Procore

Edit Background Of Your Training Center

Objective

To customize the background of your Training Center.  

Background

The background of your Training Center can be customized by adding an image or by changing the color. For further assistance, please reach out to your Training Center Specialist or training-management@procore.com

Things to Consider

When changing the background, it's generally reccommended to choose colors that provide maximum contrast, such as dark-colored text with a light background, or light-colored text with a dark background. 

Steps 

Change background color
  1. Navigate to the Training Center page you want to change the background color for.
  2. Click Edit and select Edit Live.
  3. Place your cursor anywhere in the page.
  4. Click the Style drop down and select CSS.
  5. Copy and paste the background code below into the CSS block.

    body {

    background-color: black !important;

    background-repeat: no-repeat !important;

    background-position: right !important;

    }

  6. Customize the background-color line to be any color or enter a hex code for a specific color. 
  7. To change the Page Title background color, repeat steps 3 and 4 to insert a CSS block on your page.
  8. Copy and paste the Title background color code below into the CSS block.

    body #title {

        color: white; !important

    }

  9. Customize the color line to be any color or enter a hex code for a specific color. 
  10. Click Save.
Add background image
  1. Navigate to the Training Center page you want to add a background image to.
  2. Click Edit and select Edit Live.
  3. Place your cursor anywhere in the page.
  4. Click the View drop down and choose Source. 
  5. Scroll to the bottom and place your cursor.
  6. Copy and paste the background code below into the bottom of the page.

    body {

      background-image: url(HERE) !important;

      background-repeat: no-repeat !important;

      background-size: cover !important;

    }

  7. Scroll to the Attachments section at the bottom of the page and select Attach a File.
  8. Browse for the file you want to upload or drag and drop files into the window from your computer. 
  9. After the file is uploaded, right click on the file and select Copy Link Address.
  10. Paste the link address in the background code within the background-image: URL parentheses. 
  11. Click Save.