Padding for the SKINS

[chunkee]

Hello,
I am trying to adjust the padding for the skin & page so I have a layered effect. I am not finding this option in the CSS editor. Can someone assist. Below is a screenshot to clarify.

Thank you.
John Coria

[LTinker68]

The areas you have highlighted have nothing to do with the skin. Those areas are controlled by the topic stylesheet.

The distance between the text and the left edge of the topic area is controlled by the html or body tags (generally the body tag). Change the margin-left and/or padding-left values of the body tag.

The vertical distance between elements could be a few different attributes. It could be margin-top, margin-bottom, padding-top, padding-bottom, or line-spacing.

[chunkee]

Thanks for the reply Lisa. There is one in the skin called Topic container (the light blue or second container in the screenshot) does not have the padding attribute. I have tried opening it in text editor and makind some adjustments attempting to use the property tag in the skin (following the skin markup), but did not get it to work right.

Any other suggestions?

Thanks again.

John C

[LTinker68]

Again, the styles aren't in the skin. The styles are in the topic stylesheet, generally called Styles.css or Modern.css, found in the Stylesheet folder in the Content Editor pane. You might see both stylesheets, so make sure you modify the one that your target is pointing to (by default, it's Styles.css for WebHelp, Modern.css for HTML5).

[chunkee]

Thank you Lisa. I cannot find the code for topic.container. Shown below in the skin editor is the frame component I am speaking of.

I opened the Skin in the text editor and found some CSS markup. I tried adding some padding to the style, but it does not seem to be working.

<Style
Name="Topic Container">
<Properties>
<Property
Name="BackgroundColor">#d8e9f3</Property>
<Property
Name="PaddingLeft">20px</Property>
<Property
Name="PaddingRight">20px</Property>
</Properties>
</Style>
<Style

This is how it is coded in the Skin by MC.

topiccontainer.png

[LTinker68]

What exactly are you trying to do? Are you trying to get rid of that light blue strip between the topic and the pane border?

[chunkee]

I would like to make the strip of the dark blue and light blue larger (20px) and the white topic from the light blue. I can do the topic content, but the topic container that houses the toolbar is not as easy.
Thanks again for the response.

[LTinker68]

Doesn't look like you can do it through the GUI, but you can by modifying one of the files in the output. (This is for HTML5 output -- you can probably do something similar for WebHelp output.)

In the output files, open the default.htm file (or whatever you called it) in Notepad. Do a find on contentBody. You should jump to the DIV with an ID of contentBody. Add the bolded text below to the tag. Save the file and close it, then launch your help -- you should see the spacing you wanted.

<div id="contentBody" class="needs-pie" style="margin-left:20px;">

There are two options for how to handle this step from now on. If you want this change to be just for this project and no other, then make a copy of the default.htm file and save it outside of the project. Modify the file as explained above. Every time you build the output, you then copy your default.htm file into the output and overwrite the one created in the build.

If you want this change to be for all projects, then you can modify the program file. I think the correct file is at C:\Program Files (x86)\MadCap Software\MadCap Flare V9\Flare.app\Resources\WebHelp2\Desktop for Flare 9. I'm not entirely positive the WebHelp2 corresponds to HTML5 output, but I'm guessing. Make a copy of the default.htm file that's already there and name it default.old or something like that. That way if you make a mistake you can restore the original file.

NOTE: The modification to the program file will be overwritten if you ever reinstall or update this version of Flare, and it won't be ported over if you upgrade Flare. So if you go with that method, I suggest putting a note somewhere detailing what you changed in the program files so if you reinstall/update/upgrade, then you can redo the modification.

[chunkee]

Doesn't look like you can do it through the GUI, but you can by modifying one of the files in the output. (This is for HTML5 output -- you can probably do something similar for WebHelp output.)

In the output files, open the default.htm file (or whatever you called it) in Notepad. Do a find on contentBody. You should jump to the DIV with an ID of contentBody. Add the bolded text below to the tag. Save the file and close it, then launch your help -- you should see the spacing you wanted.

<div id="contentBody" class="needs-pie" style="margin-left:20px;">

There are two options for how to handle this step from now on. If you want this change to be just for this project and no other, then make a copy of the default.htm file and save it outside of the project. Modify the file as explained above. Every time you build the output, you then copy your default.htm file into the output and overwrite the one created in the build.

If you want this change to be for all projects, then you can modify the program file. I think the correct file is at C:\Program Files (x86)\MadCap Software\MadCap Flare V9\Flare.app\Resources\WebHelp2\Desktop for Flare 9. I'm not entirely positive the WebHelp2 corresponds to HTML5 output, but I'm guessing. Make a copy of the default.htm file that's already there and name it default.old or something like that. That way if you make a mistake you can restore the original file.

NOTE: The modification to the program file will be overwritten if you ever reinstall or update this version of Flare, and it won't be ported over if you upgrade Flare. So if you go with that method, I suggest putting a note somewhere detailing what you changed in the program files so if you reinstall/update/upgrade, then you can redo the modification.

Thank you Miss Lisa. You have been very helpful.
Regards,
John C