This "Productivity Tip" box: term for it + how I make one?

Please post all questions and comments regarding Help & Manual 7 here.

Moderators: Alexander Halser, Tim Green

Post Reply
Dave Gehman
Posts: 575
Joined: Sat Sep 23, 2017 9:05 pm

This "Productivity Tip" box: term for it + how I make one?

Unread post by Dave Gehman »

I'm trying to make an instant frame into which I will put tips.

Here's a great example of what I want, clipped from H+M Help:
Image

That is, I'd like a...
  • Box with icon at upper left
    Recurring tag, "Productivity Tip" (so it's always there automatically with each newly spawned tip-box)
    Automatic space to write the tip
How can I make one of these what-d'ye-call-its so that with one click, it's in my text and ready for me to add the new tip copy?
User avatar
Tim Green
Site Admin
Posts: 23155
Joined: Mon Jun 24, 2002 9:11 am
Location: Bruehl, Germany
Contact:

Re: This "Productivity Tip" box: term for it + how I make on

Unread post by Tim Green »

Hi Dave,

These productivity tip boxes consist of just a table style and custom toggle icons. They are not an integrated feature of Help & Manual but they are quite easy to make.

You can also see examples of these elements in the full original source project of Help & Manual's own help, which is included with Help & Manual. You can find it in your Documents directory, in My HelpAndManual Projects > Examples > HelpAndManual7. In addition to this you should also look in the other projects in the Examples folder, you will find a lot of useful tips and tutorials there.

These table boxes are are basically just plain, single-celled tables, with borders and backgrounds if you like, and styles for the text inside them. The only tricky part is the offset icon over the corner in CHM and WebHelp, which is created using CSS styles. To make this work you need to assign IDs to the tables and the icons you use. Since you have to make quite a lot of entries for this it is a good idea to make blank versions of the tables complete with the icons and save them as "snippets" as explained above for the toggles, then you can insert the ready-to-use table with a couple of clicks.

Step 1: First you need to add the CSS code for the tables and the icons to your HTML page template. The example below has settings for the two different tables used in the Help & Manual help: overview-table is the one with the light bulb icon, callout-table is the one with the green flag or the gold star. There are two different definitions because the icons have different sizes and need different offsets. Also, I have applied some styles for any hyperlinks inside the tables. These styles can be adjusted any way you like depending on how you want your own links in these tables to look.

In your project go to Project Explorer > Configuration > HTML Page Templates > Default and add the following block of code directly before the closing </head> tag:

Code: Select all

<style type="text/css">
   #callout-table, #overview-table {display:block; position:relative;
top:0; left:0;}
   #callout-icon {display:block; position:absolute; top:-11px; left:-11px;}
   #callout-icon-flag {display:block; position:absolute; top:-11px; left:-8px;}
   #callout-table a {text-decoration: none; color: blue;}
   #callout-table a:visited {text-decoration: none; color: blue;}
   #overview-table a {text-decoration: none; color: black;}
   #overview-table a:visited {text-decoration: none; color: black;}
   #callout-table a:hover, #overview-table a:hover {text-decoration:
underline;}
</style>
The first block of three lines controls the icon positions, the second block of five lines controls the appearance of hyperlinks inside the tables.

Step 2: Locate the icon files you want to use in the "Graphics Buttons" subfolder of the HM help project and copy them to your graphics folder. (You can find this project in your Documents folder in My HelpAndManual Projects\Examples\HelpAndManual5 -- you can also look at and copy examples of the tables used in this project.)

Step 3: In an empty paragraph set centered alignment (to center the table) and create a new table with these settings:

Rows: 1
Columns: 1
Table-ID: callout-table (this MUST match the name applied in the CSS code above!!)
Size table manually, width: x pixels (set the width you want in pixels)

The most important setting here is the ID, which you MUST set to "overview-table" (for the lightbulb version) to match the ID referenced in the CSS code you inserted in step 1. It is also advisable to set a fixed width in pixels and have only one line and one row, for a single-cell table.

Step 4: When you insert the icon for the image in the corner you must also add an ID in the Picture ID: field and this ID must match the ID from the CSS code above, i.e. "callout-icon" or "callout-icon-flag" depending on the settings you want to use for that particular icon.

That is basically it. If you're not sure have a look at the originals in the source code in the Help & Manual help project. Here too, it's a good idea to save a ready-to-use toggle as a snippet so that you can insert it quickly.

Time-saving tip: Save objects as snippets for reuse

When you create formatted objects like this that you want to use frequently it saves a lot of time to save them as snippets so that you can use them again quickly. You can do this with the entire toggle, including both the heading and the table for the toggle content:
Create a dummy object that is set up exactly as you want to use it and select it in the editor, taking care to select everything that you want to reuse.

Select File > Save Snippet in the Project > Manage Topics tab and save the snippet in your project folder with a descriptive name.

To use the snippet, click in the place where you want to insert a new toggle, select the Snippet tool in Write > Insert Object and the options "From File" and "Copy & paste into text". Then select the snippet and click OK.
Regards,
Tim (EC Software Documentation & User Support)

Private support:
Please do not email or PM me with private support requests -- post to the forum directly.
Dave Gehman
Posts: 575
Joined: Sat Sep 23, 2017 9:05 pm

