How can you implement different styles for drop downs?

[fabina]

Hello Flare users, we need your support. We have different settings for the head and body of dropdowns: one with a grey background, another with a white background. So far we have created a CHM help and it worked by specifying the following in the stylesheet for drop-downs with white background:
-------------------------------------------------- --------------------------------------------------
MadCap|dropDown.WhiteBackground > MadCap|dropDownHead,
MadCap|dropDown.WhiteBackground > MadCap|dropDownBody
{
background-color: #ffffff;
padding-left: 0;
padding-right: 0;
}
-------------------------------------------------- -------------------------------------------------- ---
In the HTML5 help, the implementation is displayed as desired in the XML editor, but not in the preview and in the compiled help .

Does anyone know the problem and have a solution for it?

[NorthEast]

The problem is that you can't use MadCap| styles with any 'advanced' CSS using complex selectors; so you can't use child selectors like MadCap|xxx > MadCap|xxx { }

They work in the editor because the source files inclue <MadCap> tags in the HTML.
But in the output, all the MadCap tags in the source are converted to real HTML tags, so there are no <MadCap> tags or MadCap| CSS styles used in the output.

So, to use any 'advanced' CSS, you have to write the CSS based on the output. Use your browser tools to inspect the HTML/CSS in the output, and write your CSS based on the tags/classes that you see there; for example:

Code: Select all

.dropDown.WhiteBackground > .dropDownHead,
.dropDown.WhiteBackground > .dropDownBody
{
}

This will display fine in the output and preview, but will not show in the editor.