TOC

HM5 served us well, now its time has come and it has been replaced... If you have HM5 questions, please post them here.

Moderators: Alexander Halser, Tim Green

Post Reply
matt harris
Posts: 27
Joined: Wed Apr 22, 2015 4:03 pm

TOC

Unread post by matt harris »

Hi

Is it possible to use our own custom Icons per topic in the TOC in webhelp

Thanks
User avatar
Tim Green
Site Admin
Posts: 23156
Joined: Mon Jun 24, 2002 9:11 am
Location: Bruehl, Germany
Contact:

Re: TOC

Unread post by Tim Green »

Hi Matt,
Is it possible to use our own custom Icons per topic in the TOC in webhelp
If you only want one set of three icons (chapter open, chapter closed, topic) this is very easy: Then you just select your own icons with the custom icons option in Configuration > Publishing Options > WebHelp > Navigation. You need to do this in your project if you are not using a skin and in your .hmskin skin if you are (you can edit the skin just like a project). Then also store the icons in the baggage files section of your project or skin. Don't use any spaces or special characters in the file names, and use either GIF or PNG files.

If you want to use multiple different icons it is a bit more tricky, but also possible (only in WebHelp, not in CHM):
  1. First select standard alternative icons for topics where you want to use them in Help & Manual, using the Change Icon option in the TOC in your project (right click for context menu).
  2. Then publish your project to WebHelp and look in the output folder. You will find a lot of icon files with names starting with "cicon". View those icons and create your own icon files using the same names, to use them in the same places as the originals.
  3. Add all your new "cicon" files to the baggage files section of your project or skin. They will then overwrite the ones in the output folder, because everything that comes out of the baggage is written last.
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.
mehrwerk_gmbh
Posts: 12
Joined: Tue Jan 14, 2020 3:58 pm

Re: TOC

Unread post by mehrwerk_gmbh »

Hi Tim,

is it possible to change the size of the topic icons?

I tried to use our own icons, but one of them is now displayed too large and therefore cut off and one is too small (although both are the same size).

Thanks a lot and best regards,

Marie
User avatar
Tim Green
Site Admin
Posts: 23156
Joined: Mon Jun 24, 2002 9:11 am
Location: Bruehl, Germany
Contact:

Re: TOC

Unread post by Tim Green »

Hi Marie,

You can change this with the CSS in the skin. How you would do this depends on the skin you are using because there are quite a few different ones. However, it would be easier to use icons of the same size as the ones being used in the skin where you are replacing them. Make a note of the names of the icons in the navigation settings and then locate them in your output. Open them in a graphics program to get their dimensions and make your own icons have the same dimensions.
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.
mehrwerk_gmbh
Posts: 12
Joined: Tue Jan 14, 2020 3:58 pm

Re: TOC

Unread post by mehrwerk_gmbh »

Tim Green wrote: Wed Jan 22, 2020 11:50 am Hi Marie,

You can change this with the CSS in the skin. How you would do this depends on the skin you are using because there are quite a few different ones. However, it would be easier to use icons of the same size as the ones being used in the skin where you are replacing them. Make a note of the names of the icons in the navigation settings and then locate them in your output. Open them in a graphics program to get their dimensions and make your own icons have the same dimensions.
Hi Tim,

sorry, I forgot to say which skin we are using. It's "Boxed_Plain_Grey_Webhelp.hmskin" from the Premium Pack.
Can you tell me the correct variable so I can adjust the size in the .css-file?
Or can you tell me where I can find the size of the standard icons? I tried to figure it out, but because the icons are .svg files, only the code from this is opened in the editor. In the code I found the size 24*24px, so I adapted our icons afterwards. But this did not change anything.
User avatar
Tim Green
Site Admin
Posts: 23156
Joined: Mon Jun 24, 2002 9:11 am
Location: Bruehl, Germany
Contact:

Re: TOC

Unread post by Tim Green »

Hi Marie,

Your icons will work best in that skin if they are square, i.e. same width as height. The size is set as 1.1rem in both dimensions, which is relative to the base font of the skin, so that they expand along with the text when you change the size. It would also be ideal if you use SVG icons, as those will scale best. Otherwise use PNG.

The size and positions of the icons for all 6 possible levels in the TOC are set separately for desktop, tablet and phone mode in the hmwebhelp_toc_desktop.css, hmwebhelp_toc_tablet.css and hmwebhelp_toc_phone.css files in the baggage. It's in the block of text that starts like this, with the additional settings for the lower levels further down:

Code: Select all

ul#toc li { 
	cursor: pointer;
	padding: 0;
	background-repeat: no-repeat;
	}

ul#toc li > span {
	display: block;
	padding: 0.143rem 0.143rem 0.143rem 1.786rem;
	background-repeat: no-repeat;
	background-position: 0.5rem 0.1rem;
	background-size: 1.1rem;
	color: #000000;
	}
If you need to set different width and height for your icons, add a second value to the background-size: attribute.
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.
mehrwerk_gmbh
Posts: 12
Joined: Tue Jan 14, 2020 3:58 pm

Re: TOC

Unread post by mehrwerk_gmbh »

Hi Tim,

found my mistake: My icons were not quite square, but the size setting in the CSS file was. So logically they were cut off.

Thanks a lot, now everything works! :)
Post Reply