Details about How Cascading Style Sheets are Used to Modify Pop-Ups

This page is a companion to: http://wiki.webworks.com/HelpCenter/Tips/ResizePopups/ePublisher%209.3, "A Popup Workaround for ePublisher 9.3". This page focuses on what dummies like myself don't know about Cascading Style Sheets (CSS) and changing the look of a pop-up.

The Problem

I wanted glossary term pop-ups in my help system and I got as far as generating the help, and the pop-ups worked, but the line under the pop-up text was solid, not dashed. What I wanted was a dashed underline under the pop-up text word and maybe I wanted it to be a different color than the word itself.

If you want background in what I did in FrameMaker, let me know. Otherwise, read the ePublisherPro on-line help, which is bizarrely formatted but, unbelievably, correct on this.

In a nutshell, what I did was:

What I Tried First

In my opinion, this should have worked but it didn't.

  1. Open my ePublisherPro project.

  2. Click View > Style Designer.

  3. Click Character Styles.

  4. Click GL GlossaryLink.

  5. Click the Properties tab.

  6. On the Properties tab page, click Border.

  7. Click Bottom.

  8. Set the bottom border properties to whatever I felt like, but the best result I got was setting a white, dashed line which didn't exactly line up with the solid line. It didn't look right.

Solution

Thanks to Ben Allums and John Pitt from the WWP-Users group for setting me on the correct track. Assumption: You are outputting to WebWorks Help 5.0 format. If not, additional, or different, steps might be required.

This is how I solved it:

  1. If necessary, create a help-project-root\Files\css directory, where help-project-root is the path to your ePublisherPro project (aka, the .wep file).

  2. In the css directory, add a file named document.css. A .css file is a text file and I'll show you what to put in it in the next step.
  3. document.css consists of the following: 

/* Enter an optional comment */
span.GL_GlossaryLink > a
{
text-decoration: none;
color: #3366CC;
border-bottom: 1px dashed #3366CC;
padding-bottom: 1px;
}

First line:

span.GL_GlossaryLink > a

We'll start off with the meat and potatoes right in this line. This is the key to everything else and understanding it will make you happy.

So the HTML in the WebWorks help for one of them needs to look something like this for that rule to apply: 

<span class='GL_GlossaryLink'>
    <a href='whatever'>Glossary Term1</a>
    <a href='whatever'>Glossary Term2</a>
    ...
</span>

In fact, the WebWorks HTML is more complicated than that but it does the same thing.

Second line:

text-decoration: none;

Third line:

color: #3366CC;

This sets the color, in hex, of the text, not the underline. I chose the value of a:link from webworks.css so the text looks like any other text link.

Fourth line:

border-bottom: 1px dashed #3366CC;

This is what I wanted all the time! This sets the properties for the bottom border (that is, the underline). I set it to one pixel high and the same color as the text.

Fifth line:

padding-bottom: 1px;

This sets the amount of space between the line and the text above it.

Finishing Up

The last thing to do is reference document.css in your ePublisherPro project:

  1. Open your ePublisherPro project.

  2. Click View > Style Designer.

  3. Click Page Styles.

  4. Click the name of a page style. Note: If you don't know which one to use, either apply the same changes to all of them or use the alternative suggestion that follows this procedure.

  5. In the right pane, click Options.

  6. Click the square button next to Custom document css file.

  7. Browse to locate document.css. If you can't locate it, you probably created it in the wrong directory.
  8. Save the changes to your project and generate it. You should see the change right away.

Alternate Procedure

This is courtesy of Ben Allums:

If you want this on every generated page period, you can add it to your Page.asp template:

  1. Create an override for Page.asp (Target or Format): Formats\format-name\Pages\Page.asp

  2. Copy your document.css file into position: Formats\format-name\Pages\css\document.css

  3. Edit the Page.asp to reference/copy the CSS file: 
  4. <link rel="" href="css/document.css" wwpage:attribute-href="copy-relative-to-output" type="text/css" media="all" />
  5. The magic is in the attribute: wwpage:attribute-href="copy-relative-to-output" which will take your "document.css" file along for the ride and fix up the file path as necessary.

HelpCenter/Tips/ResizePopups/ePublisher 9.3/PopupsAndCSS (last edited 2008-06-06 02:16:44 by SteveJohnson)