Styles and Formatting

Homepage Slideshow

There are three files necessary to make the homepage slideshow work: structure, images, and text. These files are grouped within the slideshow folder in your website's includes folder. The structure file is used only during initial setup. Day-to-day content editing is done in the images and text files. Please be aware that a maximum of 6 images and 6 corresponding text items can be displayed in the slideshow.

The images file contains all images for the slideshow placed in this file in the order that you want them to appear in the slideshow. The text file contains the corresponding text for each slideshow image in the order that you want them to appear in the slideshow.

Adding an item to the slideshow

Images

  1. Create the image exactly 72 ppi and 458 pixels x 278 pixels.
  2. Save the image for the web following the optimization guidelines in the formatting guide for images.
  3. Open the images file in SiteExecutive.
  4. Figure out where in the slideshow you want to place the new image. Depending on where the new image will be placed, follow one of the following directions and then proceed to step 4:
    • If you want to add the image as the first image in the slideshow, click to the right of the current first image in the file and then press the left arrow key on your keyboard. Then press "enter" or "return" on your keyboard. Click in the empty paragraph space that was just created above the image.
    • If you want to add the image in any other location in the slideshow, click to the right of the image above which this new image will be inserted. Press "enter" or "return" on your keyboard to create a new paragraph below the previous image.
  5. Click on the "Insert/Add Image" button in SiteExecutive.
  6. Select the image you want to insert. Insert text into the "Alt Text" field that accurately describes the text.
  7. Make a note of the placement of this new image and be sure to add text to the "text" file that coordinates with the newly added image in the proper position.
  8. Do not publish this file until you have published the text file.

Text

  1. Write a headline and small blurb to correspond to your newly placed slideshow image.
  2. Open the text file in SiteExecutive. The text for each slideshow image is contained within an unordered list item. The first list item corresponds to the first image, the second list item corresponds to the second image, etc…
  3. Create a new list item at the appropriate place in the current list to correspond with your new image.
  4. Type in a short headline (5-8 words). Press and hold shift + ”enter” or “return” on your keyboard to create a line break. Your cursor should be on the line directly below the headline. If you accidentally created a new list item by not pressing and holding shift, press “backspace” or “delete” on your keyboard to try again.
  5. On the line directly below the headline, enter a small amount of summary text (50-60 words).
  6. Highlight the headline. From the "Style" dropdown, select "slideshow_headline." This should make the headline larger than the summary text.
  7. Save the text file and publish.
  8. Publish the images file.
  9. Important – preview your changes in your website to make sure the slideshow is working properly.

Removing an item from the slideshow

Images

  1. Click on the image you would like to delete form the slideshow.
  2. Press "backspace" or "delete" on your keyboard twice: once to delete the image and once to delete the empty paragraph.
  3. Make sure to delete the corresponding text in the "text' file.
  4. Do not publish this file you have published the text file.

Text

  1. Open the text file in SiteExecutive.
  2. Highlight all the text in the list item you need to delete.
  3. Press "backspace" or "delete" on your keyboard twice: once to delete the text and once to delete the list item.
  4. Save the text file and publish.
  5. Publish the images file.
  6. Important – preview your changes in your website to make sure the slideshow is working properly.

Tips

  1. Inside the structure file, do not warp the images or text modules in table or div wrapers.  On "Object Inclusion Properties" of the included images or text module, select blank from the drop-down box for "Wrap Content With".