V5 Minimal Modern ewriter skin: Modify

[BertholdL]

Hello,

How can I modify the Font and Font size of the TOC entries?
How can I modify the side margin of a topic text in the skin? I would like to make it equal to the top margin (TOPIC_TOPMARGIN).

Is it in the skin or in the project? I know there are the export settings for Webhelp. Are they completely overridden by the skin?

Thank you!

[BertholdL]

Some more questions:
How do I modify the breadcrumb font size?
How do I modify the header menue font size?

[Tim Green]

How can I modify the Font and Font size of the TOC entries?

This isn't recommended because the font size has been fine tuned for the layout and to work at all screen resolutions. This is also why there is no dedicated configuration setting for it. If you absolutely must set your own mark on it you need to edit the hmwebhelp_toc_desktop.css file for eWriter, and also the _tablet.css and _phone.css versions in the WebHelp version. The font size for the TOC tree is in:

Code: Select all

/* TOC LIST CSS */
div#hmtoctree {
	position: relative;
	left: 0; right: 0; bottom: 0;
	font-size: 0.950rem;
}

You need to set the font size in rems. You will then probably need to adjust multiple padding settings further down to adjust the position of the TOC icons ,

How can I modify the side margin of a topic text in the skin? I would like to make it equal to the top margin (TOPIC_TOPMARGIN). Is it in the skin or in the project? I know there are the export settings for Webhelp. Are they completely overridden by the skin?

The project never contains layout settings when a skin is used. This is also why the topic editor has no margins etc., because the text must be inserted into the different templates for each different output format.

You can adjust the margin in the hmwebhelp_main_desktop.css file (and the _phone and _tablet versions for WebHelp). Locate this piece of code:

Code: Select all

div#hmpagebody_scroller {
	position: absolute;
	top: 0; left: 0; right: 0; bottom: 0;
	padding: <%TOPIC_TOPMARGIN%>rem 0.5rem 0.313rem 1.0rem;
	overflow-y: scroll;
	overflow-x: auto;
}

and change last value of the padding: setting to adjust the left margin. Don't try to use the TOPIC_TOPMARGIN variable to match the top margin. That won't match it because it's affected by other factors. Also, DON'T try to make it smaller, as that will interfere with the splitter bar between the navigation and topic panes.

How do I modify the breadcrumb font size?

If you absolutely must do this, locate the p.topic_breadcrumbs rule in the hmwebhelp_main_xxx.css files and change the font size there. Again, not recommended.

How do I modify the header menue font size?

This is in the div#header_menu rule in the hmwebhelp_main_xxx.css files. Here too, not recommended, but it's up to you.

[Tim Green]

PS, a helpful tip:
In any modern browser, you can easily locate the CSS by displaying the WebHelp version. Then right-click in the text you want to reformat and select "inspect" in the context menu. This will display the developer console, and if you select the Elements tab you will see the live HTML (which is usually different from the HTML in the file) and the CSS that formats it on the right, along with the name of the CSS file. You can make live changes directly in the CSS there to see the immediate results.

Important: In many cases, the formatting will be controlled by a container tag, not the actual tag where the text you are looking at is located. So you need to move up the tree a little until you find the relevant settings.

[BertholdL]

PS, a helpful tip:
In any modern browser, you can easily locate the CSS by displaying the WebHelp version. Then right-click in the text you want to reformat and select "inspect" in the context menu. This will display the developer console, and if you select the Elements tab you will see the live HTML (which is usually different from the HTML in the file) and the CSS that formats it on the right, along with the name of the CSS file. You can make live changes directly in the CSS there to see the immediate results.

Important: In many cases, the formatting will be controlled by a container tag, not the actual tag where the text you are looking at is located. So you need to move up the tree a little until you find the relevant settings.

Thank you for the helpful hint! In my case with only ewriter skins I am looking forward to the new release of universal skins (webhelp and ewriter).

[BertholdL]

Button_image.png

How can I customize the font and font-size of these buttons? On this helppage on the first image I see the variable DROPMENU_FONTSIZE_DESK, which is not available in the V5 Mininalist Modern ewriter skin.

Where is the option in the CSS file?

PS: There is no "Inspect" function in ewriter files, is there?

