Call A Relative Font, Image, or Javascript File in a Custom Weebly Theme
I had the task of creating a custom Weebly theme recently. One of the simplest, yet most difficult, things I found in creating and uploading a theme was how to properly call javascript files, fonts, images, and anything else relative in the theme. While I cannot dive into the entire theme structure and requirements, there is a lot of provided documentation from Weebly on how to do this.
Instead, I want to focus on the document structure of a Weebly theme and where the files should be located when you upload them. Then, I want to talk about how they can be called.
This is an example of the document structure you would upload to Weebly as a custom theme. To learn more about the anatomy of a template, visit here.
- /
- assets/
- fonts/
- images/
- custom.js
- main_style.css
- landing.html
- assets/
What I am showing here is about the absolute minimum for a Weebly theme. I have my HTML page (landing.html), my stylesheet (main_style.css), I have my assets directory, and within that directory I have 2 sub-directories (fonts, images) and a javascript file (custom.js).
Calling A Javascript File in the HTML
In our HTML file (in this case landing.html), we can call our javascript file (custom.js) through the following script tag:
<script src="/files/theme/custom.js" type="text/javascript"></script>
You can basically think of it as “/assets/” = “/files/theme/” when it comes to being called.
A couple things I note found:
- Calling Javascript files worked best at the end of the HTML right before </body>
- Almost none of the Javascript files worked in Preview/Edit. Only until I Published did they work.
Calling Images or Fonts in the stylesheet
In the stylesheet (main_style.css), you would think it is necessary to call an image with this relative path:
element { background-image: url('assets/images/background.jpg'); }
but, you’d be wrong. The relative path should be:
element { background-image: url('images/background.jpg'); }
The same goes for calling fonts within the “/font/” sub-directory of assets:
@font-face { font-family: 'yourfont'; src: url('fonts/yourfont-webfont.eot'); src: url('fonts/yourfont-webfont.eot?#iefix') format('embedded-opentype'), url('fonts/yourfont-webfont.woff') format('woff'), url('fonts/yourfont-webfont.ttf') format('truetype'), url('fonts/yourfont-webfont.svg#aleoregular') format('svg'); font-weight: normal; font-style: normal; }
This is because your stylesheet is moved into your “/assets/” directory when it is uploaded, even though it is in your root when it is uploaded/downloaded. Even when you download the Weebly provided base theme, your stylesheet is in your root, but it is moved to an “/asset/” directory after upload.
Call An External File in the HTML
Below is an example of how I would call Font Awesome in an HTML file:
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" rel="stylesheet">
Troubleshooting
If you run across any issues, there are a few things you can check or keep in mind:
- Zip up the contents of your root directory when you upload, not the directory itself!
- The javascript files rarely work in the Editor, at least, for me. It wasn’t until I published the site that I could actually see a lot of the javascript working
- Create an “/assets/” directory because Weebly will create one for you anyway
Hopefully, this helps during the development of a custom theme for a Weebly site.