How do I Customize RoboHelp 11 Responsive HTML5 to include repeating background image?

Hello,
How do I add a repeating background image (not logo) to the layout found in RoboHelp 11 Responsive HTML5?
Is this something that has to be done inside of Dreamweaver?
Where are the RoboHelp 11 Responsive HTML 5 default themes (skins) stored on the computer?
I have seen the following files in RoboHelp 11 and would like to know if it is possible to edit
these files?
Responsive_Layout.fpj
C:\Program Files (x86)\Adobe\Adobe RoboHelp 11\RoboHTML\Samples\en_US\EmployeeCare2\EmployeeCare2Project\!ScreenLayout!\Responsive_La yout
Glossary.slp
Index.slp
SearchResults.slp
Table_of_Contents.slp
Topic.slp
C:\Program Files (x86)\Adobe\Adobe RoboHelp 11\RoboHTML\Samples\en_US\EmployeeCare2\EmployeeCare2Project\!ScreenLayout!\Responsive_La yout
By default, there are two themes found in Responsive HTML 5. They are:
Theme1_Standard
Theme2_Government
Where are these themes located under RoboHelp 11?
Thanks in advance for your response.
James

Post moved to HTML5 Layouts forum.
See www.grainge.org for RoboHelp and Authoring tips
@petergrainge

Similar Messages

In RoboHelp 11 Responsive HTML5, is it possible to have 2 different language outputs in one generated output file?

In RoboHelp 11 Responsive HTML5, is it possible to have 2 different language outputs in one generated output file, similar to WebHelp where the use can select the language from a drop-down list? In Webhelp output you could create multiple Content categories. Is there something similar with the responsive output, or am I forced to have a completely separate set of output files for each language (for example, English, Japanese, Chinese, Korean, and Arabic)?

As Rick, mentions, there's no default way.
Having said that, there's nothing stopping you from doing it yourself. You can add a kind of language selector to the layout and set that for every html5 output. With some JavaScript, you can have the user switch between your outputs. It would look like content categories, but you'll have build it yourself.

How can I put a vertical menu ON TOP OF the background image?

I've taken a screenshot to describe my problem.
http://i48.tinypic.com/10ndeg4.jpg
I want to put the menu on top of the background image. Compare it to placing another image on top of the background image. HOW on earth can I do this?

Did you try putting the image in a <div> and setting the background image for the <div> with CSS. Then within the <div> place your menu.
Just a thought.
LJD

How do I change the background image for a single tab on the navigation bar

I'm creating a movie website for TDKR and for the navigation bar, I intend to have a different character for each tab. However, I'm having trouble putting a single image each separate tab. Instead one image appears on each of the tabs. Here's an example of the source and CSS.
<td width="200"><ul id="navigation"><br />
      <li><a href="../pages/index.html">Home</a></li><br />
      <li><a href="../pages/cast.html">Cast</a></li><br />
      <li><a href="../pages/pictures.html">Pictures</a></li><br />
      <li><a href="../pages/soundtrack.html">Music</a></li><br />
      <li><a href="../pages/interview.html">Interviews</a></li><br />
      <li><a href="../pages/links.html">Links</a></li><br />
    </ul>
    </td>
#navigation {
          list-style-type: none;
          padding: 0px;
          margin: 0px;
#navigation li {
          margin: 0px;
          padding: 0px;
          list-style-type: none
#navigation li a:link, #navigation li a:visited {
          display: block;
          width: 200px;
          height: 100px;
          text-decoration: none;
          text-align: center;
          line-height: 100px;
          font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
          font-weight: bold;
          -webkit-transition: 1000ms ease;
          -moz-transition: 1000ms ease;
          -ms-transition: 1000ms ease;
          -o-transition: 1000ms ease;
          transition: 1000ms ease;
          color: #648AAE;
          background-repeat: no-repeat;
          background-image: url(../Images/gifs/Batman-still-2.gif);
          background-position: center bottom;
          text-transform: uppercase;
          letter-spacing: 0.79em;
          border-radius: 5px;
#navigation li a:focus, #navigation li a:hover, #navigation li a:active {
          color: #000000;
          background-image: url(../Images/gifs/Batman-animation-2.gif);
          background-repeat: no-repeat;
          background-position: center bottom;
          background-color: #454545;
          border-radius: 25px;
So, how do I put a single image on each tab (home, cast, pictures, etc). Thank you for your help in advance.

Assign a class to the item and use CSS to apply an image as in
<li><a href="../pages/index.html" class="home;">Home</a></li><br />
<li><a href="../pages/cast.html">Cast</a></li><br />
<li><a href="../pages/pictures.html">Pictures</a></li><br />
<li><a href="../pages/soundtrack.html">Music</a></li><br />
<li><a href="../pages/interview.html">Interviews</a></li><br />
<li><a href="../pages/links.html">Links</a></li><br />
and the CSS
#navigation li a:link.home, #navigation li a:visited.home {
     background-image: url(../Images/gifs/Batman-still-2.gif);

Need help with Responsive HTML5 screen layout in RoboHelp HTML 11

I have a few questions/issues regarding screen layouts for Responsive HTML5 output in RoboHelp HTML 11.
First off, I decided to just use the Theme1_Standard layout that came with the program (only other default option was Theme2_Government) and started customizing the layout. I originally added a company logo to the 'Header' component in the Customization dialog, but have since decided to remove it. I can't seem to do this from the dialog, so I tried just deleting the image file from the whole project. The file is gone, but the logo is still there. This is only displayed in the header when a topic is displayed, it does not appear in the header at the TOC, Index, Search screen, etc. How do I get rid of this???
Secondly, the text in the header for the topic screens appears differently than the one on the screens for the TOC, Index, Search, etc. In the former of these, the header is displayed in maroon text in a much smaller font, similar to that used in the topics. In the latter, the topic is displayed based on what I configured in the Layout Customization dialog; much larger in white text on a black background. In each case the heading text serves as a link to the default display topic shown when the help file is launched, which is fine. However, how do I get the header to be consistent across all screens (topics and TOC, Index, etc. alike)???
As a result of these issues with the Theme1_Standard layout, I'm trying to import a different Responsive HTML5 screen layout than the two provided within RoboHelp HTML 11 (Standard and Government). I did some digging in the program help and found another layout I'd like to use (Theme3_Black.zip) at RoboHelp screen profiles and layouts. I tried importing the new layout, but it's looking for a .SLZ file and the only one in the files that came with the ZIP file is SLZConfig.xml, and I don't think that's what I need, though quite honestly, I don't know.
I extracted the contents of the ZIP folder to a folder in the !ScreenLayout! folder within the RoboHelp project, but when I open the project, I don't see Theme3_Black as an option. I need to figure out how to import this screen layout because the color scheme matches the one used in the program for which I am writing the help. How do I import and apply this other screen layout???
Any tips, tricks, or guidance on any or all of these items would be GREATLY appreciated.
Thanks much in advance,
Dave

Item two of the original post is also something I am having issues with:
"Secondly, the text in the header for the topic screens appears differently than the one on the screens for the TOC, Index, Search, etc. In the former of these, the header is displayed in maroon text in a much smaller font, similar to that used in the topics. In the latter, the topic is displayed based on what I configured in the Layout Customization dialog; much larger in white text on a black background. In each case the heading text serves as a link to the default display topic shown when the help file is launched, which is fine. However, how do I get the header to be consistent across all screens (topics and TOC, Index, etc. alike)???"
We have the text toggle between red, white and blue depending upon the topic selected. In the customize Selected Layout we have the title color set to white. It seems to think that it is a link and I would like to know how I can force the text to be white and to stay that way no matter which topic is selected.

RoboHelp HTML 11 - If I publish using a responsive HTML5 layout, will the output be available to users who want to view it offline? Or does it require an internet connection and a browser to view?

I am writing help content for software that has two essential components - one web-based and the other a locally installed app (our users work in both). I need the help documentation to be available from both and I wanted to use the new responsive HTML5 layout to make it accessible from a PC, tablet or smartphone while publishing from a single source, but the locally installed app allows users to work offline so I need the help to also be accessible when a user works offline. Is this covered with responsive HTML5 publishing or do i need to publish the documentation to an application help viewer as well?
I apologize if there is an obvious answer to this. I am new to this and I have already checked the RoboHelp user guide and the FAQ and forum to try and find the answer.
Thanks for your help.
Cat

Hi there
While I agree with Jeff that CHM is a bit long in the tooth, it's still extremely viable. The only real issue with it is that it's PC only. Specifically, Microsoft Windows PC only. So that rules out Android and other platforms.
Yeah, HTML 5 is like the cool new kid on the block that doesn't play by the regular rules. But also like that same kid, it is a bit unpredictable. If it were me, I'd maybe experiment with WebHelp. ESPECIALLY if you have a fondness for customizing the look and feel of things. WebHelp customizations are so much easier to implement than the HTML 5 stuff in RoboHelp. I'd rather be forced to stick red hot needles into my eye sockets than to have to deal with that type of customization in RoboHelp. Not to mention needing to have a really good grasp of CSS and HTML 5 coding as well as RoboHelp Widgets. There are probably fewer than ten folks on this planet that can easily handle this.
Cheers... Rick

How to stop popup window using phone layout for display - Responsive HTML5, RH11

Hello,
I'm using the new Responsive HTML5 output in RH11. For some of my hyperlinks, I want to use a pop-up to display the linked topic. In the output, the pop-ups work, but they are automatically displayed using the phone layout, with the associated navigation buttons at the bottom, the help title, and so on. I don't want this - I just want a plain popup window. So, I tried to add a Screen Profile, set to 400 x 500 pixels exactly (thinking that this is bigger than a phone, but smaller than a tablet). I also added a corresponding Screen Layout. In the popup properties, I set the popup size to be 400 x 500 pixels. I guess there is something else I need to do to get this to work... but I don't know what that is. (I tried creating a new Window on the Project Set-up tab, and I tried creating a different master page. These things didn't work.)
Can anyone tell me if what I'm trying to do with these popups is just a bad idea and it won't work well with certain browsers?
Thanks!
Alexandra

I am confused as the responsive layouts are one size fits all, that is the point of them. You have one layout that morphs according to window size.
Screen Profiles are only used within Multiscreen HTML5 layouts where you can map screen profiles to different adaptive screen layouts, such as desktop, tablet and phone. That mapping does not apply to responsive layouts.
See www.grainge.org for RoboHelp and Authoring tips
@petergrainge

How can I embed an DOCTYPE HTML Form from Adobe Forms central into a responsive html5 page?

How can I embed an DOCTYPE HTML Form from Adobe Forms central into a responsive html5 page?
-Luis

Hi,
You can embed the form on your website, but you need to make sure that javascript has been enabled in the browser. You need to copy the embed code and add it into your HTML code. If you would like FormsCentral to generate embeded HTML form without using javascript, you may post a feature request and vote it. Hope it helps! Thanks!
Kind regards,
Shiyao Bao

Missing Bookmarks in Responsive HTML5 Output

I just started working with Responsive HTML5 in RoboHelp 11. I notice that on one machine my bookmarks appear in the sidebar of the Responsive HTML5 output. However, when I move the output to a different machine and view it, the bookmarks are missing from the sidebar. Only the Contents icon appears from which I can access the pages individual pages. What do I need to do to ensure that the bookmarks appear regardless of the PC on which it runs? Thanks!

It might be possible to tweak the responsive layout but Willam is likely the only person around here who can tell you how.
Otherwise maybe a multiscreen layout could be used where you only generate one layout notwithstanding the name. There are some topics on my site and in the RoboHelp Tour that will help with that idea. Come back if stuck. Generally though I would stick with Responsive Layouts.
See www.grainge.org for RoboHelp and Authoring tips
@petergrainge

I want to create a new customized screen layout for responsive HTML5 output. I don't want to use the ones present in the gallery. What are the steps to do so?

I don't wish to use the ones already present in the gallery. They do not meet my requirements. Therefore, I want to create/design my own screen layout for the responsive HTML5 output. Please let me know the steps to do so. How to create a SLZ file, what is the code that I need to write. What are the components that I need to create to have a complete screen layout to be used in a responsive HTML5 output.

That would require inline formatting and I doubt that is an option.
If I am following you, the header area is full width of the screen so I cannot see how it can be broader, Perhaps you mean deeper? A screenshot might help here. The change would be made in the layout.css file.
That would be a change in the layout.css.
I suspect that too is controlled by the layout.css.
To make the changes you would have to go into the layout.css and modify that. As you will see, it is a very complex CSS and that is why I said creating you own layout is not easy. Hopefully when Willam is available again, he may be able to give you some more specific information.
I think Willam will confirm that if you cannot read the existing CSS to make those changes, then creating your own skin would be beyond your capabilities. Please do not take any offence there, I am simply emphasising how complex a task it is to create a skin from scratch. It's not one I would take on.
See www.grainge.org for RoboHelp and Authoring tips
@petergrainge

Does Responsive HTML5 have an option to force the output to be lowercase?

Using RoboHelp 11.0.3.268, I'm testing the Responsive HTML5 layout as a potential upgrade from our current WebHelp SSL. The one thing I cannot find in configuring the SSL is the option to force the output to lowercase like what is offered in WebHelp and other SSLs. This is a critical project requirement because our team authors on Windows, which is case insensitive, and we publish help output to UNIX web servers, which is case sensitive.
Thanks,
Alan

Also, I should add this. As long as everyone is authoring in RoboHelp, there really shouldn't be issues because RoboHelp "has your back".
I believe what that option is intended to prevent is a situation where someone may be using perhaps Notepad or maybe even an app such as CoffeeCup HTML Editor to edit the content. And when creating links, if you were to create a topic that was named MyTopic.hTm, if you created the link as mytopic.htm, of course it would break on a UNIX system. And I'm guessing you already know that. So the RoboHelp option just changes all the names and the links to lower case to prevent breakage. But if all are working in RoboHelp and not hand coding links, you are probably totally safe. In fact, I'd be shocked to see that RoboHelp would actually have allowed creating any broken links.
Cheers... Rick

No Search Results page in Responsive HTML5 Output.

Hello,
I am using RoboHelp HTML version 11.0.3 and have just finished my second help project, which I need to publish in Responsive HTML5 format. I had already published one project for some new software designed to run on iOS devices using the Responsive HTML5 format for that as well. Despite some issues with the Theme1 screen layout being corrupted, which I was able to resolve by importing another screen layout, I was able to get that project released. When I compiled this latest project, however, I get several errors stating that "The Search Results widget is not allowed in the Topic Screen layout page. No Search Result layout page is present in the screen layout - the search textbox will not work as expected."
Long story short, when the project is compiled and I view the result, there is no search control to open a search page see first image below). Instead a search field is displayed at the bottom of the initial page (see second image) and sure enough, if I enter a term in there and click the search button, I get an index of all the files in my project (as opposed to a proper list of results).
I'm not sure why this is happening when I'm literally using the same exact screen profile as in the other project. I'm experiencing other display/formatting issues as well like some of my headings not displaying properly, the text in the header not displaying properly, and so on (these are things I experienced with the original corrupted profile, but this is the NEW profile I imported to resolve those issues). The main issue is the search page though.
Has anyone experienced anything like this and if so, can you offer a solution. I need to get this project properly compiled and released.
Thanks in advance for any help you can provide.
Dave

Hi Willam,
Sorry, not sure what happened with the previous post.
That’s what I did to begin with. Since I knew that layout worked for me and took care of the issues with the corrupt (Theme1) layout for the other project, I imported that into the current project. There seems to be something wrong with the layout or the project itself, though, now. Whenever I compile the project I get multiple errors stating the Search result widget isn’t allowed in the Topic screen layout page. I even created a completely new project, imported all my topics from the previous project, and imported the layout again and still it keeps giving me the error that the Search result widget is not allowed in the Topic screen layout page.
I don’t think this has anything to do with iOS, since I’m seeing the issues when viewing the help file on both a laptop and PC; haven’t even viewed it on a device yet. At any rate, I just don’t understand why I’m getting all these errors, having all these issues with the Responsive HTML5 format. It’s been especially frustrating since I thought I had already resolved the layout issue.
Any other ideas??
Thanks,
Dave

How can we Customize output of "PO Output for Communication" Program?

How can We Customize Format of the output of "PO Output for Communication" Program.
Executable is "POXPOPDF" Execution File name is "PoGenerateDocumentCP" which is a java program.
"PO Output for Communication Program" is used to generate DRAFT PO details in pdf Format to go with Workflow Notification for PO Approval.
Regards,
Muhammad Usman

Infact we need to Change Format/data of the pdf file wich comes with Workflow Notification PO "Response Required for PO Approval".
I the pdf file attached is generated by "PO Output for Communication" Concurrent Program.
Executable is "POXPOPDF" Execution File name is "PoGenerateDocumentCP" which is a java program.
This prgram uses the following files to generate pdf output of draft PO output.
DATA FILE:
PO_STANDARD_PO.xml
PO_STANDARD_PO.xsd
TEMPLATE:
PO_STANDARD_XSLFO.xsl
I need to know any visual layout editor available to change contents/layout/data of this pdf.
Regards,
Usman
Edited by: user10518960 on 01-Feb-2013 07:18

RH11 Responsive HTML5 Rendering Delays?

I am using a trial of RH11 to investigate upgrading from RH9. We currently produce WebHelp but we're also thinking about trying Responsive HTML5 output since our application runs in IE and also Safari on iPad (the Webhelp on iPad, even that produced in RH11, has some issues with parts of the search tab being cut off from display...thus the thought to try Responsive ouput).
In the trial output of Responsive HTML5 used in IE, we experience delays anywhere from 3 to 5 sec up to 20 sec sometimes (usually less than 10 sec) as we use the interface. For example, when help first opens up and begins to display its content and interface components, there can be pauses until the content is finally displayed in the browser. Another noticeable delay time is anytime we happen to adjust our browser size on our desktops -- for example, maximize or downsize browser to fill up various amounts of the desktop screen so that we can see how the help layout adjusts itself given the amount of browser space available. This is in IE10 and 11. I did not expect such overhead or delays when trying out that help format. Webhelp ran from the same server doesn't have the delays.
Has anyone else experienced these Responsive HTML5 delays? If so, have you found any work arounds or settings in your help project or browsers that either contributed to the rendering delays or helped reduce the delays? I assume all the scripts that run behind the scenes are a factor. The delays occurred whether I used one of the standard screen layouts for the help or had made some adjustments to the layouts such as to its color scheme. With the delays we're experiencing now, the Responsive HTML5 help isn't as appealing an option as I had hoped.
Karen

I grabbed a few screens of a report today showing durations. In this session, I opened help, waited for it to load, then began using the contents, and ended with a search on a single word. Yes, the longest durations were the HTTP requests (for images and for toc). Most of the delays I noticed seemed related to TofC, including some where I would click on a book to expand it and nothing happened, so I needed to click again (maybe my first click was before the page was done loading and I hadn't realized it, jumping the gun before contents tab was ready to use?). The other screens show the bulk of the rest of the report, which were for script evaulations and then painting/rendering.
Regarding bandwith -- might be the case for me, since I work remotely and am accessing this all via our VPN. But there is a person in our office who ran the help for me while in the office and also was seeing delays (the help in this case resides in the folders of an app that is housed on internal server). My next step is going to be putting the help on our web server and see if the delays still occur there.
Something to note is that when I run this help locally from C drive, there are also some delays -- most noticeably within the table of contents (for example, click on an item such as a book or sub-book and nothing happens so I wait a second or two and click again and it responds).
One final question in case it's relevant -- this help was produced off an old RH9 webhelp project that I opened/upgraded in the RH11 trial. Could that be a factor? Should I try a fresh project with fresh topics and TofC?
Appreciate the time you are taking to share our thoughts on this matter,
Karen

How can I customize the skin of my AIR app

Hi all,
I have created an AIR app from my RoboHelp v7 WebHelp.
Works and looks quite nice. Great. It's just that it did not use the WebHelp skin I created. It uses some default skin.
How can I customize the skin of my AIR app? When I run the RH Packager for Adobe AIR, I get a dlg box come up, called, "General Options - RoboHelp Packager for Adobe AIR" and it offers me a few default skins, but it does not offer me the skin I made for my WebHelp.
I also heard that if you learn FLEX you might be able to change the skins.
TIA
avi

Heya,
In order to change it alle just set it up as ordinary html webpage so heres and example of css:
style.css - In the main directory of your app.
body {
     margin:0;
     padding:0;
#wrap {
     margin:0;
     padding:0;
     text-aling:left;
#header {
     padding:2px;
     background:#000;
     color:#fff;
#content {
     padding:1em;
     margin:0;
     background:#ccc;
#footer {
     padding:2px;
     background:#000;
     color:#fff;
Now for the html file:
<html>
     <head>
          <title>My App</title>
          <link href="style.css" rel="stylesheet" media="screen" />
          // Scripts go here
     </head>
     <body>
          <div id="wrap">
               <div id="header">
                    My Application title
               </div>
               <div id="content">
                    bla bla bla lorem lipsum.
               </div>
               <div id="footer">
                    Copyright'n stuff
               </div>
          </div>
     </body>
</html>
If you need more help or examples I recomend that you go here and read some stuff on a lot of it all , you can also download theese samples it contains a lot of good stuff which makes it all A LOT easier to understand, the way I learnt most of what I know even though I am still missing some things.
Hope it helped!
Best Regards
Buch

How do I Customize RoboHelp 11 Responsive HTML5 to include repeating background image?

Similar Messages

Maybe you are looking for