Drop-down Head Class inheritance?

[BrienneOfTech]

Hi guys,

I've read a few forum entries (such as: viewtopic.php?f=6&t=21872&p=111083&hili ... wn#p111083) about drop-downs and creating a different style for different drop-down headings. None of them have solved this problem for me.

My Medium is Non-Print. I've created a new class called "DropDownHead.H3" and given it a large, grey font. It's bold and gorgeous and totally different to the small drop-down parent. This will be used for another style of note/tip, etc. But whenever I apply it, the Drop-down headings inherit from the parent and WILL NOT CHANGE. It's doing my head in. I've opened the Style sheet in NoteTab and it looks okay...

I can select it in the UI, apply it, but the preview (and build) shows no change.

There must be something SUPER simply I'm doing wrong.

Please help?

Amanda

[NorthEast]

The headings already have styling, so did you do this using dropDownHead or dropDownHotspot?

Just if dropDownHotspot is styled too, that sits inside dropDownHead, so it would override the styles in your dropDownHead class.

[BrienneOfTech]

Hi Dave - thanks for replying.

I went to the Hotspot because I'd already tried making a class (.H3) for the DropDownHead and it also didn't display any differently that the default.

It's really doing my head in.

I just want a couple of different DropDownHead styles I can select for different lists. I can change the look and feel of the default one, but can't seem to create a new class without it inheriting - or breaking - the parent. As you can see, the DropDownHead is still inheriting the small-caps from the parent, even though I have specified "normal" in the style sheet for the H3 class.

Gah! I'll admit, I'm not super savvy when it comes to non-basic CSS, but I can't see why it's not working.

Amanda

[ChoccieMuffin]

Brienne, I think Dave is suggesting you add your classes to DropDownHotspot, not to DropDownHead.

Give that a go and see if it works for you.

[BrienneOfTech]

Weird. I started with the DropDownHotspots and no dice. Moved on to the DropDownHeads. No dice.

So I deleted a bunch of stuff. I started again and tried manipulating the hotspots again, as suggested. I had to manually enter the class in the HTML (not from the WYSIWYG). I think that's why I was confused about it. I'd be selecting a SecondLevel style, but it was for the DropDownHead, not the HotSpot.

Now it works!!!!

Thank you for pointing me in the right direction.

Amanda

[NorthEast]

I had to manually enter the class in the HTML (not from the WYSIWYG).

You don't need to do that - you can select the class by right-clicking the dropDownHotspot bar.
Its bar isn't displayed on the left though, when your cursor is inside the hotspot, you'll see its bar at the top of the page, and also hovering above/below your cursor (you can see it in your screenshot above).

[Patt]

I can change the look and feel of the default one, but can't seem to create a new class without it inheriting - or breaking - the parent.

I can't seem to change the look and feel of the default drop-down hotspot or head.
In the MadCap| dropDownHotspot style I have the font color set to black, sytle = Normal, and weight = bold
Hovever, when I generate the help, it always comes back with green and italics. URG!

I don't see what could be overriding the style sheet when I look at the code.

I understand your solution was to add new style and a "Second Level" but you lost me on the Second Level. I don't really need multiple styles all I really wanted to do was alter the default style but I can't seem to.

Any more details or directions would be greatly appreciated.

[BrienneOfTech]

Dave Lee - thank you!!!! I had no idea that the HotSpot bar was a floating one, not a left-hand-side "locked" one.

Saved me HEAPS of time. Thanks so much! Champion!

Amanda

PS. Patt, I directly edited my DropDownHead to change the look and feel of the default hotspot. I think it inherits from that DropDownHead style - which is why I had to make other hotspot styles for other purposes. Hope that helps. As you can clearly see, I'm not the expert here, though!

[Patt]

Amanda,
I believe I have done exactly what you did but I am still not getting any change in the style to display.

drop down head style.PNG

I want the drop down head to be black, Bold, and Normal,
But here's what I continue to get.

published drop down head.PNG

I updated both the Dropdown Head and the Dropdow Hot spot because I wasn't getting any changes after I updated just the hot spot style. Here's what the style sheet looks like.

drop down style sheet.PNG

If anyone can point me in the right direction I would greatly appreciate it. Because this just isn't making sense.

Thanks,

[Mike Kelley]

Try modifying the CSS in the text editor. Here's my CSS for dropdowns:

Code: Select all

MadCap|dropDownHead
{
	padding: 4px 16px;
	text-shadow: 1px 1px 1px rgba(255,255,255,0.8);
	background: linear-gradient(#fff, #eee);
	box-shadow: 0px 0px 0px 1px rgba(155,155,155,0.3), 1px 0px 0px 0px rgba(255,255,255,0.9) inset, 0px 2px 2px rgba(0,0,0,0.1);
}

MadCap|dropDownBody
{
	padding: 16px;
	margin: 0;
	border: 1px solid #ddd;
}

MadCap|dropDown
{
	margin-top: 8px;
	mc-image-position: right;
	mc-closed-image: url('../Images/doubleChevronDownSmall.png');
	mc-open-image: url('../Images/doubleChevronUpSmall.png');
	mc-image-spacing: 16px;
}

MadCap|dropDownHotspot
{
	color: #555555;
	display: block;
}

And this is the result:

dropdowns.png