Feature Preview: HTML Export, Custom CSS
The new slide show export feature in SongShow Plus provides a few style options when exporting to HTML. One option is Plain. When using this option, you will get very basic HTML that includes links to the slide image and neighboring documents. It is basically, well, plain.
Another similar option is Simple. Like, Plain, the Simple style doesn't include any formatting, other than to center the images and text. However, it does make use of Cascading Style Sheet (CSS) classes. Because of this, you can actually take the Simple output and make it look much better with just a few tweaks to the CSS file.
To export a SongShow Plus slide show, from Slide Show Builder, select the menu command File > Export To > HTML. This will open the Export Slide Show to HTML wizard. Follow the steps.
Here is what the announcement slide show looks like when exported using the Simple style option:
And here is what the same slide show looks like after a few changes to the CSS file:
The CSS file used by the Simple style looks like this:
p {text-align: center}
Very simple.
However, in addition to the standard CSS classes, the Simple style uses the following additional classes:
- p.image
- Used for the paragraph containing the image.
- p.navigation
- Used for the paragraph that contains the navigation links.
- a.navigation
- Used by the the navigation links anchor tags.
So after generating the HTML documents, I went to the output folder, opened and then modified the CSS file used by the Simple style. The file name is Simple.css. Here are the changes I made:
body { background-color: black }
p { text-align: center }
p.image { background-color: #333333; padding: 10 }
p.navigation { background-color: gray; padding: 5 }
a.navigation { text-decoration: none; font-weight: bold}
a:link.navigation { color: white }
a:visited.navigation { color: white }
a:hover.navigation { color: cyan }
a:active.navigation { color: white }
As you can see, with these changes, I have modified the background color of the document, modified the background color behind the image, and the background color behind the navigation links. I have also altered how hot-links work, by removing the underline and making all of the colors the same except for hover.
Since all of the documents generated in the export process link to this same CSS file, changing the file affects the appearance of all of the documents that were generated for this slide show. Very handy.
Even better, if I like this CSS file and want to reuse it, the export process gives me the option to choose an alternate CSS file (Style > Use an alternate CSS file). To reuse this CSS file, I can make a copy of it and store it somewhere else on my system. Just to keep track of it better, I'm even going to rename it to EnhancedSimple.css so that when looking for it, I'm reminded that it's an enhanced version of the Simple style.
Making changes like this requires an understanding of CSS for HTML. If you would like to learn more about CSS, a good start is to review the CSS tutorial at w3schools.com.
Note: The examples above are not applicable to the 5/5/2009 beta release. Changes have been made since then to the export process. These changes will be available in the next beta release at which time you can use the above examples as a guide to make your own CSS files. The HTML export is a new feature in the May 2009 Edition for those with a Professional Level license of SongShow Plus.
(BE195)