How to add left and right margins in Topic?

[Sreekanth_S]

Hi

I am using RH10, as part of TCS4. I am creating screen layouts by just modifying the existing ones.

I noticed that there is no margin/ space between the topic border and the topic content in it. When I searched for that in mobile.css, I did not find any relevant reference. When I did a Inspect Element on Firefox, it pointed to default.css which I don't find in my Project Setup pod.

How can I modify it? Here is the screenshot of the issue I am referring to:

Please advise.

Sreekanth

[HelpAuthor1]

The default.css is in your Project Manager pod, not the Project Setup pod. Scroll past your topics and just before the images, you should find the default.css. Double-click to open and you can set a left and right margin for your normal text, headings, etc. under Paragraph. Be sure to APPLY before moving to the next paragraph style.

As long as all your topics do not have inline formatting that overrides the css, they should pick up the new settings and apply them. Regenerate, then view to see if you added enough left and right margin to suit your needs.

Let me know. Thanks, Susan

[Peter Grainge]

Or right click the css, click Edit With > HTML Editor and apply a margin left and margin right to the Body tag.  That will affect all the styles in one go.

---

See www.grainge.org for RoboHelp and Authoring tips

@petergrainge

[Sreekanth_S]

Hi Susan

This is a FM-based project. So, the styles of this project are in RHStyleMapping.css. I went and modified the Body tag there, but it did not have any effect on the Multiscreen HTML5 output.

I also noticed that the default.css is missing from my Project Manager pod. Is there a way to get that back?

Sreekanth

[Willam van Weelden · Accepted solution]

This is done in the layout css. If you add padding to div.wTopic you will get the result you require. Just remember to substract any width you add in padding from the width of the div.wTopic or the container will become too large.

The project manager pod only shows the css files currently used by topics. Can you assign the css to a topic from the topic properties? There you should see all css files in your project directory.

Kind regards,

Willam

[Sreekanth_S]

Thanks Willam.

I just added 5px padding on both sides in layout's css and it worked for me. When I fiddled around the width (which was at 95%), I ended up with some extra space towards right. Any idea how to convert px into % and fix that?

Sreekanth

[Willam van Weelden]

There's an even better solution using CSS3 calc:

width: calc(95% - 5px);

Now the browser will calculate the required number of pixels itself 🙂 No more need to fiddle yourself.

Kind regards,

Willam

[Sreekanth_S]

Thanks Willam. You are a genius. That works like a charm.

Sreekanth