Skip to main content
S
Sreekanth_S
Legend
August 7, 2014
Answered

How to add left and right margins in Topic?

  • August 7, 2014
  • 1 reply
  • 2664 views

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

This topic has been closed for replies.
Correct answer Willam van Weelden

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

1 reply

H
HelpAuthor1
Participating Frequently
August 8, 2014

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

S
Sreekanth_SAuthor
Legend
August 10, 2014

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
Willam van Weelden
Inspiring
August 18, 2014

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


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

Terms & ConditionsAccessibility statement
Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices