How to Edit Weebly Source Code HTML and CSS?
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:
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:
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.
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.
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.
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:
<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.
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.
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
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.
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.