7 Replies Latest reply on Aug 1, 2011 2:12 AM by Willam van Weelden

    Layout changes

    JJJJJJJJJJJJJJo

      I'm rather new to Robohelp, but I've taken over a previously established project.

      I'm giving the project a facelift and not managing at all to get the layout to look how I want it.

       

      It must remain a webhelp.

       

      Apart from skin changes it does not seem possible to change the layout at all. There are spaces between the buttons that need to be removed. Or I need to display the buttons above or below a logo. Is any of this possible? Is there a way to change the physical layout of the objects in the webhelp?

        • 1. Re: Layout changes
          Peter Grainge Adobe Community Professional (Moderator)

          Stuck key or do you have trouble with pronouncing your name?

           

          I think you are talking about the toolbar buttons and your logo on that rather than in your topics. If so then it pretty much as you see it. The place to go for any skin customisation tricks is Rick Stone's Skinny on Skins.

           

           

          http://www.robowizard.com/RoboWizard/NewProject.htm#Downloads/Skinny_on_Skins.htm

           

          If you are talking about your topics, then a screenshot showing what you want to change would help. Use the camera icon to insert it.

           

          Also please see the Before You Post sticky topic. Answers can depend on knowing which version of RoboHelp you are using.

           


          See www.grainge.org for RoboHelp and Authoring tips

           

          @petergrainge

          • 2. Re: Layout changes
            JJJJJJJJJJJJJJo Level 1

            Thanks for the assist. The file helped a little, but I still cannot find the answers to these questions:

            (I am using Robohelp 9)

             

            How can I add css styles to every item in die Table of Contents? I want to add padding to them (the method described in the skinny file does not work), border them and shade their :hover attribute.

            I want them to look like this (the gradient fill is not neccesary):

            sample.png

             

            Then, also, I would like to restrict the entire page to being 1024 pixels wide.

            Can this be done?

            • 3. Re: Layout changes
              Willam van Weelden Adobe Community Professional & MVP

              Hi,

               

              The styling for the TOC is set in whthost.js. You need to modify the css in the function TocWriteClassStyle to get what you want. Alternatively, you can add CSS in whtdhtml.htm. You probably need to use the !important declaration to let your css overwrite the styling added by whthost.js.

               

              You'll need to experiment to get the TOC to behave the way you want.

               

              Greet,

               

              Willam

              • 4. Re: Layout changes
                JJJJJJJJJJJJJJo Level 1

                Again, thanks for the pointer, but it hasn't helped. No matter what I change in the file, it doesn't apply to the site.

                I have checked that I'm changing the current version of the file, seeing as that I have old builds of my site lying around.

                I have added the !important tags.

                I've even deleted the entire contents of the file!

                 

                None of this seems to make a difference.

                 

                When I inspect the elements I can see they inherit their style from the series of whlst#.htm files. I do not know what to try next, please advise me.

                • 5. Re: Layout changes
                  Willam van Weelden Adobe Community Professional & MVP

                  I was hoping this solved it for you. Playing with the TOC styling is tricky.

                   

                  Every TOC item is created as follows:

                   

                    - P
                      - NOBR
                        - A

                   

                  Depending on what you want to change, you need to apply the correct styling to every element. Also, a book is a div containing a TOC item and a div with all the child items.

                   

                  The styling for these items is set in the function TocWriteClassStyle() in whthost.js. But the TOC also uses the function HighLightElement() in whutils.js.

                   

                  Changing all this requires playing around with CSS. For example, to add a repeating background image to every TOC item, use the following css:

                   

                  p {
                      display: block;
                      background: transparent url(myimage.png) repeat-x 50% 50%;
                  }

                   

                  Depending on what you want, you have to assign the styles to the div, the paragraph or the hyperlink.

                   

                  Greet,

                   

                  Willam
                  • 6. Re: Layout changes
                    JJJJJJJJJJJJJJo Level 1

                    I've changed TocWriteStyle() many times and the changes simply don't appear in the website.

                    So here's what I've done to solve my problem:

                     

                    I ran a find>replace all (using dreamweaver) on all the whlstt# files, adding a link to a style sheet to each of them. This works.

                    Perhaps it is inelegant, but at least I'm getting results.

                    • 7. Re: Layout changes
                      Willam van Weelden Adobe Community Professional & MVP

                      Hmm, the files in the folder whgdata are normally used as a backup when the data from whxdata cannot be used. Are you generating pure HTML for the navigation pane. That would explain why editing whthost doesn't work.

                       

                      As long as your problem is solved.

                       

                      Greet,

                       

                      Willam