5 Replies Latest reply on Aug 26, 2016 4:03 AM by Peter Grainge

    Two different styles of drop-down hotspots?

    NealonUX

      Robohelp 2015. Can I make two different styles of drop-down hotspots available? For example, could I have regular drop-down hotspots italic but a special class of drop-down hotspots roman--without resorting to inline styling?

       

      Hoping for a solution within RoboHelp, but I'm open to ideas for CSS.

        • 1. Re: Two different styles of drop-down hotspots?
          Peter Grainge Adobe Community Professional (Moderator)

          Copy the dropspot style and then customise.  Repeat dose as required.

          1 person found this helpful
          • 2. Re: Two different styles of drop-down hotspots?
            prhmusic2 Level 2

            CSS would be the way to go. I have HTML code like this:
            |

            <p class="Body-Text">

                <?rh-dropspot_start class="dropspot" href="javascript:TextPopup(this)" id="a10" dataid="POPUP10"?>

                <span class="HoverIntro">Click here to view contact information...</span>

                <?rh-dropspot_end ?>

            </p>

            <?rh-droptext_start class="droptext" id="POPUP10" style="display: none;"?>

            <?rh-placeholder type="snippet" ref="Contact Information"?>

            <?rh-droptext_end ?>

            <?rh-cbt_end ?>

            |
            and then, in my CSS file, I have this:
            |

            .HoverIntro {

                font-family: Arial, helvetica, sans-serif;

                color: #0000ff;

            }

            |
            Just create a second style and change the definition to reflect the font you want, such as:
            |

            .HoverIntroSpecial {

            font-family: "Times New Roman", Times, "serif ";

                color: #0000ff;

            }

            <p class="Body-Text">

                <?rh-dropspot_start class="dropspot" href="javascript:TextPopup(this)" id="a10" dataid="POPUP10"?>

                <span class="HoverIntroSpecial">Click here to view contact information...</span>

                <?rh-dropspot_end ?>

            </p>

            <?rh-droptext_start class="droptext" id="POPUP10" style="display: none;"?>

            <?rh-placeholder type="snippet" ref="Contact Information"?>

            <?rh-droptext_end ?>

            <?rh-cbt_end ?>
            |
            Hope that helps!

             

            Paul

            1 person found this helpful
            • 3. Re: Two different styles of drop-down hotspots?
              NealonUX Level 1

              Thanks, Peter! I created the copy of the drop-down hotspot style. To use it, must I first insert the drop-down hotspot, and then go to the HTML view to change the class from [class="droptext"] to my new class? I've done that, and it works, but it would be even more amazing if I can get this second style to appear as a separate button on the insert menu.

              • 4. Re: Two different styles of drop-down hotspots?
                NealonUX Level 1

                Thanks, Paul! I'll study this. (I'm a little slow on CSS.) My colleagues would prefer a button in the RH user interface, but this may work for us. And it helps me see that if I get rid of the font styling in the rh-dropspot selector, then I have more options.

                • 5. Re: Two different styles of drop-down hotspots?
                  Peter Grainge Adobe Community Professional (Moderator)

                  In the Style and Formatting pod, right click the Dropdown style and select Duplicate.

                   

                  Once your styles are set up as required, create a dropdown, select it and then apply the appropriate style. While Paul's answer is correct, this way is easier. No need to go near the HTML.

                   


                  See www.grainge.org for RoboHelp and Authoring information

                   

                   

                  @petergrainge