Premium Pack 1.51 > For Experts: Modifying the Skins

There are two ways that you can modify the skins in the Premium Pack and make your own versions: the easy way and the hard way.

The easy way:

When you use this approach you don't need to edit any HTML or CSS code at all. You just need to replace the graphics for the skin and configure the texts and colors with the variables in the Text Variables section of the skin project.

In addition to the texts the variables defined in the skins also set the colors and styles used in the skins. Just turn off protection to make them editable (select No in the Protected column) and edit the variable values

Important: Do not add any different style attributes to the variables defining CSS styles. Only change the settings of the attributes already used.

The graphics used in the skins can be found in the /Templates/HTML Skins/Premium Pack Source folder in your Help & Manual program directory. The original Photoshop files are also included, with all the layers that we used to create the images.

You can edit these graphics in any way you like as long as you observe the following rules:

•Don't change the dimensions or names of the graphics!
The correct filenames are the GIF versions of the graphics, the Photoshop filenames do not necessarily match directly. For example, the graphics for the tabs are made from a single Photoshop file that you will need to crop twice to produce the final versions. Look at the GIF versions to see what you need to aim for.

•Don't change the positions of the lines in the tab graphics!
These are essential for getting the tabbed navigation layout to line up correctly. If you change them you will need to adjust the CSS and HTML code as well and that way madness lies – see "The hard way" below for details!

After editing the graphics just replace the versions in the Baggage Files section of the skins with your own versions. Double-check that you are using the right names for the right files when you do this!

The hard way:

If you want you are also welcome to modify, fold, spindle, mangle and mutilate the HTML and CSS code in the skins to your heart's content. However, if you do this you are entirely on your own – we can't provide you with any help and support.

Be warned that the settings in the skin code are very finely tuned. Everything has been set up so that it works correctly in Internet Explorer 7 and 6 (there are alternative settings for these browsers) and all modern standards-compliant browsers, including the new Google Chrome browser. (Internet Explorer 8 was still very buggy at the time of writing, however – some changes may have to be made after the final version of Microsoft's "browser" is released.)

If you make any changes you will need to check the results in all browsers. Be warned that getting this right is a huge amount of work that requires profound knowledge of the quirks of all the browsers involved.

The scripts used in these skins, the jQuery framework

Most of the external JavaScript files used in the skins are compressed for better performance using the Yahoo yui compressor which is highly recommended. If you would like to have the original commented scripts just send a mail to support@ec-software.com and we'll mail them to you.

The skins also make fairly extensive use of the jQuery JavaScript framework for traversing and manipulating the DOM and a couple of effects. jQuery is also a highly recommended technology and works fine in Help & Manual in both WebHelp and CHM files. In addition to all its other benefits, it makes DOM manipulation radically easier and more reliable. It is dual-licensed under the MIT and GPL licenses so you can also use it in commercial projects. The jQuery framework has now been officially adopted by Microsoft for .NET and by Drupal.

Basic background information for CSS and HTML experts:

The tabbed navigation components use the "sliding doors" technique to create tabs that expand and contract fluidly for the text they contain. If you Google CSS and sliding doors you will find lots of good tutorials on the subject.

The non-scrolling headers in the WebHelp navigation pane use the CSS display: fixed attribute because the JavaScript method used in the topic pane will not work correctly here. JavaScript is used to adjust the height of the header block for changing font sizes etc. The navigation pane non-scrolling headers will not work in Internet Explorer 6 because it does not understand display: fixed. If anyone complains about this tell them to upgrade their browser – using IE6 nowadays is seriously dangerous and the best way to get yourself and everyone else infected with spyware and viruses and to turn your computer into a spam-spewing zombie.

We have only included IE6 support at all for corporate Intranets that still depend on it for their own internal web applications. We are seriously considering discontinuing it in the future because it is now really time to stop relying on web designers to do your work for you – you need to either update your old IE6 applications or install a real browser like Firefox in addition to IE6 for communication with the modern world.

Alternative CSS and other code for the Microsoft's non standards-compliant "browsers" is inserted with conditional comments wherever possible. Use IE hacks at your peril: Changes in IE can always make them stop working.

Finally, remember that any changes you make must also be configured so that the skins will still work correctly when the user has JavaScript turned off. Getting this to work right in all browsers is a lot of work. Have fun.