How to Edit Weebly Source Code HTML and CSS?
Weebly offers “Embed Code” element to add custom HTML, CSS and JavaScript code on your page content. But sometimes it is necessary to modify the source HTML / CSS of your site. Weebly allows both free and premium users to edit the source HTML / CSS code of a site in order to encourage adding more customization 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.
Summary of Weebly Code Editor Options:
- Top toolbar with buttons to search, enable/disable auto preview, etc.
- Name of your current theme can be changed by double clicking.
- 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.
How to Edit Weebly Source Code?
Login to your Weebly account and edit the site you want to modify the source code. The option for “Edit HTML / CSS” is available under the “Theme” menu of Weebly editor as shown below:
Editing Source HTML and CSS in Weebly
Once you click on the button a new page will be loaded which is called Weebly code editor.
What Can I Do with Code Editor?
Weebly code editor has the following features:
Weebly Code Editor
Below are some important things you can do on Weebly code editor.
1. Top Toolbar
The top toolbar in the code editor is used 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. It is recommended to deactivate the "Auto Preview" option to avoid the preview is loading for each change you do. When the "Auto Preview" is disabled there will be a new "Refresh" button will appear which can be used to refresh the preview window to the change in the code.
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 new copy of it will be saved 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.
Working Model of Weebly Theme
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.
Weebly Header Types
4. Styles
All external style sheets are available under "Styles" section. Currently Weebly uses LESS files for different sections of the site like "_blog.less", "_nav.less", etc. The main external style sheet is "main.less" in which all other styles are imported using "@import" rule.
The main stylesheet was previously called "main_style.css" is now referred as "main.less". All responsive themes use .less style sheets instead of .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 here would 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:
1 | <link rel="stylesheet" type="text/css" href="http://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.
Partials Section in Weebly Code Editor
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:
1 | <script src="http://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 "http://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.
1. 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.
2. You can also right click and get the direct URL with "weebly.com/.../" and link it on anywhere on your site.
3. 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.
51 Comments
Leave your reply.