The following steps will give Advanced Users the flexibility to modify the Cascading Style Sheet (CSS) of the Top Producer Website. This allows users to be able to modify items within the website template such as the colors of the website background, page background, font color or menu bars.

IMPORTANT: The instructions in this article are intended for advanced users.

Users not familiar with CSS should consult an independent Website Designer before performing these steps

  1. From the main menu click Edit Site.  The Website Manager window opens.
  2. Click Update My Site Options.  The Site Options window opens.
  3. Click the Browse button under Upload files to your Storage space. The Choose file window opens.
  4. Double click on the desired *.css file to add it to the empty text box beside the Browse button.
  5. Click the Upload button.  You may see a progress window indicating the status of the upload.
  6. Once the upload is complete you will see the *.css file from the Web Site Files: section.

    Tip: If you have a lot of uploads you can click the Documents radio button at the top of the screen to display documents only.

  7. Right-click on the *.css file and left-click on Copy Shortcut.  This copies the URL location of the *.css file.
  8. Click Ok to exit the Site Options screen.
  9. Click My Account from the main menu.  The My Profile page opens.
  10. Enter the following code into either the Primary, Secondary, or Footer message fields:

    <link href=”***” rel=”stylesheet” type=”text/css”/>

    The following will work as well if space is limited:

    <link href=”***” rel=”stylesheet”>.

    Note: The Primary, Secondary and Footer message fields are character limited.  Content entered into these fields may need to be removed or modified in order to accommodate the CSS reference code.

  11. Remove the *** between the exclamation marks (“ ”), then right-click between the “ “ and left-click on Paste.  This will paste the URL copied in step 8 above.
  12. Click Ok.

When the website is viewed it should reflect the modifications from the *.css file.  If the modifications are not viewable, review the *.css file and ensure proper syntax is used.  Also, ensure the location of the *.css file entered in the code found in the Primary, Secondary, or Footer fields in the My Profile screen is correct.