Re: This "Productivity Tip" box: term for it + how I make on

Unread post by Dave Gehman »

Amazing support on your part, Tim, very much appreciated.

I had thought it would be just a quick map between my semi-inarticulate description and the right words to look up in H+M help - 'table and toggle' - and having those allows me to move miles ahead of where I was.

Your step-by-step is above and beyond... again, appreciated.

I have a few hours of relaxation from my break-neck project while the developers wrestle with some bugs that emerged while I was creating the docs. That gives me some welcome time to experiment with your methods & steps.
Dave Gehman
Posts: 575
Joined: Sat Sep 23, 2017 9:05 pm

Re: This "Productivity Tip" box: term for it + how I make on

Unread post by Dave Gehman »

In your project go to Project Explorer > Configuration > HTML Page Templates > Default and add the following block of code directly before the closing </head> tag:
Tried to find this in HelpAnManualProjects>Examples>HelpAndManual 7>helpman.hmxp... but it wasn't there. Even searched with several tools and #callout-table just isn't to be found.

Clearly the tip box works in the actual help file... but where is this CSS code placed?
User avatar
Martin Wynne
Posts: 2656
Joined: Mon May 12, 2003 3:21 pm
Location: West of the Severn, UK

Re: This "Productivity Tip" box: term for it + how I make on

Unread post by Martin Wynne »

Dave Gehman wrote:Clearly the tip box works in the actual help file... but where is this CSS code placed?
Hi Dave,

Here -- you could open the helpman.hmxp file in H&M:
hm_page_templates.png
For your own work make sure you are editing the skin and not the project. Insert the new code immediately above the </head> line.

cheers,

Martin.
You do not have the required permissions to view the files attached to this post.
Dave Gehman
Posts: 575
Joined: Sat Sep 23, 2017 9:05 pm

Re: This "Productivity Tip" box: term for it + how I make on

Unread post by Dave Gehman »

Martin, sorry, should have gone on down the tree when I indicated where I was looking. That's where I was: Configuration > HTML Page Templates > Default.

I don't have the two other types in your screenshot (Grey.bgnd; White.bgnd). I'm working with H+M 7.3.2 Build 4260.
User avatar
Martin Wynne
Posts: 2656
Joined: Mon May 12, 2003 3:21 pm
Location: West of the Severn, UK

Re: This "Productivity Tip" box: term for it + how I make on

Unread post by Martin Wynne »

Dave Gehman wrote:I don't have the two other types in your screenshot (Grey.bgnd; White.bgnd). I'm working with H+M 7.3.2 Build 4260.
Hi Dave,

Those are my custom templates. No-one else has them either. That's where your custom templates will appear if you create any.

cheers,

Martin.
Dave Gehman
Posts: 575
Joined: Sat Sep 23, 2017 9:05 pm

Re: This "Productivity Tip" box: term for it + how I make on

Unread post by Dave Gehman »

This is all I have for the "body" section (and a little more) of Default:
Image

I just checked for the possibility that a skin is interposing itself -- and the Edit > Publish dialog seems to be telling me that this file is using HM7-Help-CHM-only.hmskin and gives me the directory info. I'll look into that hmskin.

Meanwhile, I have a task just handed me, so the next installment of this drama will be later.
Dave Gehman
Posts: 575
Joined: Sat Sep 23, 2017 9:05 pm

Re: This "Productivity Tip" box: term for it + how I make on

Unread post by Dave Gehman »

Yes, the applicable CSS code is in the skin file.

This means I'll have to remember to make a copy of the skin, edit it, place it in the H+M project folder and point to the right copy of the skin in the publish dialog....

Other than the rather dangerous and random holes in my memory*, I guess this is on the way to being solved.

Photo of my memory:
Image
Dave Gehman
Posts: 575
Joined: Sat Sep 23, 2017 9:05 pm

Re: This "Productivity Tip" box: term for it + how I make on

Unread post by Dave Gehman »

Is there a way to get this kind of "Productivity Tip" formatting into Word DOCX output as well as WebHelp output?

(It looks as though the instructions earlier in this thread apply to HTML outputs only).
User avatar
Tim Green
Site Admin
Posts: 23155
Joined: Mon Jun 24, 2002 9:11 am
Location: Bruehl, Germany
Contact:

Re: This "Productivity Tip" box: term for it + how I make on

Unread post by Tim Green »

Dave Gehman wrote:Is there a way to get this kind of "Productivity Tip" formatting into Word DOCX output as well as WebHelp output? (It looks as though the instructions earlier in this thread apply to HTML outputs only).
Yes, that's HTML only because it is only the CSS that makes it possible, and CSS isn't available in Word or PDF. There's no way to achieve the same effect there from within Help+Manual because you can't shift a graphic over the edge of a table.
Regards,
Tim (EC Software Documentation & User Support)

Private support:
Please do not email or PM me with private support requests -- post to the forum directly.
Dave Gehman
Posts: 575
Joined: Sat Sep 23, 2017 9:05 pm

Re: This "Productivity Tip" box: term for it + how I make on

Unread post by Dave Gehman »

Thanks. I'll be thinking about this in detail after current projects are off the table.
Post Reply