Willam van Weelden
LEGEND
Willam van Weelden
LEGEND
Activity
‎Jan 10, 2019
03:12 AM
A lot has been said in this thread, but perhaps I'm able to help. According to what I know, there aren't any changes to the whutils file between the versions. Now I don't have 2015 anymore, so I can't take a look there, unfortunately. So to get it on track: - If you create a new project, do you see the same behaviour in your output? - Can you share an output with me so that I can take a look and debug? (Please send it to: contact [at] wvanweelden [dot] eu. Kind regards, Willam
... View more
‎Oct 27, 2018
03:02 AM
Hi, What exactly is your goal with the layout? The behaviour of the bar at the top is controlled through a seed file. C:\Program Files (x86)\Adobe\Adobe RoboHelp 2017\RoboHTML\ResponsiveHelpExt\template_stock\topicHeader.htm This file contains the code that makes the page refresh to the current topic. By changing the code onClick='rh._.goToFullLayout()' you control what clicking does. Kind regards, Willam
... View more
‎Sep 06, 2018
07:26 AM
Hi, I'm a bit late to the party, but I hope you won't mind me budding in. Is CSH the main way you open the help? If so, in RoboHelp, can you set the topic page of the layout to be the default page? If you expand the layout and right click the page, you can set it to be the default. How is your application opening the help? Are you using the default Adobe API's for this? Kind regards, Willam
... View more
‎Aug 04, 2018
05:22 AM
The quickest method is to change the margin on the header. In the CSS, add: body.media-desktop div.header div.header-align { margin-left: 50%; } You'll have to play with the value to center align the content. Though it may shift when trying different resolutions. When you want to make it pixel perfect, you'll have to dive in deeper. The div.header-align has left floating elements. This is done to allow different size logo images and different heading lengths. Changing it means that the alignment has to be translated to inline blocks. That requires trial and error. If you only want the logo image to be shown: simply change the hyperlink of the logo to not float. And set the text-alignment on the header-align to center. That centers your logo image. Though the text requires all kinds of love to display correctly.
... View more
‎Jun 29, 2018
02:52 AM
1 Upvote
The overlapping happens as the total width of your window becomes less than the amount of space required by the content. So the $topic-width + $topic-sidebar-content-width > browser width. That is causing the overlap. There are a few options: - You can decrease with width of the sidebar. - You can force the width of the container, but this will give you horizontal scroll bars. - You can change the breakpoint so that the layout will move over to the tablet look and feel before the content starts overlapping. (You can do this in the usersettings.js or through the Screen Layout editor)
... View more
‎Jun 29, 2018
02:49 AM
1 Upvote
Additional designs for RoboHelp will also work with FrameMaker, as the publishing engine is the same. So anything on Help Essentials can be used with both applications. If you want to customise the design of the output, I find that RoboHelp makes it easier to customise as you have direct access to al separate files. That is more obscured in FrameMaker. If you make changes in RoboHelp after importing/linking, you will have to redo the changes. But you can automate that with ExtendScript. But you can probably do a lot of the same by using ExtendScript/FrameScript in FrameMaker. Personally, I prefer importing so that I can tweak the HTML and TOC before creating the output.
... View more
‎Jun 19, 2018
01:30 PM
2 Upvotes
This is indeed possible. If you choose a right-to-left language, the panes are on the right hand side instead of the left one. So it can be done with CSS magic. Though you'll need to make several changes to make it work for you. As a shorthand, I created a left-aligned CSS that you can use: Indigo-Left-Handed-Desktop-Panes.zip - Google Drive This is a rough version and will require refinement is you want to go into production with it. Download the attached CSS and overwrite the existing layout.css in the Indigo layout. Then you're set. --- Below is for those interested in the finer details, and as a reference for future tinkering. First, you'll need the SCSS files to make it easy on yourself. You can download them from: RoboHelp screen profiles and layouts Use an application like Koala (Koala - a gui application for LESS, Sass, Compass and CoffeeScript compilation.) to compile this to a CSS file. in the CSS, you'll first need to left align the panes. Open the file layout.scss and search for: @include popup-sidebar($right replace all occurences with @include popup-sidebar($left Note: Unless you want only to change the desktop. Then don't replace all occurences, only the ones for desktop. Doing only desktop is much easier, as the menu buttons on mobile/tablet are also right alignd. For my sample, I've only updated the desktop version. (Note that you need to unmerge the selectors on line 836) Changing only a single device may cause strage flickering when moving between desktop to mobile versions. Next, change the topic content position to the right, as the panes are currently showing over the topic content. On line 392, change the right alignment to: #{$left}: $topic-sidebar-width + 1rem; And, on line 411, change the right alignment to: #{$left}: 0; With these modifications, the panes are left aligned. You will probably want to update the TOC book icon as it is currently pointing to the right hand side. Changing the mobile and tablet view as well, will require more work in updating the layout. It can be done if you want to.
... View more
‎Jun 16, 2018
12:15 AM
2 Upvotes
That's really annoying... You can get it back quite easily though. Please see my following reply: Re: RH2017 Roll back to Update 1?
... View more
‎Jun 16, 2018
12:06 AM
3 Upvotes
Strange that they removed the option to pick the custom TOC icon. All the code is still there. Enabling it is as easy as flipping a switch. In your RH project, go to the !ScreenLayout! folder and open the folder containing your Indigo layout. Find usersettings.js and open it with a text editor. On line 10 you'll see the code: var useCustomTOCLinks = false; Change false to true. Save your changes. Generate the output and your help will use the custom TOC icons once again. You can update/set the custom TOC icons by changing the image files custom-toc-image-xx.png to match your preference. No need to play with the CSS.
... View more
‎Jun 13, 2018
10:43 AM
You enable the use of custom icons in the Screen Layout editor. There is an option called Home (Custom icons) where you enable the option to show the icons.
... View more
‎May 19, 2018
01:04 AM
There are several techniques to make image maps responsive. Most require a jQuery plugin. If you like a more visual approach, give the following a try: https://www.zaneray.com/responsive-image-map/
... View more
‎May 10, 2018
02:05 AM
I don't see a straightforward way to do this, I'm afraid. It is possible to change the container for the TOC so that it keeps expanding. But the page layout is set up using absolute positioning, so that would require quite a rewrite of the CSS to make it work as you want. In addition, the topic content is displayed in an iFrame. The iFrame is scaled to the screen and scrolls individually. It would require JavaScript to make it behave as a regular page. I've played with that in the past, but never got it to work as I want. Perhaps a web developer in your company could help you. When this is a requirement, I generally look towards Multiscreen HTML5. That doesn't contain iFrames and is much easier to set up as you describe. (But it has it's own downsides though.) Kind regards, Willam
... View more
‎May 02, 2018
10:34 AM
The method you propose will work. The RH Layout editor simply changes the CSS file (and the usersettings.js for behaviours). If you generate the CSS first, you can then use the RH Layout editor. Just note that if you regenerate the CSS file, your changes from the RH editor will be overwritten. One note: The RH Editor works by identifying the correct CSS selectors. It contains a list of the CSS selectors and properties it needs to change for a certain colour to take effect. If you dabble in the SCSS, please leave all the selectors (like body.media-mobile div) intact. If you change the existing ones, the RH editor may no longer find all occurences of a colour. You can add additional selectors without problems.
... View more
‎May 02, 2018
02:47 AM
Do you see the same looping behaviour when you test locally? Or does it matter whether the content is loaded on an unsecured host? (I'm not sure how you are protecting the content, but I'd like to make sure that it doesn't cause the reloading.) Do you have an example of the CSH url you are currently using? I haven't seen this reloading issue yet. Could it be browser related? Have you installed all the latest patches? Did you upgrade the project from RoboHelp 2015?
... View more
‎May 02, 2018
02:44 AM
The RH Layout Editor updates the CSS files of the layout. If you dabble in SCSS, it will overwrite any changes made in the RH Layout editor. It's easier to stick with the SCSS as you can define the colours there as well.
... View more
‎Apr 27, 2018
12:20 AM
That's what I get for testing Chrome... In edge, it doesn't take. This one does! div.toc-holder ul.toc { padding-bottom: 200px !important; }​
... View more
‎Apr 26, 2018
01:35 AM
The position doesn't matter. I just put it at the top of the CSS file. You can put it in the output or in the source. The easiest way to test is, is to add it in the output and see what happens. If it works, you can copy it to the RoboHelp output.
... View more
‎Apr 24, 2018
12:27 PM
Hi, Sorry about the delay. I had to make some time to open RH and test it out. The quickest way to add the padding, is to add some whitespace at the end of the TOC holder element. Doing it in the parent element will make sure you won't get strange behaviour for the TOC content. Use an editor like Notepad++ to open the Layout.css file of the Charcoal Grey layout. Don't use the RoboHelp editor! Paste the following code to add the spacing: div.toc-holder { padding-bottom: 20px !important; } You can adjust the padding so that is works for your use case. I have added the !important rule to overwrite the padding on mobile devices. That saves typing out all the selectors for those use cases. If you want to only apply the padding to desktop, simply leave the !important out.
... View more
‎Apr 23, 2018
04:34 AM
Which JS file is causing problems? And what is the security problem that is shown? Or perhaps I am understanding you incorrectly. Do you perhaps say that you cannot deliver JavaScript files to customers regardless?
... View more
‎Apr 21, 2018
04:56 AM
Which layout are you using? I just gave the Azure Blue layout a spin (desktop) and it seems to show the same behaviour as Chrome.
... View more
‎Apr 21, 2018
04:53 AM
The CSS you reference is for the function buttons (the glossary/index/etc) buttons above the content.\\ You are looking for the styles that start the selector with div.frontpage-toc. It is slightly more complex than removing the text-overflow: ellipsis. This simply removes the ellipsis, but doesn't rescale the TOC text placeholder. For that, the span.label has to be changed. If you remove the height from there, the text block will rescale.
... View more
‎Apr 21, 2018
04:45 AM
1 Upvote
Just to add to the other post: The other posts shows how to change the breakpoints of the layout, i.e. when the help shows phone, tablet or desktop layout. If you want to retain the desktop layout, you will have to change the width of all elements through the CSS file. By far the easiest method for this, is using the SCSS provided by Adobe. (The source files to create the CSS file.) You can get the SCSS files here: RoboHelp screen profiles and layouts In the layout.scss, go to line 19. There you set the width of the different widths for the topic (50rem) and sidebar (20rem). You can change these widths to enlarge the topic or sidebar. Doing it here will make sure that all elements such as header, footer, buttons, etc. will scale as well. These variables are used in the SCSS to calculate the correct sizes so that you don't have to plough trough the CSS. For more information on the SCSS, please see my free webinar: Get Geeky with SCSS: Home - Adobe Events
... View more
‎Apr 16, 2018
02:24 AM
It looks like the CSS was broken. This sometimes happens if RoboHelp opens the CSS itself (with the editor). Can you add the Indigo Layout to the project again under a new name? (In the Output Setup, right click Screen Layouts and add a new layout.) Then, on the file system, copy the two *.slp files and the layout.css file into the folder of the 'old' layout. Does that fix the layout?
... View more
‎Apr 10, 2018
12:27 PM
There are a few structural changes in the grid layout that is being used in the Indigo layout. You see this in the behaviour of the Favorites button as well. In the new version, it is center aligned. Changing this back would mean going back to the old grid structure of the layout. But as this was changed for a reason, you may introduce additional issues. I don't see the gray overlap that you see on the right sight of the screen. Is that something coming from the screen shots? Or something different?
... View more
‎Apr 07, 2018
03:23 AM
Hi, I ran some tests and there is what I found: On Edge with local WebHelp, I can get CSH to work without specifying a window, using the URL file:///<path>/index.htm#<id=3>>newwnd=false When I also specify a Window, the help opens in Edge like I expect, including the skin: file:///<path>/index.htm#<id=7>>newwnd=false>>wnd=webhelp This is the same behaviour as I get in Chrome and FF. How is your developer calling the help?
... View more
‎Apr 06, 2018
04:41 AM
2 Upvotes
Customising is not too much work. You can overwrite the existing files on the file system with other images. And the editor will pick it up. If you are up to CSS, you can open and edit the toc_c_images.css and changing the files names in there. The CSS is quite straightforward and you only have to change the file names to load different images. The reason there are 50 icons, is that you can now specify different images for every book/folder/etc. But if you only need 2 or 3, you can work with the CSS to use only one or two images. (Though you could then probably change the default Home (Shared) Icons.
... View more
‎Apr 03, 2018
05:01 AM
As for the Context Sensitive Help, does that work if a different browser than Edge is being used? And it is only a problem for the local help, not for the hosted version?
... View more
‎Mar 31, 2018
09:36 AM
2 Upvotes
Hi, If you want the layout to be in the Gallery, you will need to copy the exported .SLZ to: C:\Program Files (x86)\Adobe\Adobe RoboHelp 2017\RoboHTML\ResponsiveHelpExt\Layouts\en_US In your case, I suspect that RoboHelp is seeing the Responsive HTML5 Layout as a Multiscreen file. Make sure that the file MasterThemeSchema.xml is checked into Source Control and that you have a copy of that file in !ScreenLayout!/YourLayout. I have seen RoboHelp forgetting to check in this file and that will make the layout revert to Multiscreen HTML5. If you add the file, make sure to close the project and delete the .CPD file. Otherwise RoboHelp won't refresh the layout.
... View more
‎Mar 29, 2018
05:21 AM
1 Upvote
You can do this with CSS, but RoboHelp doesn't really like it. The quick solution is to create a style and use a background image to show the text/icon. You can use any image you want. By adding the background image and setting a left padding, you achieve much of what you want. RoboHelp allows you to set a background image for a paragraph style. But you'll need to dive into the CSS code to align it correctly and set a padding-left on the paragraph. More info here: CSS background property Alternatively, you could opt for using a variable for the text. You still need to insert it manually. But you can maintain it easily. (And can also include images.) For the sake of completion: If you really want text, you can use the ::before pseudo-selector to insert content before or in front of your paragraph. You will have to set the ::before manually in the CSS, including changes to your regular style to create a correct alignment. But RoboHelp won't display your content. (And the RH CSS editor will wipe away the ::before selector from your CSS if you try editing the CSS that way.) You can find more info on this here: CSS ::before Selector
... View more
‎Mar 28, 2018
02:15 AM
You have control over the t=. You can use it to open specific topics. You just can't hide it. CSH has changed in Responsive HTML5. So your developers indeed need to tweak their call. You can find all the details here: https://www.helpessentials.com/2017/08/05/context-sensitivity-in-responsive-and-multiscreen-html5/
... View more
AdChoices