Call A Relative Font, Image, or Javascript File in a Custom Weebly Theme

November 30, 2016

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.

View Weebly Documentation

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

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:

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:

but, you’d be wrong.  The relative path should be:

The same goes for calling fonts within the “/font/” sub-directory of assets:

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:

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.

Leave a Reply

Your email address will not be published. Required fields are marked *