Thread

I purchased an html/css template online. I am following the instruction on chunking up the template, creating my template groups, embeds, template files etc. I have managed to link up the css fine.

This file has jquery - I am now stuck as to what to do.

I cant find any useful explanation on how the jquery module works - nor how to use it… im not even sure of I cant use it for this? I realise you can create javascript type files, but how do you link to them like you do the css?

The html.css template comes with a set of javascript files. I understand I can host these files myself, or, can I get it to call the jquery on google? Do I have to upload/cut paste them all into EE or can they sit in my host file manager? What exactly would be the link?

Please provide me with a detailed explanation of what to do from here, I am so new to all of this and its difficult when explanations assume knowledge.. much appreciated! Thanks

stephanie23,

If you need to link jQuery in your templates then the method is the same for an EE template as with a regular HTML site. The following code goes in the header of your template(s)

For an externally hosted copy of jQUery use this

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>

Or is you have it in a folder on your own webserver use this

<script src="/assets/js/jquery.min.js"></script>

The jQuery EE module provides jQuery resources included with ExpressionEngine

So as an alternative to the 2 methods above you would use this instead

{exp:jquery:script_tag}

Does that help?

I think I understand - so what you are saying is I should just put all my js files in a js folder in the site root, then link src”/js/javascriptfile” (as you did above) and not worry about the option with EE to create javascript templates?

Also I am having so much trouble with uploading image and css. Do I do the same with the css as the javascript? (ie save it to the root directory?) and not worry about creating css templates from with EE? It suits me fine to not be able to edit the file directly in ee.

What about theme images? Do I upload them to the root/images folder?
I am trying to do this at the moment and nothing seems to be working. I have tried using {site_url}, and “/image/image.jpg” to no avail.

Or should I be uploading all images to the themes folder? Will permission affect my images?

Probably not that relevant to me right now but I am not sure what you mean when you say: “The jQuery EE module provides jQuery resources included with ExpressionEngine” what resources are you referring to?

Thanks

Hi stephanie23,

With both JavaScript and CSS, there are at least two ways you can go about this. You can either use EE templates to hold your JS and CSS, or you can keep them in the usual .js and .css files in a normal directory (such as /css/ and /js/ each in your web root). For the sake of ease, I would recommend keeping them as their own files outside of EE. In your EE templates, you can just reference them as normal files just like you would in a normal HTML-only website. As you progress in your understanding of EE, you can start doing the more advanced things like putting JS and CSS in template files. But until you need that extra functionality, don’t worry about it.

I’m not sure what template pack you’re referring to, so I would recommend contacting the publisher of that template pack for support specific to that. However in general, I would recommend uploading images used in your site design (rather than images uploaded as content within EE) to their own /images/ folder and linking to them in your EE templates just like you would any HTML website. Keep things as simple as possible. 😊

Probably not that relevant to me right now but I am not sure what you mean when you say: “The jQuery EE module provides jQuery resources included with ExpressionEngine” what resources are you referring to?

By this, John Henry just meant that EE’s control panel requires jQuery to function, so jQuery is already included with the installation. Using the jQuery module in EE just allows you to use that same jQuery file in your templates. But again, if that doesn’t help you, throw it out for now. Use as much simple HTML as you understand, linking to JS, CSS, and images in the same usual way, and add on little pieces of EE functionality as you go. It’s much easier to learn that way than to try to throw it all in at once.

That’s great thanks for clearing that up!
😊

No problems. Feel free to start a new thread if you have any more questions.