You can choose different types styling in your pages. Since you have a Genealogy Web Templates template, you have all the styles available to you without having to add any additional information.

You can set up a page with a sidebar and a content area. You can choose to have your sidebar on the right or left.

For styling your images, you have these options:

.img-right: floated to the right
.img-left: floated to the left

.img-frame: has a border and a shadow
.img-frame-right: has a border and a shadow
.img-frame-left: has a border and a shadow

.img-curved: has a curved edge, a gray border and a shadow
.img-curved-right: has a curved edge, a gray border and a shadow, floats right
.img-curved-left: has a curved edge, a gray border and a shadow, floats left

.img-shadow: has a shadow
.img-right-shadow: has a shadow and is floated to the right
.img-left-shadow: has a shadow and is floated to the left

.img-round: round or oblong depending on your image: square images become round, rectangle images become oval
.img-round-left: round as described above but floated to the left
.img-round-right: round as described above, but floated to the right

.img-rotate-right: tilts the image to the right, floats it right, has a border
.img-rotate-left: tilts the image to the right, floats itimg-round2 round or oblong depending on your image: square images become round, rectangle images become oval, has a border

.img-border: has a light gray border
.img-small: maximum width of this image is 150px

You can use a number of styles together when styling an image.

This is what the image styling looks like for the boy above:  <img class="img-round-right" alt="" src="img/boy1.jpg"> Because he is rectangular, the round becomes an oval and he floats to the right.

If you want an image centered, you MUST place them in a paragraph. Your image is styled this way:
<p class="center"><img class="img-frame" alt="" src="img/boy1.jpg"> </p>

Styling your headings

Creating boxes of text

If you want 3 or 4 boxes side by side, you would use this code:

For 3 Boxes use these codes:

<div class="contentBox3a">  <p>This is your first box of 3 boxes. Write your text in here.</p>  </div>
<div class="contentBox3b">  <p>This is your second box of 3 boxes. Write your text in here.s</p>  </div>
<div class="contentBox3c">  <p>This is your third box of 3 boxes. Write your text in here.</p>  </div>
<div class="clear"></div>
You can see this 3 box layout on the "Place 1"
The Place 2 page has the 3 box layout with a sidebar.

For 4 Boxes use these codes:

<div class="contentBox4a">  <p>This is your first box of 4 boxes. Write your text in here.</p>  </div>
<div class="contentBox4b">  <p>This is your second box of 4 boxes. Write your text in here.</p>  </div>
<div class="contentBox4c">  <p>This is your third box of 4 boxes. Write your text in here.</p>  </div>
<div class="contentBox4d">  <p>This is your fourth box of 4 boxes. Write your text in here.</p>  </div>
<div class="clear"></div>
You can see this layout on Story 1.

Using tables

You can use tables or css classes to format the layout of your page. The table above is 80% wide and aligned to the center. If you want your table wider, just remove the width=80%. If you want it aligned to the left; remove this: margin: 0 auto.

Multi-language pages

If you are creating a story that you will translate and want to display in the language the user has selected when viewing your site, then you can place the content that starts with the heading 1 (< h1 >) line to everything in the line before the tng_footer.php function call in your language folder and use a PHP

include($mylanguage/family1.php) to include the content from you language folder for each language you support on your site.
For additional information see the TNG Wiki article on creating User Pages or histories using the historytemplate.php file at http://tng.lythgoes.net/wiki/index.php?title=User_Pages_-_Getting_Started and http://tng.lythgoes.net/wiki/index.php?title=User_Pages_-_Multi-Language