27 Replies Latest reply on Mar 10, 2016 5:32 AM by Peter Grainge

    RH11 - How to apply style changes to entire project?

    Auntie Em-Pam Level 1

      Hi,

      I've searched through many posts, but did not see this issue. I have changed almost all of my styles (text indents and margins only), and would like to know how to apply these changes to my entire project.

      The styles were not renamed, the CSS is correct in all topic properties, but I am having to go through every page in my project and manually re-apply every style as the changes do not apply. I have fastidiously gone through the CSS to ensure the stylesheet matches what has been set up in the Styles and Formatting pod (a lot of times it does not, so I have to fix the stylesheet). Is there an easier way to apply style changes to the entire project?

      Thanks,

      Pam

        • 1. Re: RH11 - How to apply style changes to entire project?
          Jeff_Coatsworth Adobe Community Professional & MVP

          A lot of us don’t bother & just use the “Apply to All” flag in the SSL to affect our output…

          • 2. Re: RH11 - How to apply style changes to entire project?
            Auntie Em-Pam Level 1

            sorry? can you please elaborate because I don't understand.

            • 3. Re: RH11 - How to apply style changes to entire project?
              Jeff_Coatsworth Adobe Community Professional & MVP

              When you generate your help, there’s an “Apply to All” field in the Single Source Layout (SSL) that allows you to select a CSS to be applied to all topics in the output.

              • 4. Re: RH11 - How to apply style changes to entire project?
                Auntie Em-Pam Level 1

                Oh duh - I didn't even know that was there. Thanks!

                • 5. Re: RH11 - How to apply style changes to entire project?
                  Auntie Em-Pam Level 1

                  Jeff,

                  I have applied the CSS to all topics (I'm using default.css) , however this still does not work. I still have to go through each topic and re-apply the styles again in order for the changes to display. Any other suggestions? Thanks.

                  Apply to all topcis.PNG

                  • 6. Re: RH11 - How to apply style changes to entire project?
                    Captiv8r Adobe Community Professional & MVP

                    Hi there

                     

                    Can you share a screen capture of the HTML code of something that doesn't adhere to the CSS?

                     

                    For example, if it's a heading, select a letter or two, then click the HTML tab in the editor and capture the editor.

                     

                    tmp1.png

                     

                    Thanks... Rick

                    • 7. Re: RH11 - How to apply style changes to entire project?
                      Auntie Em-Pam Level 1

                      Hey Rick -- how's it going?

                      And sure thing. Here is part of the code for my content, bodyformultilists - which is my body style, and the code for multinumbered. The margins aren't in synch. I have to keep going into the CSS to make corrections. Thanks for your help.

                      apply_style_01.PNG

                       

                      apply_style_02.PNG

                       

                      apply_style_03.PNG

                      • 8. Re: RH11 - How to apply style changes to entire project?
                        Captiv8r Adobe Community Professional & MVP

                        Ahhh, so you are only concerned with the "Multi-level List" styles?

                         

                        I believe those styles have to be specifically applied to each list you have. I'm not sure you will be able to get away with using an associated CSS file to control all mult-level lists.

                         

                        Cheers... Rick

                        • 9. Re: RH11 - How to apply style changes to entire project?
                          Auntie Em-Pam Level 1

                          Yes, I'm aware of that. I have several multi-level styles. But this is occurring for all my styles, including my bodytext style. All I changed in my styles was the margin and text indent, then I applied the CSS to all topics, but the styles do not change in the project. I am having to go through page by page and apply all styles all over again.

                          In the examples below, somehow this style just doesn't seem right.

                          • The first shot shows the html for the bodytext style which has not been updated after my changes to the style - why is there a -1px margin-right?
                          • The second is from my CSS. Why is there a 62px margin-right?
                          • The third is how I actually want my bodytext style; Left at 0, no right margin, no hanging indent

                           

                           

                          bodytext_style_01.PNG

                           

                          bodytext_style_02.PNG

                           

                          bodytext_style_03.PNG

                          • 10. Re: RH11 - How to apply style changes to entire project?
                            Jeff_Coatsworth Adobe Community Professional & MVP

                            You seem to be only talking about how the style appears in the RH topics themselves – my point was that I don’t care what the RH topic looks like – it’s what the output html topic appear that counts. That’s where the “Apply to All” kicks in. As long as I’ve properly marked my content with the style names, I can screw around in the CSS to my heart’s content to tweak how the browser presents it. Within the topic, it looks like a dog’s breakfast, but I could care less.

                            • 11. Re: RH11 - How to apply style changes to entire project?
                              Peter Grainge Adobe Community Professional (Moderator)

                              Jeff's answer in Post 10 in the thread explains why using the Apply to All Topics is not really a good option if you want to get a reasonable idea of the output while working in the Design Editor. You lose WYSIWYG. For Jeff's workflow that's fine but I wouldn't advocate it here.

                               

                              The issue to be resolved is why changes to the CSS are not showing in the way they should.

                               

                              1] Before you edited the CSS, did the topics reflect the CSS as it was then?

                               

                              2] If you create a new topic with some text, does that reflect the new CSS?

                               

                              3] Have you looked at the HTML to see if there is any inline styling that is affecting the display?

                               


                              See www.grainge.org for RoboHelp and Authoring tips

                               

                               

                              @petergrainge

                              • 12. Re: RH11 - How to apply style changes to entire project?
                                Auntie Em-Pam Level 1

                                Peter,

                                Thank you for your reply. Lately I've been trying to hone my skills with RH styles. Seems I've always had issues with styles as RH always wants to put the left margin at -0 or -1, which I don't understand.

                                In answer to your questions,

                                1.  Yes. But I have always had to constantly tweak the styles, e.g. the left margin on many styles is always going to -0 or -1 when they are not set up that way.

                                2.  Yes. Since I have applied the styles to newly entered text, the styles are correct when I preview.

                                3.  I never use inline styles. I only use styles from the Styles and Formatting pod. It has only been recently that I decided to investigate the CSS to see why it does not mirror the styles I have created in the Styles and Formatting pod. I find that I have to tweak styles a lot in the CSS. I am preparing to move the project over to RH 2015, so I wanted to get my styles cleaned up before I did that. I also cannot delete styles from the Styles and Formatting pod. They will not delete. I have to go into the CSS to delete styles.

                                 

                                This morning I left the Apply to all Topics box ticked, then I generated. However, my style changes are not reflected in the generated output. I am still having to go through line by line and re-apply the styles to get them to change in the content.

                                Then I un-ticked Apply to all Topics. There is no difference in the Design Editor nor in the generated output. I still have to re-apply styles to all content (and images).

                                 

                                And as a further note Jeff, I do care what my content looks like when I am developing it because this is a huge project and I don't have the advantage of extra time to continuously generate to review the output. Although I realise that the Previewer never looks like the generated output, I would like to be reassured that when I apply a style, it will do what I want it to do.

                                Thanks for your help,

                                Pam

                                • 13. Re: RH11 - How to apply style changes to entire project?
                                  Jeff_Coatsworth Adobe Community Professional & MVP

                                  Hmm…you’re saying the “Apply to All” DIDN’T make any difference to how your output looked when you generated? I’d do a quick test – copy your CSS and call it whacky.css; then edit it (outside of RH) and make something obvious (like your Body style) look silly - huge font/strange font/whatever – just so that you can recognize a change. Then copy whacky.css into the root of your project files & fire up RH. Do the Apply to All using that whacky.css – any sign of change in the output?

                                  • 14. Re: RH11 - How to apply style changes to entire project?
                                    Amebr Level 4

                                    I notice you have"Desktop" selected in the Media field.

                                     

                                    This will probably mean you have at least 2 p tag definitions in your stylesheet. Likely the code you pasted above is the definition when you seleect (none) in the Media field, but you have made changes to the Desktop definition.

                                     

                                    For example, here is a snippet with a (none) p definition and a Desktop p definition. The Desktop definition will inherit all the properties of the (none) definition, except for the margin-bottom, which has been changed to 4px. In this example you would only see that difference when the browser is wider than 1024px.

                                     

                                    I personally almost exclusively define my styles in  (none), and then only tweak the Desktop, Android, etc media queries if I absolutely need something to look different at that browser size (and it is browser size, not device specific despite the naming).

                                     

                                    media_queries.png

                                     

                                    The inline margins are weird, and I don't know why RH is adding them, but I believe they will take precedence over the margins you define in your stylesheet. If you know regular expressions, it would be worth running a script to remove them, and then keep an eye out to see if you can find how/why they are being added (e.g. particular combination of actions on a topic).

                                    • 15. Re: RH11 - How to apply style changes to entire project?
                                      Auntie Em-Pam Level 1

                                      I didn't have a chance to copy the CSS, as per Jeff's suggestion, to test out whacky styles. But in response to Amebr, is this the way to go? If I set all my styles now to 'None', am I going to have to go back and tweak the CSS again?

                                      I will have to do more research on stylesheets in RH. I'll see if Peter has some topics on this so that I can understand what RH is doing.

                                      Another question; when I first started this job I was told to use the Responsive HTML5 layout. However, we do not support all devices for our app. If I change to another layout (I'm not sure which would be best), what happens to my CSS and my template?

                                      Thanks,

                                      Pam

                                      • 16. Re: RH11 - How to apply style changes to entire project?
                                        Amebr Level 4

                                        Responsive should be fine, as it will "respond" to each screen size automatically and you mostly don't need to worry about it. If you want to see how responsive HTML behaves, I would recommend opening one of the sample projects, building the responsive output and then re-sizing your desktop browser to very small and very big.

                                         

                                        The following assumes I am correct about where you have changed the style.

                                         

                                        It's not that you have to set the styles to (none), as that you have only made changes to the Desktop styles, so your changes will only show up when your browser window is wider than a specific size, even when you are using a desktop browser. Or if you are talking about not seeing the change in the RH editor, then you will also need to select Desktop when you are editing - in RH11 you can find the media list in the Formatting toolbar just before the Font Colour button. By default it should display (none).

                                         

                                        (I'll continue using the term "screen size" rather than "device", as the devices are only a shorthand guide to what size browser you are targeting.)

                                         

                                        However, I would recommend setting your styles up in (none), as this will apply to all screen sizes by default, then you would only need to select a Media if you wanted something to appear differently for a single screen size. As you are only targeting one screen size, you shouldn't need to play with the Media option at all.

                                         

                                        As I think you have customised the Desktop styles, you will have to reset them; there are two ways to do this:

                                        * by setting the styles through the Styles dialog box in Robohelp (making sure to select (none) in the media list).

                                        * copying the style properties from the desktop @media sections and pasting over the base definition. I'd only recommend this if you are fairly familiar with CSS, as there may be multiple @media sections for each style and screen size. You will need to confirm which @media size corresponds to your Desktop media, then copy the properties out of each style and into the corresponding tag that is not surrounded by an @media statement.

                                         

                                        So for the example in my post above:

                                        Desktop screen size = @media only screen and (min-width: 1024px) and (max-width: 99999px)

                                        Copy: margin-bottom: 4px;

                                        Paste over: margin-bottom: 5px

                                         

                                        You would need to search for that size multiple times, as usually RH creates one per style you customise, and replace all applicable properties.

                                         

                                        Does this help? I can go into CSS 101 to provide some more background on the cascading part of cascading style sheets if you'd like.

                                        • 17. Re: RH11 - How to apply style changes to entire project?
                                          Auntie Em-Pam Level 1

                                          Thanks. I'm going to create a copy of my project before I do this so I can play around with it. I'll let you know how it goes.

                                          Cheers!

                                          am

                                          • 18. Re: RH11 - How to apply style changes to entire project?
                                            Auntie Em-Pam Level 1

                                            If I set my styles to None in the Styles dialog box, do I then have to go through and re-apply all my styles again? As long as the style names remain the same, I shouldn't have to re-apply, correct?

                                            • 19. Re: RH11 - How to apply style changes to entire project?
                                              Peter Grainge Adobe Community Professional (Moderator)

                                              "None" only applies to what is selected.

                                               

                                              Can you create a project with you CSS and one or two of your topics and

                                              send it to me?

                                               

                                              See the Contact page on my site. Send the whole project if you like.

                                              • 20. Re: RH11 - How to apply style changes to entire project?
                                                Auntie Em-Pam Level 1

                                                Peter - I've sent it. If you have any problems opening it, please let me know.

                                                Thanks,

                                                Pam

                                                • 21. Re: RH11 - How to apply style changes to entire project?
                                                  Auntie Em-Pam Level 1

                                                  I have changed all my styles to None in the Styles and Formatting pod and re-entered the exact attributes for each style. I then generated the responsive HTML5 - there is no change to the styles.

                                                  I then ticked Apply to all topics in the Settings and generated - still there is no change to my styles.

                                                  I have to go through and manually re-apply the styles to all the content. I must be missing something somewhere?

                                                  • 22. Re: RH11 - How to apply style changes to entire project?
                                                    Peter Grainge Adobe Community Professional (Moderator)

                                                    You didn't read the instructions on my Contact page did you? I do prefer projects to be sent using wetransfer.com or similar.

                                                     

                                                    In this thread you are saying you have set your styles to None and are then reapplying them. What I see in your project is that you have set the Media to None as shown below. Your CSS is set up to have different styles for different media which is something you would normally only do if you were using a multiscreen layout AND wanted to define different styles for different media. You are using responsive layouts and RoboHelp will make changes to suit different screens.

                                                     

                                                    You will also note in the screenshot below that your default.css has a red cross against it indicating it is not in the project. It is and if you can open the file from Project Manager notwithstanding it is reported as missing. I simply copied the file with a new name and applied it to a topic so that it shows correctly. Check your project to see how it appears there.

                                                    styles.png

                                                     

                                                    Do you have a reason for defining all the styles for different media? If not I would strip out all the styles that are defined for each media type so that you are left with the basic styles. Try it with one style and then see if the appearance is what you expect and if changes then show immediately.

                                                     

                                                    I think the problem is essentially one of having styles you don't need and maybe not understanding how the media options work. Does that sound right?

                                                     

                                                    Come back when you have had a look at the above and seen if it solves the problem.

                                                     


                                                    See www.grainge.org for RoboHelp and Authoring tips

                                                     

                                                     

                                                    @petergrainge

                                                    • 23. Re: RH11 - How to apply style changes to entire project?
                                                      Auntie Em-Pam Level 1

                                                      Peter,

                                                      I'm sorry I didn't send you my file via wetransfer. I was multi tasking and kept getting interrupted. Next time I will.

                                                      As far as the CSS not being in my project folder, it is. I don't understand how it can be in the project folder and show up as missing in RH. I assumed that the x appeared on my CSS folder because I was testing shared files between RH11 and RH2015 and they were not in sync.

                                                      I will try renaming the CSS and then re-applying to topics. I will also remove any unwanted styles from the CSS. I'll let you know the outcome. Thanks.

                                                      My Project Folder:

                                                      css_in_project_folder.PNG

                                                      • 24. Re: RH11 - How to apply style changes to entire project?
                                                        Peter Grainge Adobe Community Professional (Moderator)

                                                        It is odd that the CSS is there but reported as missing. You are not truly sharing in that there is not one file that is accessed by multiple projects. Each project has its own copy and they are synchronised, not the same thing as sharing.

                                                         

                                                        You should not need to reapply the styles. Consider Style X has four variants for different media. You need to strip out the styles that have specific media quoted so that you are left with just one Style X that has no media quoted. The way Rh works is that with None selected as the media it will display the definition for the style without any media defined in the CSS.

                                                         

                                                        Clearer?

                                                         


                                                        See www.grainge.org for RoboHelp and Authoring tips

                                                         

                                                         

                                                        @petergrainge

                                                        • 25. Re: RH11 - How to apply style changes to entire project?
                                                          Auntie Em-Pam Level 1

                                                          Yes, I'm still working on it. It's a huge project. Thanks for your help Peter.

                                                          • 26. Re: RH11 - How to apply style changes to entire project?
                                                            Auntie Em-Pam Level 1

                                                            Peter,

                                                            As a follow-up to our discussion, I will be enrolling in a course soon for CSS and Responsive HTML.

                                                            • 27. Re: RH11 - How to apply style changes to entire project?
                                                              Peter Grainge Adobe Community Professional (Moderator)

                                                              OK but come back if you need further help with this specific problem.

                                                               


                                                              See www.grainge.org for RoboHelp and Authoring tips

                                                               

                                                               

                                                              @petergrainge