April 7, 2014

How to Edit External or Downloadable CSS File

Posted by Domz at 4/07/2014

How to edit external or downloadable CSS file


I am happy to see people learning my tutorials. From time to time, I'm visiting their Weebly site and find out how they are doing. One common problem is that, they placed the code correctly but never edited its CSS. We should remember that every effects specially widgets must be related to our site's theme.  So today's tutorial teaches you on how to edit downloadable and external CSS.





Before we start, I would like to give you an overview of these codes. A CSS (Cascading Style Sheets) has something to do with your site's colors, backgrounds, sizes, borders etc. A JavaScript on the other hand performs actions and other useful functions. Lastly, the HTML markup that serves as the skeleton of the effect you are trying to accomplish.

Ok, here are two scenarios where you need to edit the CSS:

DOWNLOADABLE CSS

CSS that needs to be downloaded is like the defaultsize.css below. You can download it by right clicking on it and "choose save link as"

defaultsize.css

To edit it, simply locate its download location > right click > open with > notepad. After having necessary changes to the dimension's value, save and upload to your template. Now everytime you use that style, it will always follow the dimension you wrote in the CSS file.

EXTERNAL CSS

CSS can also be directly linked from other sites using the same style but I do not recommend this technique. It is  wiser to host your own files because they might block you or worst when that external site changes domain. Observe the following sample code:

<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/moment.js/2.0.0/moment.min.js"></script>
<script src="http://myweeblytricksdemo.weebly.com/files/theme/digiclock.js"></script>
<link rel="stylesheet" type="text/css" href="http://myweeblytricksdemo.weebly.com/files/theme/defaultsize.css">

The code above has the following details:

Red marked for the JQuery Library source which you really don’t have to edit.
Green for the external Javascript which is usually downloaded with less or no editing needed.
Blue for the external CSS file that you really need to edit for your site’s compatibility.

JavaScripts and JQueries can be easily determined with their tags <script> </script> while external CSS uses <link rel="stylesheet" type="text/css" href="CSS FILE SOURCE">.

Assuming you're going to use the above code to your site's <head> , please remember that you will be linking your CSS to my site which is I don’t recommend. To get your own CSS file with same content as mine, simply copy the CSS file source link (bold letters in blue highlight) and open it on a new tab. You will now see its content.

On your computer, create a new text file via notepad or same application except MS Word, change the file extension from .txt to .css and then open it. Back to your browser , copy the content of the external CSS you've just opened and paste it to the empty TXT file (now CSS file). Rename it same as the original.

After creating your own CSS file, upload to your Weebly Template by going to Weebly > Design > Edit CSS/ HTML > add new items. Now the CSS  link in your site's <head> should be changed with your own full website address.

I should have made this article short and simple but I need to emphasize some details for beginners. Any questions please comment below.

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


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!

...

5 comments:

  1. Super helpful! I've been looking all over the internet for how to do this! Thanks!

    ReplyDelete
  2. Sorry if this is a double post, but what would be the css/text code I would use if my css file is setting.css and I'm looking to a div id that's pure css no js or jquery. Thanks!

    ReplyDelete
    Replies
    1. I didnt get your question.
      The name of your css has nothing to do with div. The important is, your div class or ID should be similar to what you wrote on the css file.

      Delete
  3. I would really appreciate it if you did a post about Google Speed Insights and what Weebly users can and cannot do to "fix" some of the errors that Google says Weebly sites have. I've looked everywhere on the Internet and can't seem to find any information on the subject. For example, optimizing CSS delivery of Google webfonts. Can we do anything about that or is that a Weebly backend thing that we can't tough? Thanks, Randy

    ReplyDelete
    Replies
    1. HI Randy,

      For that matter, we don't have much control. The default template settings are own by Weebly. What we can do is to insert scripts on the right place but either way, there were still errors WE CANT FIX.

      Delete

 

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

Home | | Privacy Policy | Top