Wohphi logoNivo Slider for Google Sites
line dash
Wohphi - Building Better Communication One Person & One Business at a Time
OPTION 2

Use Google Drive to host Nivo Slider Demo files
For the DO IT YOURSELF'ers

STEP 7: EDIT NIVO SLIDER DEFAULT.CSS FILE

The Nivo Slider default.css file needs to be modified to reflect the new file locations for your Nivo Slider Demo on Google Drive.
  1. In the Google Drive folder on your computer find the default folder found in the theme folder within the Nivo Slider folder.

    Google Drive folder on your computer

  2. Find the default.css file within the default folder and open it in an editor

    Nivo Slider default folder in Google Drive

  3. Next find the file you created titled Nivo Slider dev7link id and copy the entire id text for #dev7llink and paste it at the top of the default.css file.

    Why? This puts all the images called within the CSS files in one place, simplifying any future edits.

    Nivo Slider default.css id #dev7link

  4. Find and open the Google Document file you created titled Nivo Slider Link to Share that includes all the modified Links to Share URLs for the Nivo Slider files. Perhaps your Google Document will look something like this below.

    Modified Nivo Slider Google Drive Links to Share

  5. Find and copy the dev7logo.png 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)

  6. Find the text images/dev7logo.png within the default.css file and replace it with the dev7logo.png Link to Share URL you just copied.

    Found within the id #dev7link under background. It should look something like this below.

    replace images/dev7logo.png with Link to share URL

  7. Find and copy the loading.gif 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)

  8. Find the text images/loading.gif within the default.css file and replace it with the loading.gif Link to Share URL you just copied.

    Found within the class .theme-default .nivoSlider under background. It should look something like this below.

    replace images/loading.gif with the Link to share URL

  9. Find and copy the bullets.png 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)

  10. Find the text images/bullets.png within the default.css file and replace it with the bullets.png Link to Share URL you just copied.

    Found within the class .theme-default .nivo-controlNav a under background. It should look something like this below.

    replace images/bullets.png with the Link to share URL

  11. Find and copy the arrows.png 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)

  12. Find the text images/arrows.png within the default.css file and replace it with the arrows.png Link to Share URL you just copied.

    Found within the class .theme-default .nivo-directionNav a under background. It should look something like this below.

    replace images/arrows.png with the Link to share URL

  13. Save the default.css file. (NOTE: Make sure you save the default.css file to the default folder that will sync to your Google Drive account automatically.)

  14. Start Google Drive on your computer and the default.css should automatically sync to your Google Drive account.

STEP 7 Done! Your default.css file has been modified. Only one (1) more files to Edit / modify before you launch your very own Nivo Slider Demo on Google Sites.

On to STEP 8: Edit Nivo Slider demo.html file

Back to STEP 6: Edit Nivo Slider style.css file



Comments