Add your own CSS or JavaScript assets to the theme

Sometimes we work with clients who have the skills to be able to edit the CSS and Javascript of their website. If you have the desire and the chops to add your own styles, you can do that! Here's how you can add your own assets using a CSS file example:

  1. Create a blank file saved with a .css extension.

  2. Upload this file to somewhere in File Manager where it will be easy for you to access.

  3. Navigate to the Themes tab in Composer and click the green "+" icon next to "CSS Assets."

    theme-screen.png

  4. Locate and add your file from the File Manager popup.

  5. After your file is added, click "Update" so the Theme is published with your CSS file.

  6. To make edits to your CSS file, go to File Manager and click the pencil icon on the far right side.

DO

  • Create unique element classes so as not to negatively impact other sections of the site.

  • Give your files a name that cannot be confused with the theme code (recommended: client.css).

  • Check out a few articles on specificity so you can avoid adding "!important" whenever possible.

DON'T

  • Add code to any of the existing theme files. If you do, it will get overwritten as soon as Finalsite staff go into the repository to make edits. Once this code is gone, it's gone forever and cannot be retrieved.

  • Make live edits to a main site page, such as the home page. It's best to clone the page, and add a temporary page class to avoid live errors.

  • Go crazy. Finalsite cannot provide support for any of your code, so it's best to not make too many major changes.

Was this article helpful?
1 out of 1 found this helpful

Comments

0 comments

Please Sign in to leave a comment if you don't see the comment box below.