STEP 8: Edit Nivo Slider default.html file

Nivo Slider for Google Sites

Wohphi - Building Better Communication One Person & One Business at a Time

Google Sites Tips Nivo Slider for Google Sites Access Wohphi's Nivo Slider files hosted on Google Drive Launch Nivo Slider Demo in Google Site Use Google Drive to host Nivo Slider files Sign in to Google Drive Download Google Drive Download Nivo Slider Share Nivo Slider files on Google Drive Modify Nivo Slider files Link to Share URLs Edit Nivo Slider style.css file Edit Nivo Slider default.css file Edit Nivo Slider demo.html file Launch Nivo Slider Demo in Google Sites

OPTION 2 Use Google Drive to host Nivo Slider Demo files For the DO IT YOURSELF'ers STEP 8: EDIT NIVO SLIDER DEMO.HTML FILE The Nivo Slider demo.html file needs to be modified to reflect the new file locations for your Nivo Slider Demo on Google Drive. Go to your Google Drive folder on your computer Open the demo folder under the Nivo Slider folder. Find and open the file demo.html in an editor Find and open the Google Document file titled Nivo Slider Link to Share or the file you recently created that includes all the Links to Share URLs for the Nivo Slider files. Perhaps your Google Document will look something like this below. Find and copy the default.css Link to Share URL from Nivo Slider Link to Share file you created. (NOTE: make sure you are using the URL with the uc modification to it, otherwise it will not work) Find the text ../themes/default/default.css within the demo.html file and replace it with the default.css Link to Share URL you just copied. Find and copy the nivo-slider.css Link to Share URL from Nivo Slider Link to Share file you created. (NOTE: make sure you are using the URL with the uc modification to it, otherwise it will not work) Find the text ../nivo-slider.css within the demo.html file and replace it with the nivo-slider.css Link to Share URL you just copied. Find and copy the style.css Link to Share URL from Nivo Slider Link to Share file you created. (NOTE: make sure you are using the URL with the uc modification to it, otherwise it will not work) Find the text style.css within the demo.html file and replace it with the style.css Link to Share URL you just copied. Find and copy the toystory.jpg Link to Share URL from Nivo Slider Link to Share file you created. (NOTE: make sure you are using the URL with the uc modification to it, otherwise it will not work) Find the text images/toystory.jpg within the demo.html file and replace it with the toystory.jpg Link to Share URL you just copied. Find and copy the up.jpg Link to Share URL from Nivo Slider Link to Share file you created. (NOTE: make sure you are using the URL with the uc modification to it, otherwise it will not work) Find the text images/up.jpg within the demo.html file and replace it with the up.jpg Link to Share URL you just copied. Find and copy the walle.jpg Link to Share URL from Nivo Slider Link to Share file you created. (NOTE: make sure you are using the URL with the uc modification to it, otherwise it will not work) Find the text images/walle.jpg within the demo.html file and replace it with the walle.jpg Link to Share URL you just copied. Find and copy the nemo.jpg Link to Share URL from Nivo Slider Link to Share file you created. (NOTE: make sure you are using the URL with the uc modification to it, otherwise it will not work) Find the text images/nemo.jpg within the demo.html file and replace it with the nemo.jpg Link to Share URL you just copied. Find and copy the jquery.nivo.slider.js Link to Share URL from Nivo Slider Link to Share file you created. (NOTE: make sure you are using the URL with the uc modification to it, otherwise it will not work) Find the text ../jquery.nivo.slider.js within the demo.html file and replace it with the jquery.nivo.slider.js Link to Share URL you just copied. Find the text scripts/jquery-1.7.1.min.js within the demo.html file and replace it with the URL pointing directly to the file http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js. Save the demo.html file. (NOTE: Make sure you save the demo.html file to the demo folder that will sync to your Google Drive account automatically.) Start Google Drive on your computer and the default.css should automatically sync to your Google Drive account.   On to STEP 9: Launch Google Drive hosted Nivo Slider Demo in Google Sites Back to STEP 7: Edit Nivo Slider default.css file