Feature Preview: HTML Export, Custom CSS, Part 2
In my previous post, I discussed how you can change the appearance of the HTML documents generated as part of the slide show export utility. I described how to make changes to the CSS file the documents link to, and that you could reuse that file for exports in the future.
Not all export styles use the same CSS classes. For this reason, as part oft he export process, a ReadMe document will be placed along with the export documents. This ReadMe document will contain the information you need to identify what classes are used by the docuements that have been exported.
Here is a directory listing of the target folder for the Announcements export process for the Dark style as demonstrated in an earlier post:
Announcements-001-Introduction.html
Announcements-001-Introduction.jpg
Announcements-002-Worship Band Rehearsal.html
Announcements-002-Worship Band Rehearsal.jpg
Announcements-003-Annual Ski Trip.html
Announcements-003-Annual Ski Trip.jpg
Announcements-004-Women's Retreat.html
Announcements-004-Women's Retreat.jpg
Announcements-005-Baby Dedication.html
Announcements-005-Baby Dedication.jpg
Announcements-006-Men's Prayer Breakfast.html
Announcements-006-Men's Prayer Breakfast.jpg
Announcements-007-Water Baptism.html
Announcements-007-Water Baptism.jpg
Announcements-008-Marriage Conference.html
Announcements-008-Marriage Conference.jpg
Announcements-009-Volunteers Needed.html
Announcements-009-Volunteers Needed.jpg
Announcements-010-End of Show.html
Announcements-010-End of Show.jpg
Dark-LeftArrow-Disabled.png
Dark-LeftArrow-Enabled.png
Dark-RightArrow-Disabled.png
Dark-RightArrow-Enabled.png
Dark.css
Dark.ReadMe.html
As you can see, the last file listed here is the ReadMe document associated with the style. It looks like this:
As is, the exported documents look like this:
But perhaps your web site uses the colors blue and orange, and you want the documents to match those colors.
The default CSS file for the Dark style looks like this:
body { background-color: black }
a.navigation {outline-style: none}
table.container { background-color: #333333 }
td.image { background-color: #333333; padding: 10 }
td.navigation { background-color: silver }
With the following simple changes,
body { background-color: MediumBlue }
a.navigation {outline-style: none}
table.container { background-color: Orange }
td.image { background-color: Orange; padding: 10 }
td.navigation { background-color: RoyalBlue }
we now have this look:
This information will eventually be put into knowledge base articles, but for now, this should cover what is needed to know in making basic changes to the appearance of exported slide show HTML documents. Next I'll cover the more advanced topic of using custom XSL.
(BE196)