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

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.

Leave A Comment

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