A lot of us don’t bother & just use the “Apply to All” flag in the SSL to affect our output…
sorry? can you please elaborate because I don't understand.
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.
Oh duh - I didn't even know that was there. Thanks!
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.
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
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.
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
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,
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?
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).
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).
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?
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.
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.
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?
"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.
Peter - I've sent it. If you have any problems opening it, please let me know.
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?
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.
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
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:
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.
See www.grainge.org for RoboHelp and Authoring tips
Yes, I'm still working on it. It's a huge project. Thanks for your help Peter.
As a follow-up to our discussion, I will be enrolling in a course soon for CSS and Responsive HTML.