6 Replies Latest reply on Feb 22, 2013 12:54 AM by Jop Smith

    Multiple CSS files in a project

    Jop Smith Level 1

      RH9 | WebHelp

       

      Does anyone know if it's possible to include more than one CSS file in a project? For ease of maintenance, I'd like to split my default.css into individual files, for example, a main.css (which has @imports and is referenced in my topics), a typography.css, a structure.css, a lightbox.css, etc, etc. I've had a play around with this and it appears to work, however, when I try to close my project RoboHelp gets upset and freezes.

       

      Thanks

      Jonathan

        • 1. Re: Multiple CSS files in a project
          RoboColum(n) Level 5

          Hi Jonathan. It is possible to have two or more CSS files in a project. So that in inself should not cause your project to freeze. There must be something else that is the issue here. Can you tell us what you mean when you say you are "splitting" the default.css file?

          • 2. Re: Multiple CSS files in a project
            Jop Smith Level 1

            Hiya

             

            Basically, my default.css is getting pretty big because I have styles for things like a slider and a lightbox in there. What I thought I could do is create separate stylesheets for each element (e.g. type, structure, slider, lightbox, etc) like you would do when building a website, and then reference them all in each of my topics like this:

             

            <link rel="StyleSheet" href="typography.css" type="text/css" />

            <link rel="StyleSheet" href="structure.css" type="text/css" />

            <link rel="StyleSheet" href="slider.css" type="text/css" />

            <link rel="StyleSheet" href="lightbox.css" type="text/css" />

             

            A neater solution would be to reference a single stylesheet in each of my topics, say main.css, that imports the separate CSS files:

             

            <link rel="StyleSheet" href="main.css" type="text/css" /> which contains:

             

            @import url("typography.css");

            @import url("structure.css");

            @import url("slider.css");

            @import url("lightbox.css");

             

            I've tried both methods and RoboHelp freezes when I try to close my project.

            • 3. Re: Multiple CSS files in a project
              Jeff_Coatsworth Adobe Community Professional & MVP

              have you tried this (this master/sub css approach) with the sample projects? have you tried the (just one css) approach with your project? does it choke too? maybe it's something in your project that causing a choke to occur

              • 4. Re: Multiple CSS files in a project
                Jop Smith Level 1

                UPDATE: I've tested this with a brand new project and RoboHelp can cope with references to multiple style sheets in each topic like below. However, this has a maintenance overhead as you can only assign one style sheet to a topic using a Master Page or the Topic Properties dialog box. If you want to use more than one you have to enter them manually in the <head> of every topic. RoboHelp then assigns the first one in the list as the "current" style sheet, but still pulls in the styles from the others. My test project compiled and closed successfully using this method.

                 

                <link rel="StyleSheet" href="typography.css" type="text/css" />

                <link rel="StyleSheet" href="structure.css" type="text/css" />

                <link rel="StyleSheet" href="slider.css" type="text/css" />

                <link rel="StyleSheet" href="lightbox.css" type="text/css" />

                 

                With the same project, importing the various style sheets using a single style sheet (like below) also appears to work. However, this causes RoboHelp to freeze when attempting to close. The status bar reads "Closing Database", but nothing happens.

                 

                <link rel="StyleSheet" href="main.css" type="text/css" /> which contains:

                 

                @import url("typography.css");

                @import url("structure.css");

                @import url("slider.css");

                @import url("lightbox.css");

                 

                The import option would be the obvious solution, but sadly RoboHelp can't handle it.

                • 5. Re: Multiple CSS files in a project
                  Willam van Weelden Adobe Community Professional & MVP

                  Hi,

                   

                  I use the @import rule in my css to import other style sheets. While RoboHelp correctly sees that the linked style sheets must be included, the WYSIWYG does not recognize styles in linked style sheets. So you can only use a single CSS for topic editing. (in RH9 at least, I haven't tried @import in RH10. But RH10 does a better job of handling CSS.)

                   

                  Greet,

                   

                  Willam

                  • 6. Re: Multiple CSS files in a project
                    Jop Smith Level 1

                    Hi Willam

                     

                    This morning RH seems to be happy with the @import rule. The gremlins must have been around yesterday!

                     

                    Also, I'm using RH9 with the @import rule and the WYSIWYG editor does recognise the styles in my linked style sheets. I am therefore able to apply any style to my topics. This contradicts your experience so I'm not sure if it's by luck or judgement! Fingers crossed it stays like this though!

                     

                    Thanks

                    Jonathan