Customizing Your Theme

Though you can easily customize most of the fonts and images on your site using the options in the Theme tab, you can also make changes to a Weebly theme with our built-in code editor.

This guide will show you how to navigate the code editor, but you should already be comfortable working with HTML and CSS as we don't provide in-depth support for custom theming. If you'd like to learn more about HTML and CSS, the W3Schools site is a great resource for beginners and beyond. 

To get started, click the Theme tab and then click the Edit HTML/CSS button.

The first thing you'll see in the code window is your main CSS file - this is stored in the Assets folder with all the other files like images and javascript. You can upload additional CSS files, images, or scripts using the + icon next to the Assets folder.

Changes you make to your CSS file will update automatically in the preview below if you have the Auto Preview box checked. If you want to check out the preview in a larger window, just click the icon in the lower right corner.

You can also make changes to the HTML templates for the header types included with the theme, and even create or upload your own that you can then apply to any page in the Pages tab. To upload or create a new header type, click the + icon next to the Header Type folder.

If you'd like to give your theme a new name, click on the MyTheme text in the upper left to change it. Whenever you've made any changes to your theme, don't forget to Save before closing the browser. 

That covers the basics of navigating the code editor. If you're ready for some more advanced information, check out our theme documentation here, or by clicking the Docs button at the top of the code editor.

Was this article helpful? 25 out of 65 found this helpful