Skip to main content
Auntie_Em-Pam
Known Participant
February 29, 2016
Question

RH11 - How to apply style changes to entire project?

  • February 29, 2016
  • 4 replies
  • 2432 views

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

This topic has been closed for replies.

4 replies

Auntie_Em-Pam
Known Participant
March 9, 2016

Peter,

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

Peter Grainge
Community Expert
Community Expert
March 10, 2016

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


See www.grainge.org for RoboHelp and Authoring tips

@petergrainge

Use the menu (bottom right) to mark the Best Answer or Highlight particularly useful replies. Found the answer elsewhere? Share it here.
Auntie_Em-Pam
Known Participant
March 8, 2016

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

Auntie_Em-Pam
Known Participant
March 6, 2016

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:

Peter Grainge
Community Expert
Community Expert
March 7, 2016

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

Use the menu (bottom right) to mark the Best Answer or Highlight particularly useful replies. Found the answer elsewhere? Share it here.
Jeff_Coatsworth
Community Expert
Community Expert
February 29, 2016

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

Auntie_Em-Pam
Known Participant
February 29, 2016

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

Community Expert
March 3, 2016

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


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.