Customizing themes without an Edit HTML/CSS button

Community wiki Administrators
1

Sometimes, you may want to customize a Discourse theme but find that there’s no Edit HTML/CSS button available. This often happens with remote themes (themes installed from an external source). Here’s how you can still add your customizations:

Understanding the limitation

For remote themes, you’ll typically see a message like:

If you want to edit this theme, you must submit a change on its repository

Example of Air Theme with edit limitation
Example of Air Theme with edit limitation1070×687 23.5 KB

:discourse2: Hosted by Discourse? Then you might see: “Editing of remote themes is disabled in Discourse. Please contact us if you need assistance transitioning customized remote themes to a local theme”

Options for customization

  1. Submit changes to the main repository: If your changes could benefit others, consider proposing them to the theme’s original creators. This requires familiarity with git and GitHub.
  2. Create a copy (fork) of the repository: Create your own version of the theme’s code repository, add your customizations, and use your copied version. This method requires technical knowledge and means you’ll need to maintain updates yourself.
  3. Create a custom component: This method allows you to add customizations without modifying the original theme. It’s the recommended approach for most administrators and will be the focus in this guide.

Creating a custom component

Follow these steps to create a custom component for your theme customizations:

  1. Go to your site’s admin panel and navigate to /admin/customize/components

  2. Click one of the “Install” buttons

    Install buttons
    Install buttons936×342 16.7 KB

  3. Select “+ Create new”, enter a name for your component (e.g. “My custom component”), choose “Component” as the type, and click “Create”
    Create new component

  4. Add the component to the theme(s) you want to customize
    Add component to theme

    :warning: Don’t forget to save by clicking the green check mark

  5. Click “Edit CSS/HTML”
    Edit CSS/HTML button

  6. Add your customizations in the appropriate sections (CSS, HTML, etc.)
    Customization editor

  7. Click “Save” to apply your changes

Important notes

  • Your customizations will be applied on top of the existing theme.
  • If the base theme updates, your custom component will still apply its changes, which might sometimes lead to unexpected results.
  • Always test your customizations thoroughly after theme updates.

By following these steps, you can add custom CSS, HTML, or other modifications to your Discourse theme without directly editing the remote theme files. This method is suitable for most administrators looking to make small customizations to their site’s appearance or functionality.

4 Likes