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.