image toggle magnifier svg

Please post all questions on Help+Manual 8 here

Moderators: Alexander Halser, Tim Green

Post Reply
Andie Davidson
Posts: 17
Joined: Wed Apr 05, 2017 9:38 am

image toggle magnifier svg

Unread post by Andie Davidson »

Is there any way of editing the svg class path? Or is it hard-coded in the program? I'd quite like to tweak/change the magnifier image, not just fill and stroke.
User avatar
Tim Green
Site Admin
Posts: 23156
Joined: Mon Jun 24, 2002 9:11 am
Location: Bruehl, Germany
Contact:

Re: image toggle magnifier svg

Unread post by Tim Green »

Hi Andie,

You can edit the entire SVG image in any way you like. To do this, locate it in your WebHelp output folder and edit it in a graphics program supporting SVG (for example the free Inkscape) or by editing the source in the file directly in a text editor. Then edit the .hmskin file you are using for WebHelp output in Help+Manual. Look in the Project Explorer on the left, navigate down to Project Files > Baggage Files, select Add File in the Project tab and add your edited version to the Baggage and save the skin.

The files in the Baggage are always written last and will silently overwrite any existing files with the same names in the output folder. This is by design, allowing you to replace anything generated by Help+Manual with your own version. 8)
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.
Andie Davidson
Posts: 17
Joined: Wed Apr 05, 2017 9:38 am

Re: image toggle magnifier svg

Unread post by Andie Davidson »

Excellent. Thank Tim. Obvious when you say it - I just couldn't find any reference for it.

BUT, there isn't any svg file in the final html folder - or I'd have seen it already. The svg class and path is written out every time in any html page using it, defined by the process of writing the help. I can take the path and create an svg out of it, but what then? Is there a valid file name required for a different svg in the skin baggage? I imagined "image-toggle-magnifier.svg" - but it isn't that. The svg class and path is getting written on publish, rather than an svg file being called by name.

So I have the svg that I want to use it, but I don't know how to get it used. Have I just got the svg name wrong, or what do I need to do?
Andie Davidson
Posts: 17
Joined: Wed Apr 05, 2017 9:38 am

Re: image toggle magnifier svg

Unread post by Andie Davidson »

I can't make any progress on this without further guidance.

"locate it in your WebHelp output folder and edit it in a graphics program supporting SVG" doesn't help because there isn't an SVG in the output folder.

The magnifier SVG is redefined in the output code every place it is used. I can see the definition, extract it, manipulate it, save it, yes, but I can't see a way of replacing coded output by an image file.
User avatar
Tim Green
Site Admin
Posts: 23156
Joined: Mon Jun 24, 2002 9:11 am
Location: Bruehl, Germany
Contact:

Re: image toggle magnifier svg

Unread post by Tim Green »

Andie Davidson wrote: Mon May 10, 2021 10:45 am The magnifier SVG is redefined in the output code every place it is used. I can see the definition, extract it, manipulate it, save it, yes, but I can't see a way of replacing coded output by an image file.
Oops, sorry: I had assumed that it was still being exported as an .svg file but it's now just put inline with the toggle as SVG code, which saves an unnecessary http call. You can't change the actual source, but you have pretty full control over it via the CSS rule. The standard rule is written to the main CSS stylesheet file for your project content (usually default.css, or projectstyles.css in V3 and V4 Premium Pack skins). This is the standard content:

Code: Select all

svg.image-toggle-magnifier {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    width: 40pt;
    height: 40pt;
    max-width: 80%;
    max-height: 80%;
    fill: #FFFFFF;
    stroke: #808080;
    stroke-width: 0.5pt;
    opacity: 0.3;
    transition: opacity 0.3s;
}
Don't try to edit the standard CSS file. Instead, create your own CSS file for your version of the rule, add it to the Baggage Files (Project Files > Baggage Files) section of the skin (.hmskin file, NOT your projectd file!!) and add the link to it to the HTML page template in the skin (Configuration > HTML Page Templates > Default), directly after the existing reference with the <%STYLESHEET%> variable, like this:

Code: Select all

...
<link rel="stylesheet" type="text/css" href="<%STYLESHEET%>" />
<link rel="stylesheet" type="text/css" href="yourstylsheet.css" />
...
So long as it comes after the standard stylesheet reference it will redefine anything defined there with your settings.
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.
Andie Davidson
Posts: 17
Joined: Wed Apr 05, 2017 9:38 am

Re: image toggle magnifier svg

Unread post by Andie Davidson »

Thanks Tim. Yes I'm already doing that with the css in my custom stylesheet. I was hoping to do a bit more than this, but never mind, if it's not possible. That's what I needed to know.
Post Reply