In this tutorial, you’ll learn how to customize a Weebly theme. Instead of starting from scratch, we’ll use the Base theme, which provides all the Weebly-specific building blocks needed to work on the Weebly platform.

You’ll learn how to:

  • Create the required directory structure
  • Add a color palette so that users can choose their own primary and accent colors for the theme
  • Edit a header template to alter the way the title and navigation display
  • Edit the LESS file to alter styles and other display properties in the theme
  • Create light and dark versions of the theme
  • Edit a partial to alter how content displays on a page
  • Create a theme option that allows the user to change the width of the heading

Time to complete: About an hour

User experience: Intermediate Web Design with knowledge of LESS/CSS


  • Some knowledge of what makes up a Weebly Theme. Read Anatomy of a Theme before starting this tutorial.
  • The Weebly Code Editor accessed from the Theme tab of the Weebly Editor.
  • An app that can take a screenshot and then edit it to the required size.

Help make these docs better!