Weebly has an Embed Code element for adding custom HTML, CSS and JavaScript code inside your page content. You also have an option for adding CSS/scripts in header/footer sections from the page or site’s settings. However, sometimes it is necessary to modify the source HTML / CSS code of your site. For example, you may want to change the appearance of buttons in your theme or want to insert an element in the HTML layout. Weebly allows both free and premium users to edit the source HTML / CSS code of a site in order to encourage adding more customizations and make a good looking site with needed features. Here is a step-by-step tutorial on how to edit source HTML or CSS in free Weebly site and things you can do with Weebly code editor.
The steps in this article are explained with standard Weebly.com website. The process remains same if you use Weebly site with paid hosting platforms like SiteGround or Bluehost.
How to Edit Weebly Source Code?
Login to your Weebly account and go to the dashboard section. Click the site list dropdown and select the site that you want to modify the source code. Click “Edit site” button which will take you to the Weebly site editor section.
Navigate to “Theme” menu and click “Edit HTML / CSS” button on the bottom left corner of the editor as shown below:
If you are not seeing the button, zoom out to reduce the screen size to see it clearly. Once you click on the button, it will take you to the Weebly code editor.
Weebly Code Editor Options
Weebly code editor has large number of options. Before explaining each feature, here is a summary of available features and what you can do with the code editor.
- Top toolbar shows options to toggle dark or light mode, search code and enable/disable auto preview and view document.
- You can change the theme’s name by double clicking on the current name.
- Header Type – Weebly’s default page layouts containing HTML codes for individual layouts.
- Styles section contains external style definition of all elements in .less format.
- Partials section having files related to blog, ecommerce, etc.
- Assets section contain all theme files like scripts and images.
- Export theme – download your Weebly theme to local computer.
- View the code for the currently selected layout or file.
- Preview the site, enable auto preview on top toolbar to preview code changes instantly.
- Popup view to check your site in a popup window.
- Save or cancel the changes made.
1. Top Toolbar
You can use the tools in top toolbar to invert the color, search, check documentation and auto preview the changes. By default any changes done on the code will be instantly showing under the preview window. You can also preview your changes in a popup window and check Weebly code editor help documentation on editing a theme. We recommend to deactivate “Auto Preview” option to avoid the preview is loading for each change you do. When you disable “Auto Preview“, there will be a new “Refresh” button appear. You can use that to refresh the preview window in order to see the effect of your code changes.
2. Theme Name
You can change your theme name by double clicking on it. Changed theme will be showing under “Theme > Change Theme > Theme Gallery > Custom”. Whenever you change the theme, Weebly will save a new copy of it with a different name like a child theme. Any modifications to child theme will not have an effect on the original theme and you can any time revert back to Weebly’s original theme.
Weebly uses a theme across your account, which means multiple sites under a single account can use a single modified theme. Changing the CSS or page layouts will impact all sites using that modified theme.
Note: If you want to modify the same theme with different design for two different sites then save it with two different names and use it on appropriate sites.
3. Edit / Add Page Layout
Under the “Header Type” section you can find the source HTML code for all the default page layouts offered by Weebly. You can also add or upload your own page layout by clicking on “+” button. Learn more about Weebly page layouts. With the introduction of Weebly 4 all page layouts are consolidated into three types as header, no-header and splash.
4. Styles
All external stylesheets are available under “Styles” section. Currently, Weebly uses LESS files for different sections of the site like “_blog.less”, “_nav.less”, etc. You can find the main external stylesheet as “main.less” in which all other styles are imported using “@import” rules.
Note: Earlier “main.less” stylesheet file was referred as “main_style.css”. Later if the name changes with different file extension, you may search for the file with the name like “main” or “style”. At this point, all Weebly responsive themes use .less stylesheets and old non-responsive themes use .css files.
4.1 Editing Source CSS and Adding Custom External Style Sheets
Weebly has a one single style sheet per theme, which you can see it in the code editor with the name “main.less” under “Styles” section. Click on the CSS file to see the code on the editor beside and you can add your own custom CSS codes here. Any code added in the main stylesheet will be effective throughout your site since “main.less” stylesheet will automatically be linked to all default header types.
You can also upload additional CSS files like “style.css” and link it to the necessary page under “Pages > Select the page > SEO Settings > Header Code” section using the below code:
<link rel="stylesheet" type="text/css" href="https://yoursite.com/files/theme/style.css">External CSS sheets linked under “Settings > SEO > Header Code” section will be loaded on all the pages which you can see it by right clicking and choose “View Page Source” on the browser.
5. Partials
As the name indicate “Partials” section contains part of the template files ( with .tpl extension) which will be used in combination with other files. The template files for the blog page, ecommerce, navigation, membership and search box are available under “Partials” section for modification.
6. Assets
The “Assets” section contains all source files like images and scripts used on your theme. You can edit and upload files under “Assets” section and use it in the site editor using “Embed Code” element or under “Header Code” and “Footer Code” sections. The files can be uploaded by clicking on “+” icon and then choose the “Upload File(s)…” option.
6.1 Uploading Script Files
You can upload a JavaScript (.js) file under “Assets” and link the file to a particular page either directly inside “Embed Code” element or under “Pages > Select the page > Advanced > Footer Code” using the below code:
<script src="https://yoursite.com/files/theme/JavaScript.js/"></script>6.2 Uploading Images
Similar to .css and .js files, you an also upload image files with extensions like .jpg, .png, .bmp, .gif, etc. Weebly stores the image files uploaded on the code editor under “https://yoursite.com/files/theme/” but the image files uploaded on the site editor using image, slideshow or gallery elements are stored in different “upload” directory. The advantage of uploading images on the code editor is that they can be linked with the URL any place on your pages.
Note:
- All files uploaded on the code editor can be linked with the relative URL within your site. For example, if you have uploaded an image “myimage.jpg“, it can be linked using “/files/theme/myimage.jpg” inside “Embed Code” element and under “Header Code” or “Footer Code” sections.
- You can also right click and get the direct URL with “weebly.com/…/” and link it on anywhere on your site.
- Though all types of files can be uploaded, certain files like .php may not work as intended.
7. Export Theme
This is an option to export the complete Weebly theme to your local PC or Mac. After you did any modifications it is recommended save and export your theme so that you can restore it when it is needed. Learn how to import and export Weebly theme.
8. View and Edit Code
Here is the actual place you can view and edit the CSS, HTML or Script code. The code corresponding to the file you have selected will be displayed on the editor. You can search for the required code and modify it as per your need. Ensure to edit the code carefully as the modification will affect the whole site.
9. Preview Area
The changes done on the code can be viewed under the preview area. The preview is automatic when the “Auto Preview” option is checked on the top toolbar otherwise you can click on the “Refresh” button to preview the changes.
10. Pop-out View
Though the preview area is available on the screen, most of the time it is congested due to smaller display area. You can view the changes in a separate full screen browser window using pop-out button.
11. Cancel / Save Your Changes
Importantly any changes done will only be effective when you click on the “Save” button, enter a new theme name and save your changes. You can also cancel the changes without saving. Most of the time the browser will keep the cache even though you did not save or publish the site. So if you see any changes appear without saving or publishing then it is a good idea to logout and clear your browser’s cache and check again.
Wrapping Up
Weebly is one of the platforms that allow editing source code for free users. Though you can add CSS, upload JavaScript and images, we recommend you to use header and footer code sections. This will help you to insert the code without modifying the theme.
55 Comments
Leave your reply.