Using CSS, javascript & jQuery in Google Sites

Google Sites is an incredibly useful tool for companies using Google Apps, as you can personalize content, access, and more based on your users Google Apps logins, which means they don’t have to log in to a separate system just to access your company’s intranet, for example. This can lead to a higher rate of adoption and usage.

But editing Google Sites has always been seriously painful, the platform lacks many features of a true content management system. Google Sites took a big step forward recently by allowing native usage of CSS, javascript and jQuery. Previously, this could be done by uploading custom Google Gadgets, but this update makes the feature more obvious and easily accessible.

Check out the video for more details on using CSS, javascript and jQuery in Google Sites.

If you enjoyed this video, be sure to sign up for theĀ Google Gooru Newsletter!

Comments (45) Write a comment

  1. This is a great new feature in Google Sites — thanks for sharing. The previous method of finding a gadget to host your CSS/jQuery was awful. This is far more easy to use. Thanks Gooru!

    Reply

  2. Thanks for getting the word out on this feature. I was just about to write a custom Google gadget for a carousel when, at the last minute, found your video – cheers.

    Reply

  3. I’m trying to stick my social media buttons in the top right corner using absolute positioning in an HTML box but the page title covers it up. Kinda some wasted space there to the right of the page title. to bad I can’t access it.

    Here’s a test page the display the behavior
    http://pro.d3mckee.com/html-test

    Here’s the bit of code on the page.

    The LEFT positioning works as expected but the TOP value, when set to a negative number renders for a few seconds then disappears behind the page title zone, even if the page has no title. It seems to get covered up when positioned outside of some invisible frame.

    I’ve tried overflow:visable, z-index:99 and using negative MARGINS instead of nested relative/absolute position.

    Dave

    Reply

    • Hey Dave,

      Personally I don’t think I have ever seen someone position a div in that top right area successfully…but I have a friend who’s a skilled Google Sites Designer and I’m going to check with him and see what he has to say. Hopefully will get back to you in the next couple of days.

      Thanks,

      Google Gooru

      Reply

    • I think what you are trying to accomplish is not exactly possible with Google Sites, even with gadgets, html boxes, in-line CSS. There are those area that are unfortunately dead to code: header area and side margins.

      Sometimes it is best to recognize limitations and create alternatives.

      Reply

  4. I can’t seem to see the HTML Box gadget from my menu, or is it only available on Google Apps and not the usual sites.google.com/site/ ? Thanks for sharing though…

    Reply

    • Hey Anthony,

      The HTML Box gadget is no longer on the main menu, but you can search for it in “more gadgets.” Once you open up the “more gadgets” section, click on “public” and search for “HTML Box.” It will be the second one that comes up on the list, after “try it editor gadget”. Let me know if you have any further questions.

      Thanks,

      Google Gooru

      Reply

  5. Yes, this made quite more easier for me. As I have my website running in google sites. I had to hunt for gadget just to embed a button. Now I can do it myself. I am not professional developer so this helped me a lot. Hope google sites will have more features like comments etc in future.

    Reply

    • Yes, I agree. Google Sites has a lot of great features for people that manage web sites but are not necessarily professional developers. I’m glad you felt that this video helped and I appreciate the feedback.

      Reply

  6. Pingback: Enterprises Adopting "Ask the Gooru" as Their Go-To Resource for Google Apps | Taiwan Daily News Exchange

  7. Could anybody create a sites.google.com/site/… for me similar to another sites.google.com/site.. ?

    I need its copy. I do not need its content.

    I will replace the content myself with my own, that is not related to trans-that.com

    I just like how it looks

    $?

    Vic

    Reply

    • Vic,

      I’d like to help you out, but I’m not exactly sure what you mean. If you could email me with more details of what you want to do, I will be able to assist you. My email is gooru@gooruvideos.com. Thanks.

      -Google Gooru

      Reply

  8. I’m trying to put a audio player into an html box, but the editor takes the “controls” tag out of the audio element when it folds it in. Is there any way to get it to stop this or work around it?

    Reply

    • Dan,

      I’m sorry that you’re having this problem. I think I may be able to assist you further if you could e-mail me the code that you used (gooru@gooruvideos.com). There should be a way to insert an audio player without taking away the “controls” tag.

      -Gooru

      Reply

  9. At first glance I thought the html box would enable me to insert a css snip that would slightly modify the layout of the general html content in a google site page. As it turns out this isn’t possible – all html box css, js and html is scoped to that html box and can’t affect anything outside of that box. Whilst this works for some things, the html box doesn’t help me with that should be a trivial customization to a web page . Simple css tweaks pages are not possible. Editing and customizing Google sites in any way outside of the WYSIWYG editor is still a major pain.

    Reply

  10. I’ve put a number of carousels on my site using html boxes from the example. They work fine in chrome, firefox, and internet explorer 9, but disappear in ie 8. Any suggestions?

    Reply

  11. Pingback: » Enterprises Adopting « Ask the Gooru » as Their Go-To Resource for Google Apps

  12. Pingback: » Enterprises Adopting « Ask the Gooru » as Their Go-To Resourcefor Google Apps

  13. Pingback: Enterprises Adopting « Ask the Gooru » as Their Go-To Resourcefor Google Apps

  14. Pingback: Enterprises Adopting “Ask the Gooru” as Their Go-To Resource for Google Apps | Mkt PR

  15. Pingback: Enterprises Adopting “Ask the Gooru” as Their Go-To Resource for Google Apps « Inforoom

  16. Pingback: Enterprises Adopting “Ask the Gooru” as Their Go-To Resource for Google Apps | Japan Economics News

  17. Pingback: Enterprises Adopting “Ask the Gooru” as Their Go-To Resourcefor Google Apps | Japan Economics News

  18. Pingback: Enterprises Adopting “Ask the Gooru” as Their Go-To Resource for Google Apps | Market Updates

  19. Pingback: Enterprises Adopting “Ask the Gooru” as Their Go-To Resourcefor Google Apps | Market Updates

  20. Pingback: Enterprises Adopting “Ask the Gooru” as Their Go-To Resource for Google Apps | Korean News Currents

  21. Pingback: Enterprises Adopting “Ask the Gooru” as Their Go-To Resourcefor Google Apps | Korean News Currents

  22. Pingback: Enterprises Adopting “Ask the Gooru” as Their Go-To Resource for Google Apps | Infobiz Australia

  23. Pingback: Enterprises Adopting “Ask the Gooru” as Their Go-To Resourcefor Google Apps | Infobiz Australia

  24. Pingback: Enterprises Adopting “Ask the Gooru” as Their Go-To Resource for Google Apps | Deutschland Newswire

  25. Pingback: Enterprises Adopting “Ask the Gooru” as Their Go-To Resourcefor Google Apps | Deutschland Newswire

  26. Hi there, i read your blog occasionally and i own a
    similar one and i was just curious if you get a lot of spam feedback?
    If so how do you reduce it, any plugin or anything you can suggest?
    I get so much lately it’s driving me insane so any support is very much appreciated.

    Reply

  27. Pingback: How to Build a Company Intranet on Google Sites | BetterCloud BlogBetterCloud Blog

  28. hi

    It seems that jquery in the html box is not working anymore got google sites. Even the google example no longer works. It may be idea to update the video/ post.

    Reply

Leave a Reply

Required fields are marked *.