Customize the slide show background

Publish

Platform_KC
On Premises

Create slide backgrounds using an image so it's easy to customize the backgrounds by changing the colors or adding a logo or graphic; all you need to do is create and add a new image. You can also edit the background images supplied with the presentation.

Slide shows use two background images:

  • Title background: usually with more color, and a larger logo or graphic, to create impact.
  • Slide background: continues the color and theme from the title slide, but also includes an area to display the slide content.

Title.css or slide.css reference the background image associated with the presentation.

To customize the slide show background:

  1. Create a new background image.
    1. Create a new JPG or GIF image sized to match your screen resolution, for example 1024 x 768 px.
    2. Add the image file to the presentation folder in ../Templates/Presentations.

      The new background must be included in the book template as an additional file so it is added to the publishing folder for the presentation.

  2. Add the graphic to the book's additional files.
    1. Open the book template for the presentation.
    2. On the HTML tab add the image as an additional file.

      The new background image must be referenced in the style sheet so it is used when the presentation is published.

  3. Modify the style sheet.
    1. Open your presentation's folder in ../Templates/Presentations.
    2. Open the title or slide style sheet in Notepad or an HTML editor.
    3. Locate the tag "body.title {" (in title.css) or "body.slide {" (in slide.css).
    4. Locate "background-image: url(".
    5. Change the value to your .JPG or .GIF file.
    6. Save and close the style sheet.

Note: When you change the background image you might also need to modify the text styles and bullet images used in the slides. For example, if you decide to customize the background for the title slide so it uses a white or lightly colored image. However when you publish and view the presentation you find the heading is no longer visible. This is because the font color attribute in the Heading 1 style in the default title.css is set to white. Changing the font color attribute in the title.css will correct the display.