Margin-wide graphic or shading

[csp55]

Hi,

I'm working to match the style of the help with some of the look and feel of the app. One thing I'd like to do is have a gray bar (either as shading, or ideally, using the gray bar from the web app) run behind the heading text.

There's no problem having the bar display behind the text using CSS borders and shading settings. However, it's truncated to match the length of the text of the giving heading; in other words, it changes in length from heading to heading. I need it to be static and run from margin to margin.

Is it possible to do this in RH and/oro by editing the CSS file directly?

Thanks,

Carl

[Guest]

Carl,

Is your style a character-level or a paragraph-level style? I have styles for headings and paragraphs with borders and a background color that extend from margin to margin. A character-level style won't behave the way you want, but a paragraph-level style should. I set this up in RH (Format > Styles). Hope this helps,

Ben

[csp55]

Ben,

Should have mentioned that. It's a paragraph style. It's just not behaving right. But clearly, if you have margin-to-margin background colors, then it can be done, which is encouraging. I think I'll delete the Heading 1 style and recreate it and see if that fixes it.
Thanks!
Carl

[Guest]

Here's my heading 1 code from my CSS file, in case it will help:

H1 {
color: #26356d;
border: Solid 1px #cbcbcb;
background-color: #ededed;
line-height: 200%;
font-weight: normal;
font-style: normal;
font-variant: normal;
text-indent: 12pt;
margin-left: 0pt;
margin-right: 0pt;
margin-bottom: 10pt;
font-size: 14pt;
margin-top: 1pt;
}

If you like, try putting this in your CSS file instead of the existing H1, then tweak it using RH's Styles dialog until it looks the way you want. Or compare this to see what is different with the margins and background color. Let us know how it goes.

--Ben

[MergeThis]

HINT:

You can use the shorthand:

margin: < margin-top > < margin-right > < margin-bottom > < margin-left >

such as, replacing the sample:

margin: 1pt 0 10pt 0;

(Other html syntax uses shorthand properties, such as borders, backgrounds, lists, etc.)


Good luck,
Leon

[csp55]

Ben and Leon,

Worked like a charm! Thanks to you both. Not sure what in my CSS code was the problem, but I'm off and running now.

Thanks again,

Carl