Skip to main content
N
NealonUX
Participating Frequently
August 25, 2016
Question

Two different styles of drop-down hotspots?

  • August 25, 2016
  • 2 replies
  • 867 views

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.

This topic has been closed for replies.

2 replies

P
prhmusic2
Inspiring
August 25, 2016

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

N
NealonUXAuthor
Participating Frequently
August 25, 2016

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.

Peter Grainge
Community Expert
Peter GraingeCommunity Expert
Community Expert
August 25, 2016

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

Use the menu (bottom right) to mark the Best Answer or Highlight particularly useful replies. Found the answer elsewhere? Share it here.
N
NealonUXAuthor
Participating Frequently
August 25, 2016

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.

Peter Grainge
Community Expert
Peter GraingeCommunity Expert
Community Expert
August 26, 2016

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

Use the menu (bottom right) to mark the Best Answer or Highlight particularly useful replies. Found the answer elsewhere? Share it here.
Terms & ConditionsAccessibility statement
Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices