Skip to main content
Jared Hess
Jared Hess
Legend
February 20, 2014
Question

How can I make a custom style look the same in both printed and online?

  • February 20, 2014
  • 1 reply
  • 573 views

My specs:

RH 9.0.2.271

Windows 7, 64-bit

Word 2010

The Background Info:

So I created some custom css styles to try and mimic the look of a message box in our documentation. Here's the css code:

.MsgBox {

    color: #000000;

    border-left-style: Solid;

    border-right-style: Solid;

    border-top-style: Solid;

    border-bottom-style: Solid;

    font-size: 10pt;

    background-color: #eeeeee;

    border-left-width: 4px;

    border-right-width: 4px;

    border-top-width: 4px;

    border-bottom-width: 4px;

    border-left-color: #cdcdcd;

    border-right-color: #cdcdcd;

    border-top-color: #cdcdcd;

    border-bottom-color: #cdcdcd;

    width: 350px;

    padding: 5px 5px 5px 5px;

    box-shadow: 10px 10px 5px #888888;

    margin-bottom: 7pt;

}

.MsgBoxTitle {

    color: #000000;

    border-left-style: Solid;

    border-right-style: Solid;

    border-top-style: Solid;

    border-bottom-style: Solid;

    font-size: 10pt;

    background-color: #cdcdcd;

    border-left-width: 4px;

    border-right-width: 4px;

    border-top-width: 4px;

    border-bottom-width: 0px;

    border-top-color: #cdcdcd;

    border-bottom-color: #cdcdcd;

    border-left-color: #cdcdcd;

    border-right-color: #cdcdcd;

    width: 350px;

    padding: 5px 5px 5px 5px;

    box-shadow: 10px 10px 5px #888888;

}

My HTML Code:

<div class="MsgBoxTitle">
    PC-DMIS MESSAGE:
</div>
<div class="MsgBox">
    <p>Please do the following steps in the indicated order.</p>
    <p>1. Remove the current SH-1/2/3 stylus.</p>
    <p>2. Attach the SHSP (Stylus Holder Setting Piece).</p>
    <p>3. Jog the probe to a safe location with a clear line of approach
     to the port(s) being calibrated. </p>
    <p>4. Then click OK.</p>
    <p>After you click OK the machine will begin DCC measurement.</p>
</div>

The Expected Output:

Here's how it renders in a browser (the title is MsgBoxTitle, the body is the MsgBox style). I'm happy with how it looks there, even if the box shadow doesn't always display:

The Ugly Printed Output:

And here's what it looks like in the printed output.

Ugly. Are there any tricks to get the printable (doc) output to match the online? Ideally, on the printed output, I'd like to have all the white space in my pseudo message box removed so it looks just like the online.

This topic has been closed for replies.

1 reply

Peter Grainge
Community Expert
Peter GraingeCommunity Expert
Community Expert
February 23, 2014

I have something similar in that the block has a coloured background with a darker border. The text is all one style rather than a combination. It does not have the white you show.

I have both styles set up independently in Rh and in Word. You don't work that way or at least, you didn't. If you have now set up a template maybe you could create the styles directly in that.

See www.grainge.org for RoboHelp and Authoring tips

@petergrainge

Use the menu (bottom right) to mark the Best Answer or Highlight particularly useful replies. Found the answer elsewhere? Share it here.
Jared Hess
Jared HessAuthor
Legend
February 26, 2014

Hi Peter. Thanks for the reply.

I assumed that if I used the project style sheet during the export, Word would convert the style so that it looked the same as in the HTML. Is that a bad assumption? I'm currently not mapping to any template equivalent for these message box styles. I did try it as one of my attempts, but I couldn't figure it out. It never seemed to take the style in the .dot.

Anyway, if I use just 1 style, such as just the MsgBox, I obviously don't get the white paragraph between the title and message. That white paragraph comes from the first <p> tag in the MsgBox style. But I need to have the <p> tags in there because they're better for our localization process than line breaks.

I did do some tweaks that made it look better. Basically I structured it so that the MsgBoxTitle div is now inside the MsgBox div. Something like this:

<div class="MsgBox">

    <div class="MsgBoxTitle">PC-DMIS MESSAGE: </div>

    <p>Please do the following steps in the indicated order.</p>

    <p>1. Remove the current SH-1/2/3 stylus.</p>

    <p>2. Attach the SHSP (Stylus Holder Setting Piece).</p>

    <p>3. Jog the probe to a safe location with a clear line of approach

     to the port(s) being calibrated.</p>

    <p>4. Then click OK.</p>

    <p>After you click OK the machine will begin DCC measurement.</p>

</div>

And then I adjusted my styles borders, padding, and thickness. That helped it look more connected, but still doesn't look quite right:

Would love to get rid of that white space after the title.

If you have time, I would be interested in a more detailed example of how you did it.

Peter Grainge
Community Expert
Peter GraingeCommunity Expert
Community Expert
March 1, 2014

Background colours can be an issue especially where more than one.

Create a new project using that CSS in one topic to show the problem and send me the project. See the Contact page on my site and send the project as instructed there. Do make sure you include a link to this thread and please do not email the project direct.

It will be ten days or so though before I can look at it.

See www.grainge.org for RoboHelp and Authoring tips

@petergrainge

Use the menu (bottom right) to mark the Best Answer or Highlight particularly useful replies. Found the answer elsewhere? Share it here.
Terms & ConditionsAccessibility statement
Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices