I hope yesterday’s post about a building a custom textbox was helpful. Today I’m going to show you how to reuse the textbox throughout your help project.

This stumped me for a bit…because I was all caught up in making this awesomely cool textbox and never thought about how to reuse it easily. But when I figured it out, I was mad that I hadn’t thought of it right away.

So, here we go:

Once I open the topic where I created the textbox, I click on the outermost <div> tag. You’ll see that all of the text inside the <div> have been selected. This means you’ve selected all the right stuff.

Now, I right click on the same <div> tag and select Create Snippet.

When the Create Snippet window opens, I name the new snippet Callout and I make sure the snippet replaces the original source code.

“But wait,” you say, “if I make a snippet, I can’t change it!”

Ah, don’t worry…here’s where the fun starts. I have my handy dandy snippet and I’m cookin’ with gas!

Now, I open a topic where I want to use the textbox and insert my snippet.

I right-click on the snippet block tag and select Convert to Text.

Instead of the snippet block, there are now HTML tags and I’m ready to add whatever text is needed. W00t!

Try it, let me know if you like it!

I’m working on an WebHelp project where I need a call-out on the right side of the screen. I didn’t want to do a regular text box because…well, because I’m pretty inept at colors and design. So instead of dooming the project to ugly color schemes, I asked our resident web/graphic designer, Chris Flick, to build a text box for me. Chris is also an amazing artist and you can see his cartoon work over at www.capesnbabes.com.

Anyway, as expected, he sent over a lovely design:

And no freaking out about the bullet in the design. I support the United States Marine Corps by writing help for them and they like bullets!

Anyway, this design wasn’t going to be accomplished just by a single div tag with a top and bottom border of dashed lines. First, the dashed lines were thinker and longer than the dashed lines found in CSS. AND the designer wanted the bullet to remain in the upper right hand corner no matter how large the text box became. To make matters even more complicated, I had to build this to support IE6…meaning no CSS3, no multiple background images, etc. Yeah me.

Chris and I determined that the best alternative was to create nested divs.

Div1 would be the top border and bullet:

Div1

And Div2 would be the bottom border image:

The final component is the background color that is applied so there’s no gap (like you see above) when the text extends beyond the lenth og Div1.

Let’s put these together so they look lovely!

First, I created a new topic and left the Heading 1 there and copied the default <p> tags a couple of times – just to give some size to the topic.

Then I created a new style class for <div> – I called it div.callout_main. Here are the settings for it:

Some things to note about the styling:

  • Here is where I set the background color. Doing this prevents white space from appearing under your background image.
  • I set the background image, the one with the top border and the bullet on it, to not repeat and start in the top left corner, the default setting.
  • Padding-right is set to 35px so text doesn’t run in to the bullet in the image.
  • Min-height is set so the entire image shows every time. If you don’t set this and you only have a bit of text, only part of the bullet will show. Remember, a <div> is only as large as what’s inside unless you set the height and/or width.

Now I’m going to create another <div> class called div.callout_bottom. Here are the settings for it:

The styles are much simpler for this:

  • The width is set to 323px.
  • The background image for this is bottom border image set to not repeat and start in the bottom left of the div tag.

OK, now that I’ve created these two classes of <div> tags, let’s assemble them in to a text box!

First highlight all of the tags including the H1 in the topic and click Tab. When the Create Group box opens, I select div.callout_main.

Once I make the selection, the content in the XML Editor will look like this:

It’s not exactly what I had in mind….but then again, I’m not done. So, before we panic, let’s continue.

Now I will click on the <div> tag I just created and then click Tab. When the Create Group box opens, I select div.callout_bottom.

We see that almost every problem we saw above has been resolved by the application of that new <div> tag. This is so because the width I set for the div.callout_bottom constrains the text box.

But here’s the test….how does it look in the output?

Here it is:

Not bad! Let me know if you something like this. In the next post, I’ll show you how to turn this in to a snippet and then use it whereever it’s needed (and add text as needed too!)