June 14, 2014

Managing Files in Editing Weebly CSS/HTML

Posted by Domingo Tambasacan at 6/14/2014

Basically, every Weebly site has its own database for files that can be accessible anytime. This database can be seen on your Design Tab along with your page lay outs and your main-style.css. You can upload files including images, JavaScripts, CSS and others with unknown space limit. You can also delete them anytime. It is important to upload and host your own files for future reference and lessen your worry about its availability. Of course, an exemption would be those jQuery library files that are stored in more stable and secured sites like Google.



1. Downloading JS and CSS files

Most tutorial sites offer a direct download for these files in a zip form. However, I imitated the style of Dynamic Drive using the "right click" technique. For example below:


The file above is an external CSS (Cascading Style Sheets) which is an essential part of every tutorial. You can download the above file by right clicking on it and choose "save link as", select your saving location in your computer and save. You will then upload them in your template which will be discussed on number two. Remember not to rename the file or change its extension. 

2. Uploading Files on your Weebly Site

In Weebly, you can upload files in 3 ways:

a. Using the image drag and drag elements for photos.

b. Using the "FILE" drag and drop element or the “File Submission” in the RSVP form for PRO accounts.

c. Using your main database located in your Design Tab.

The most appropriate choice for my tutorials will be letter C. Once you downloaded the files on Step one, you need to upload them (CSS,JS, images..etc) on your database. To do that simply go to Design Tab > Edit CSS/HTML > Add new file(s). There you can choose the files you need to upload. Save your template after that.

3. Editing/ Creating External Files

The best way to describe this is to read my article “How to Edit External or Downloadable CSS File”.

Conclusion

This topic is one of the most important things every Weebly Users and Editors must know. It’s actually easy to remember how to use your database for your files. Later on, I will link this information to all my future tutorials.


Get email updates and more access! (Free)
Email *
email marketing by activecampaign

About Author:

Hi I am Domz. I love inserting new widgets and effects on Weebly Template. I like helping people and I like them more being my subscriber. Follow me @ Twitter | Facebook



If you enjoyed this post and wish to be informed whenever a new post is published, then make sure you subscribe to my regular Email Updates. Subscribe Now!

...

6 comments:

  1. When I try to add a CSS/jquery file to my weebly theme it doesn't store

    I've read that you can only have one .css file.

    I am not sure why I cannot upload the jquery, perhaps because it is a free account?

    ReplyDelete
  2. ZZZ... G, please read carefully, add CSS file via "add new files" then execute it trough the header section.

    ReplyDelete
  3. Hi Domingo, Thanks for all your great widgets.

    Im having a tiny problem.. I am trying to impliment your image hover. I have successfully added the image source, edited the header code to my site, and have successfully made an href// link via the hover. However, the image is just the source image with the text overlay. it does not animate when mouse rolls over, just stays there with source image and text over it with the link, which works. But not like your examples! I have added the alloriginals10.css and have embedded the div code. What do you think I should try so i get them like yours?

    ReplyDelete
    Replies
    1. Hi Stoop,

      In order to see if you did it correctly, I would suggest you to paste this on the forum with your site address. With that, I can check the codes.

      Delete
  4. Hi domingo i'm trying to add download your file but it says its no longer available what do I do?

    ReplyDelete
    Replies
    1. Hi Tenneh,

      Simply riht click on the sample CSS and choose save link as. That will do.

      Delete

 

© 2014. All Rights Reserved | My Weebly Tricks | Template by Blogger Widgets

Home | | Privacy Policy | Top