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.

Animate Elements with CSS Animations & JQuery

October 16, 2016

View Project on CodePen

Today, I wanted to feature a technique I have been using which quickly allows me to animate elements on a page with CSS animations.  It will loop through each element on the page  based on a CSS class and intermittently add an animation to that element.  The method has fall-backs for browsers that do not support CSS animations (in that they just show on page load, but do not animate) so you never have to worry about the content not showing on older browsers.  This method also prevents “glitchy” content blips that tend to occur with JQuery class additions on the document loading.

First, we must start with our HTML content:

It contains 4 paragraphs, all with some Lorem Ipsum.  What’s important is that each element is given a class of “animate”, which we will use as our selector.  The class can be given to any element you were hoping to use a CSS animation for, which opens up the ability to constantly add/remove and dynamically pull elements without ever having to worry about the front-end animation suffering.

This is because of the JQuery you will see below:

Fire this JQuery snippet when your document is ready.  Let’s talk a bit about what is happening here —

First, we use the each() selector to grab each element on the page with the “animate” class.  Then, we are saying: “Every 500 milliseconds, add the class ‘animation’ to that element, wait 500 milliseconds, go onto the next element, add the class to that one, and so on, and so forth.”  This function will go through every element with that class, add the animation class, and do this until they are all done.

I like this method because it delays the animation on each element by 500 milliseconds (which you of course can change the timing of), making a nice presentation no matter how many elements you have on the page.

You can, however, choose to simply queue all of the animations at once with this code instead:

Now that we have these core parts set up, the possibilities become endless with CSS.  I wanted to ensure a fallback in case the CSS animations aren’t supported as well, so we will incorporate the new @supports rule.

I am only relying on the -webkit- vendor prefix and full support, but you could open this up to more browsers by incorporating other vendor prefixes.  I find that this works for a majority of my cases (and will only improve), so it is enough for me.  The best part of this approach is that, worst case scenario, elements are given a class with our JQuery function and nothing happens on the front end.  No content is hidden or lost.

Again, let’s beak this down —

First, we are using the rule declaration and nested a few CSS rules.  If animations are supported, then I want to set the initial state of those elements.  In this case, I am going to fade in these elements, so any element with the animate class is going to need to be hidden:

Next, I want to determine what we do when they are animated.  The class “animation” is being added to each element, so let’s determine what that is:

In this case, the keyframes of the animation are being determined by the “slideIn” animation.  It transforms and fades the element in.  In the CSS class, we are able to determine which animation is used, how long it takes, and the state it is in when the animation is done.

You can change any of these elements and that’s the biggest reason I favor this method over any other.  I can update the CSS constantly, change animations, change how long they animate for, what they do, without ever modifying some of the main core code of HTML and JQuery.

If I ever want to animate another element, I can simply add the “animate” class to it and it will follow the same behavior.  This allows for a robust amount of flexibility.

For example, I can adjust the animation for any element by giving it a new CSS rule without ever touching the HTML or JQuery code.

Say I want to have the first paragraph perpetually loop through its animation.  I can do this with one simple new CSS rule:

And now, the first paragraph will run through the animation after 1 second of delay, run for 2 seconds, and loop infinitely.

View the Demo on CodePen

You can make countless rules and animations for all of the elements on the page, and also determine their state before the animation occurs.

I hope this helps with your front-end development processes going forward.  Feel free to explore this approach.  Hopefully, its ability to scale will really make it a routine method in your process.

 

 

Use Contact Form 7 To Post Rows to Advanced Custom Fields Repeater

April 17, 2015

I was in a particular situation where I needed a task management system that could take fields through a form from Contact Form 7 and post them to rows in the Advanced Custom Fields Repeater field I set up.  The idea was to use a form from the front end of WordPress to post to the back-end of WordPress in a custom field.  You can accomplish this by adding code to your functions.php file in the WordPress theme.

This example assumes that you already have a form set up through Contact Form 7 and you have already purchased the Advanced Custom Fields’ Repeater Field plugin.

1. Get Your Field Key

