Hi
Is it possible to use our own custom Icons per topic in the TOC in webhelp
Thanks
TOC
Moderators: Alexander Halser, Tim Green
- Tim Green
- Site Admin
- Posts: 23186
- Joined: Mon Jun 24, 2002 9:11 am
- Location: Bruehl, Germany
- Contact:
Re: TOC
Hi Matt,
If you want to use multiple different icons it is a bit more tricky, but also possible (only in WebHelp, not in CHM):
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.Is it possible to use our own custom Icons per topic in the TOC in webhelp
If you want to use multiple different icons it is a bit more tricky, but also possible (only in WebHelp, not in CHM):
- 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).
- 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.
- 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.
Tim (EC Software Documentation & User Support)
Private support:
Please do not email or PM me with private support requests -- post to the forum directly.
-
- Posts: 12
- Joined: Tue Jan 14, 2020 3:58 pm
Re: TOC
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
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
- Tim Green
- Site Admin
- Posts: 23186
- Joined: Mon Jun 24, 2002 9:11 am
- Location: Bruehl, Germany
- Contact:
Re: TOC
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.
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.
Tim (EC Software Documentation & User Support)
Private support:
Please do not email or PM me with private support requests -- post to the forum directly.
-
- Posts: 12
- Joined: Tue Jan 14, 2020 3:58 pm
Re: TOC
Hi Tim,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.
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.
- Tim Green
- Site Admin
- Posts: 23186
- Joined: Mon Jun 24, 2002 9:11 am
- Location: Bruehl, Germany
- Contact:
Re: TOC
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:
If you need to set different width and height for your icons, add a second value to the background-size: attribute.
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;
}
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.
Tim (EC Software Documentation & User Support)
Private support:
Please do not email or PM me with private support requests -- post to the forum directly.
-
- Posts: 12
- Joined: Tue Jan 14, 2020 3:58 pm
Re: TOC
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!
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!