[Tim Green]

PS: There is no "Inspect" function in ewriter files, is there?

Unfortunately no. But what you can do is turn off the "delete temporary files" option. Then you get the regular HTML source which you can open in a browser. You can then use Help+Manual's HM2GO mini web server to view it in server mode locally:

https://www.helpandmanual.com/help/hm_w ... hm2go.html

However, the CSS and HTML of the WebHelp version is pretty much identical, and you can use that to learn about the CSS of the eWriter version.

The font and font size are controlled by the a.topicnavlink span rule at around line 572 in the desktop version of the hmwebhelp_main CSS file. The font is controlled by the <%UIFONT_DESKTOP%> variable, and if you redefine that it will change the UI font throughout the skin.

The icon dimensions are controlled by the a.topicnavlink svg.navicon rule directly below it. In both cases, making more than very minor changes can cause a cascading sequence of unintended consequences. Have fun.

[BertholdL]

Thank you for your help!

One more question:

In the header menu, is it possible to style the top entries with <%DROPMENU_BGCOLOR_TOP_ACTIVE%> not only while hovering, but also after clicking on them, so while hovering the sub-entries, the user always sees the top entry marked. I tried the pseudo-class :active, but without success.

[Tim Green]

In the header menu, is it possible to style the top entries with <%DROPMENU_BGCOLOR_TOP_ACTIVE%> not only while hovering, but also after clicking on them, so while hovering the sub-entries, the user always sees the top entry marked. I tried the pseudo-class :active, but without success.

This is not supported.

[BertholdL]

Is it possible to adjust the right and left padding between the header menue entries?

Headermenue.png

Or do I have to insert spaces in the menue entries to make it look like padding?

Thanks in advance!

[BertholdL]

And another question:

Is there any possibility to align the logo to the center (vertically)?

Logo.png

As of now, it is aligned to the top. I imagine that I can play with the upper padding of the header area, can I?

[BertholdL]

And another question:

Is there any possibility to align the logo to the center (vertically)?
Logo.png

As of now, it is aligned to the top. I imagine that I can play with the upper padding of the header area, can I?

I just found this in the hmwebhelp_main_desktop.css:

Headerlogo_CSS.png

I suppose this is the solution, I will test it.
So there is only one open question left (vertical space between header menue entries).

EDIT:
After test: It works, the vertical position of the logo can be adjusted. But with one collateral damage: The little logo for mobile screens is affected as well, and as the 2 logos have different height, I cannot align both of them to the centre, at least not the way I showed it in this post. Is there any way to tell the skin to align both logos to the centre (vertically)?

[BertholdL]

In the header menu, is it possible to style the top entries with <%DROPMENU_BGCOLOR_TOP_ACTIVE%> not only while hovering, but also after clicking on them, so while hovering the sub-entries, the user always sees the top entry marked. I tried the pseudo-class :active, but without success.

This is not supported.

In your own documentation you have something similar to what I need:

Active_menue.png

The Resources menue is marked as open. Can I add this to the header menue in V5 eweriter skins? Or will something like this be part of the new release of the PP skins?

[Tim Green]

The Resources menue is marked as open. Can I add this to the header menue in V5 eweriter skins? Or will something like this be part of the new release of the PP skins?

That is a different custom menu system available in some of the skins. See the documentation on the menu systems in each individual skin group. In version 6 you will be able to use any skin for both WebHelp and eWriter (except the CHM skins, of course, which are completely different).

[BertholdL]

EDIT:
After test: It works, the vertical position of the logo can be adjusted. But with one collateral damage: The little logo for mobile screens is affected as well, and as the 2 logos have different height, I cannot align both of them to the centre, at least not the way I showed it in this post. Is there any way to tell the skin to align both logos to the centre (vertically)?

Tim, thank you for your e-mail answer. If anyone is interested:
In the hmwebhelp_main_desktop.css adjust the value for the narrow screen version:

Code: Select all

@media only screen and (max-width: 40rem) {
div#header_menu {
    display: none !important;
    }
a#headerlogo {
    width: 5rem; height: 94%;
    background-image: url('../images/<%HEADERLOGO_MOBILE%>');
    top: Xrem;
    }
}

top: Xrem is the line to enter.