Multiple CSS files in a project

Report · Feb 21, 2013

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

Report · Feb 21, 2013

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?

Report · Feb 21, 2013

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:

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

@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.

Report · Feb 21, 2013

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

Report · Feb 21, 2013

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.

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.

@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.

Report · Feb 21, 2013

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

Report · Feb 22, 2013

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

Report · Dec 01, 2021

Been a while since you posted this but I'm currious how you got the @Import working. I'm using RH 2020 but have no luck using @Import, the imported CSS files are not beeing recognized by the WYSIWYG editor and no styles are available.

Report · Dec 01, 2021

Been a while since you posted this but I'm currious how you got the @Import working. I'm using RH 2020 but have no luck using @Import, the imported CSS files are not beeing recognized by the WYSIWYG editor and no styles are available.

Report · Dec 01, 2021

@a_David This is a very old thread and any information would relate to a much older version of RoboHelp. See if this helps. Using Font Awesome, Google Fonts, @font-face and SVGs in RoboHelp (grainge.org)

If nothing is showing in the Styles panel, that is a sign that CSS cannot be parsed. Maybe it contains some @media styles? If so, comment them out. It could simply be something you have added in your efforts to get this working.

________________________________________________________
See www.grainge.org for free Authoring and RoboHelp Information

Help others by clicking Correct Answer if the question is answered. Found the answer elsewhere? Share it here. "Upvote" is for useful posts.

Report · Dec 07, 2021

To me everything is done as it should. I've tried with a simple test case.

I've got two CSS files. "core.css" and "headings.css". "core" is referenced in the topic.

In "core" there's only the import rule (@import url("headings.css");)
In "headings" I've got one style added for the h1 tag. This style has color red to it.

Now in RH the h1-tag becomes red so the style is working but the format will not show up in the style selection list.

Report · Dec 01, 2021

Also note that multiple stylesheets are supported in RH2019 and above so you can just apply multiple stylesheets to your topics.

Report · Dec 07, 2021

Yes, you are able to add these manually once the topic has been created but there is no way of adding references to multiple css files in the settings. So when a editor creates a new topic only one css file will be referenced.

I want to be able to have references to multiple css files on the fly when a new topic is created. I've tried to use the @Import solution but that does not work either.

Report · Dec 07, 2021

Yes new topics will only have one CSS but it's easy enough to add more here.

Effectively what you want is a customised default template. That would need a feature request. Please follow this link to report bugs or request new features. https://tracker.adobe.com. Post the link to your bug report / feature request in this thread and others can vote for it. The more people who do so, the higher it gets prioritised.

Alternatively, create such a topic and get the authors to create a copy of it each time they want a new topic.

________________________________________________________
See www.grainge.org for free Authoring and RoboHelp Information

Help others by clicking Correct Answer if the question is answered. Found the answer elsewhere? Share it here. "Upvote" is for useful posts.

Report · Dec 07, 2021

Yes, it's easy enough to do this but it has to be done, every time, if it's possible to do this automatically it would be even better. My take on this is that all the fiddeling around with different settings everytime a topic is created should'nt be done by the editors. The editors should be able to focus on creating content, not making setting changes. 🙂

Report · Dec 07, 2021

I understand your thinking but it's the first time I have seen anyone request this in twenty odd years of using RoboHelp. Usually either the editors would be doing this or given corporate instructions. That said, you have a valid point so submit a feature request.

________________________________________________________
See www.grainge.org for free Authoring and RoboHelp Information

Help others by clicking Correct Answer if the question is answered. Found the answer elsewhere? Share it here. "Upvote" is for useful posts.

Report · Dec 07, 2021

I guess what I would like to do is to be able to add multiple CSS files in the project settings. Or, make the @Import rule work within RH.

Report · Dec 07, 2021

Please use the photo icon to insert images within the post. Seeing an image inline with the text makes it easier for anyone answering or viewing the post.

Adding to the font list is nothing to do with the CSS files. It's not something I have needed to use so I suggest you have a word with Support on that. See https://helpx.adobe.com/contact/enterprise-support.other.html#robohelp for your Adobe Support options. The email link tcssup@adobe.com is recommended as it reaches a team dedicated to Technical Communication Suite products including RoboHelp.

________________________________________________________
See www.grainge.org for free Authoring and RoboHelp Information

Help others by clicking Correct Answer if the question is answered. Found the answer elsewhere? Share it here. "Upvote" is for useful posts.

Report · Dec 07, 2021

Hi David,

I have looked into this and understand and agree with the request.

I have created a ticket for this (RH-10407) and hope that the dev team can incorporate this improvement in one of the next updates.

Kind regards,

Stefan