Text Popup Styling

[gpetta]

Hello,
I am using Flare 11.1.2 and outputting HTML 5 Tri-pane. I am using text popups in my content and I would like to have a different look for some of the popups. For example, some popups will have the default grey background and arrow and some will have a green background and green arrow. I think I figured out how to create a popup class and apply it so the popup background is green but I can't figure out how to change the arrow to green.

When I use the developer tools in IE the popup arrow is the span.MCTextPopupArrow class. If I change this it will change all of the popup arrows in the project to green and I only need the popups with a green background to have a green arrow.

These are my css entries for creating the green background popup:

MadCap|popup.Green
{
background-color: #ffffff;
}

MadCap|popupBody.Green
{
background-color: #00eb65;
}

How do I also get the popup arrow to be green? What values do I need to add to my css to make this happen? When a popup is required to be green the content owner (non-technical user) needs to be able to apply class to the popup in the XML editor. So modifying any code using the text editor is not an option.

Additionally, but not as important as my first question, how do I add borders around the popup body? I would rather have white background with a green border but when add a border to the popupBody style they don't show up when I preview or build the project. Do popups even support borders around the popup body?

Thanks

[LTinker68]

When you build the output using the out-of-the-box styles for popup text, it resolves to the following:

Code: Select all

<p><a href="javascript:void(0);" class="MCTextPopup popup popupHead">Click Me!<span class="MCTextPopupBody MCTextPopupBody_Closed needs-pie popupBody"><span class="MCTextPopupArrow"></span>Just a test</span></a>

As you can see, there are a lot more classes involved than just the base popup and popupBody classes. You'll probably need to manually define one of those classes in your stylesheet so you can override the default behavior. I'm not sure if you were talking about an arrow next to the clickable text or if you wanted an arrow in the text that appears, so which one to adjusts depends on where you want the arrow.