Webhelp output - remove shaded box from topic title

[dchapman]

I would like to remove the box that appears around the topic title when displayed in the Content area if you choose the With Frames option. I assumed I'd find something in web help_topic.css but so far I can't. I've done a little trial and error. Should I be looking in toc.css? Which element do I edit please? Thanks so much!

[sorin_ristache]

Hi,

The selection of the Content tree node for the topic displayed in the right side panel is styled by the code at line 257 in file [Oxygen-install-dir]\frameworks\dita\DITA-OT\plugins\com.oxygenxml.webhelp\oxygen-webhelp\resources\skins\desktop\toc.css:

Code: Select all

.menuItemSelected {

  font-weight: bolder;

  background: #f9f9f9;

}

You can remove this code fragment for avoiding setting this style (a bold font style and a background color) to the selected topic.


Regards,
Sorin

[dchapman]

Thanks but I don't have the resources\skins\desktop subdirs at all. My toc.css is in resources\css. I'm using Oxygen 14.2. I did find the code you posted in the toc.css but and removed it but it made no difference.

When I choose a topic from the navigation pane, and it displays in the content area (with frames), I have a light gray box that encloses the topic title and extends the entire width of the content area. It looks like there is a light gray box and a darker gray rule, but it is actually two boxes, one dark gray with a lighter gray overlaying it but slightly narrower so the dark gray you can see looks like a rule.

During my experimenting, I was able to remove the top level lighter gray box. I made other changes I thought would work but didn't find the right combination to remove that second, darker box. I went between the toc. css and webhelp_topic.css (since what I am trying to change seems to relate to the displaying of the topic.)

Thanks,
Diana

[sorin_ristache]

Hi Diana,

Just remove or comment the background property for class menuItemSelected in the file [Oxygen-14.2-install-dir]\frameworks\dita\DITA-OT\plugins\com.oxygenxml.webhelp\oxygen-webhelp\resources\css\toc.css. That means replace the code:

Code: Select all

.menuItemSelected{

  font-weight: bolder;

  background: #f9f9f9;

}

with the code:

Code: Select all

.menuItemSelected{

  font-weight: bolder;

}

You should do the same also in the file tocWDiv.css from the same directory for having the same effect in both the internal frames version of the Webhelp (the index.html main file) and the frameset one (the index_frames.html main file).


Regards,
Sorin

[dchapman]

Thanks for trying but that doesn't do what I need either. I had tried that earlier on and just tried it again. I'll keep trial and error-ing it. I did remove the top lighter gray box at one point and there must be another element to edit for the underlaying darker gray box. When/if I figure it out, I'll post the solution here.

Thanks!

[sorin_ristache]

Hi Diana,

Do you mean that the gray background color is still there on the selected item in the Content tree after you removed from the CSS the code that I specified for the menuItemSelected class? Can you send me a zip archive with your output directory for looking at it? Please specify also if you had other changes in the Webhelp transformation (setting a transformation parameter, customizing any stylesheet, etc) other than removing that small code fragment from the oxygen-webhelp\resources\css\toc.css file.


Regards,
Sorin

[dchapman]

Sounds like a good plan. I'll email you a screen shot. We might be talking about two different areas.
Thanks.

[sorin_ristache]

Hi Diana,

Thank you for the screenshot. Yes, we were talking about different areas.

For removing both the background box and the dark grey shadow from the topic title please comment out or remove only the following bold lines from the CSS code in file [Oxygen-14.2-install-dir]\frameworks\dita\DITA-OT\plugins\com.oxygenxml.webhelp\oxygen-webhelp\resources\css\webhelp_topic.css (it works in the same way in version 15.0):

h1.topictitle1 {
color:black;
background-color:#C0C0C0;
font-size: 20px;
padding:0.3em 0 0.3em 0.3em;
margin:0 0.3em 0 0;
}

. . .

h1.title,
h2.title{
color:#333;
background-color:#ececec;
text-shadow:0 1px 0 #fff;
padding: 0.4em;
box-shadow: 0px 1px 2px #999;
/*border-radius:5px;*/
}

Regards,
Sorin

[dchapman]

Yes! That did it. Thanks so much.