Need help inserting Javascript and CSS files

  • 1
  • Question
  • Updated 9 years ago
  • Answered
I have created some buttons with sub menus however I need to insert them correctly into my website.

Can anybody advise me on how I can do this - the instructions I have are as follows but I do not understand them

1. Create the button's folder, and put button images in it.
The button's folder must be in the same directory as the web page that will display your menu. For example :

If your web page is here :
http://www.mydomain.com/index.html

Your button's folder must be here :
http://www.mydomain.com/buttons/ (where would I put the button images?)

2. Put the menuscript.js and menustyle.css files in your web page folder.
The menuscript.js and menustyle.css files must be in the same directory as the web page that will display your menu. For example :

If your web page is here :
http://www.mydomain.com/index.html

Your menuscript.js file must be here :
http://www.mydomain.com/menuscript.js

And your menustyle.css file must be here :
http://www.mydomain.com/menustyle.css (where would my web page folder be)

3. Insert the HTML tag for javascript and sub menus.
This is the HTML code that calls the javascript and CSS style sheet files ( menuscript.js and menustyle.css ). You must insert it in the HEAD part of your HTML document.

(Would this be inserted into a normal HTML Widget?)

4. Insert the HTML tag to display the menu.
This is the HTML code to display the menu.
You must insert it in the BODY part of your HTML document.

(This too?) - different widget or the same?

I have inserted an image of the files that I need to place within the website to give you an idea of what needs to be done.

I do hope that you can help as the buttons will really help with the development of my website.

Thanks

Stewart
Photo of Stewart Scott

Stewart Scott

  • 121 Posts
  • 3 Reply Likes
  • optimistic

Posted 9 years ago

  • 1
Photo of Sanja

Sanja, Official Rep

  • 10698 Posts
  • 495 Reply Likes
Hi Stewart

I'll try my best to answer. I hope others may jump in to share their advice.

1. In your file manager, you can create a new folder. Look at the bottom of your file manager screen, you should see "new folder". Please look at the screenshot to see what I mean. You can give this folder the name "button". Then, double click the folder, and upload your images into that folder. The image path would then be something like: http://yoursiteurl.yolasite.com/resou...



2. Yola does not allow .js files to be uploaded into your file manager. So, this will cause problems. You can try uploading to a file hosting site and link to it. If you're a FF user, another option is to download a really cool add-on which allows you to view external .js sources. You can then copy the code directly and paste into an HTML widget. You'll have to use script tags to close the code. The add-on is: https://addons.mozilla.org/en-US/fire...

I believe you can still upload your css files though into your file manager.

3. You would place the codes into an HTML widget - probably 1 in each.

4. Place code in another HTML widget and place underneath the others.

I hope that helps! Let me know if you have further questions.
Photo of Sanja

Sanja, Official Rep

  • 10698 Posts
  • 495 Reply Likes
Sorry Stewart, I am not familiar with either a MAC or the Safari browser.

As for the ? with the blue boxes, I would agree with your assumption that the images cannot be found. You'll need to make sure that you've included the correct path.

Would it be helpful if you posted the codes or give me the source of where you got these buttons and I can test them and get back to you? I would be happy to do this for you.
Photo of Emmy

Emmy

  • 5892 Posts
  • 299 Reply Likes
Hi Stewart,
I'm sorry to be the bearer of bad news but what you are wanting to do is not possible as uploading .js, .html or .css files into the Site Builder as well as adding to the head section of the page can't be done. If you have individual images that you would like to link to specific pages on your site thus creating your own navigation you can do this, but it would require you putting the images on your site and then manually linking them to their specific page. I would like to help you with this if that is what you are wanting to do. Please let me know.
Photo of Sanja

Sanja, Official Rep

  • 10698 Posts
  • 495 Reply Likes
@Emmy - I'm not sure, but I thought .css files could be uploaded into the file manager? In this thread: http://getsatisfaction.com/yola/topic..., I believe this was achieved? I may be misunderstanding this thread though.
Photo of Emmy

Emmy

  • 5892 Posts
  • 299 Reply Likes
Hi Littleus,
The problem is that uploading .css files into the site builder and using them to try to modify your style or override the current css can break the page. We understand that people would like to do this, but the problem comes in that we can't support users when they do this and break their page. I am going to speak with someone about this in further detail. Thanks for helping on this thread, you are such an asset to this community!
Photo of Sanja

Sanja, Official Rep

  • 10698 Posts
  • 495 Reply Likes
Thanks for clarifying Emmy! This is definitely something we need to be cautious of. As always, always test on a test page first! =)
Photo of John McCarthy

John McCarthy

  • 1292 Posts
  • 99 Reply Likes
when i use my buttons i just turn them into pictures/images and put a link into them
Photo of Stewart Scott

Stewart Scott

  • 121 Posts
  • 3 Reply Likes
Thanks everybody for your input - Littleus, this is the link to the site where I created the buttons. If you could check it out to see if there is something I have missed I would be very grateful.

http://www.buttongenerator.com/

thank you

Stewart
Photo of Sanja

Sanja, Official Rep

  • 10698 Posts
  • 495 Reply Likes
Hi Stewart

I was unsuccessful trying to implement the code. I'm sorry. However, I do have another suggestion. Perhaps you could use this button generator instead? http://www.flashvortex.com They have similar styles.
Photo of Stewart Scott

Stewart Scott

  • 121 Posts
  • 3 Reply Likes
Yes I noticed them earlier today - they are good but a little too gimmicky for what I am looking for but I am sure others would love to know about these.
Thanks for your help on this, much appreciated.

Stewart
Photo of Sanja

Sanja, Official Rep

  • 10698 Posts
  • 495 Reply Likes
Hi Stewart - what about manually adding buttons from www.cooltext.com? Perhaps they may be a better option for you?