You can grab your field key from the ACF Repeater Field by selecting ‘Show Field Key‘ from the Screen Options.  You will use this in your function to determine which field to add rows to.

cap1

 

 

2.  Add WPCF7 Before Send Mail Hook

You add the function below to your functions.php file within the theme.  You are hooking into Contact Form 7’s “wpcf7_before_send_mail’ function to grab the post data and post it to a WordPress repeater field as a new row.

Obviously, your fields in the form and the repater field may be different.  The important things to take away from this functions script is that:

You’ve created the hook:

 

You’ve got the URL and ID of the post the form was submitted through:

 

You got the data from the form:

 

And you update the repeater field based on those elements:

Hope that helps!  Don’t forget you can always extend this to a plugin as opposed to a theme function as well.

Force Reload on a Hash or Anchor Change with JQuery

September 2, 2014

I had a JQuery function that detected if there was a hash/anchor tag appended to the loaded URL.  If there was, it would scroll to the anchor tag on the page.

This was the function:

This was great — the problem was, however, that if for some reason the hash changed but the page remained the same, it wouldn’t scroll to the new anchor. This was expected because DOCUMENT.READY will only fire once.

The most common method of detecting a hash/anchor change is using this function:

This will force a reload whenever a hash tag changes. Now, if the URL changes, the page will reload and it will fire my original function detecting a hash/anchor tag.

For this particular instance, this method worked. It doesn’t always, and this may not apply to your problem, but in this case it made sense. It’s also very well supported.

Good luck!

SPAN Simple Responsive Fluid Minimalistic CSS Framework

January 15, 2014

Download on Github

In an attempt to offer some sort of contribution to the web development world, I have decided to put out the SPAN Simple CSS Framework. It’s meant to be a very minimalistic, out-of-the-box CSS framework, and I use the term ‘framework’ very loosely.

A lot of frameworks come with bells and whistles, and that was not my goal in this.  They almost always took on their own unique styling and after a while became recognizable.  Frameworks like Bootstrap were great, but could be identified from a mile away.  Doing custom web development often meant that the style needed to be custom, too.

I would spend so much time coding and customizing the framework, I should have just started from scrap anyway!

The entire point of this framework is to get the absolute bare minimum set up that is relatively easy to learn and rely on.  It’s also very easy to build upon and begin customizing.

This framework does NOT:

  • Take care of resetting all browser styling.
  • Cover all browser quirks and shortcomings.

This framework is:

  • HTML5 and CSS3 compliant.
  • Fluid & Responsive
  • Minified to be only 1.02KB

Getting Started

Download from Github

The entire basis on the framework is that there are containers, rows, and then “SPANs” that total 100%.  For example, if you wanted a row with 4 columns equaling 25%, your markup would look like this:

span-simple-framework

So, to illustrate this, there is a container that spans 100%, there is a row that spans 960 pixels, then there is a div with a class .span25 that spans 25% of it’s container.

The SPAN Div Class

The grid is defined by the class .span proceeded by the number of percentage you’d like the column to be in width.  All classes that begin with the name “span” carry this behavior:

Here is a full list of the available numerical amounts for each of the span classes:

With these, you can mix and match any combination.  Ideally, you would want it to total 100%, but that’s not necessarily the case if you start a new <div class=”row”> instead.

Clearing Elements

That’s pretty simple.  Just use a div with a class of ‘clear’.

Determining the row size.

Rows are set to be 1080 pixels wide.  The different div span classes do not need to be contained within a row, and they will adjust since the widths are percentages.  You can adjust the row sizing by simply changing the max-width property.

Spacing, Padding, and Responsive Spacing

The .span classes are meant to include padding in the widths using the CSS property of box-sizing:border-box.  This was done intentionally because the hope was to have this framework be more flexible to other applications.  You can always adjust your margins in the universal selector for all of the columns.

 

That’s about it.   My whole intention was to have it be relatively easy to learn and improve upon.  I wanted a framework that let me build upon it really quickly.

Any comments or suggestions are welcome.