Our Family's Journey
Styling Your Pages:
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
Heading Styles | Heading Styles |
h1h2h3 |
h4h5h6 |
3rd row - column 1 | 3rd row - column 2 |
4th row - column 1 | 4th row - column 2 |
5th row - column 1 | 5th row - column 2 |
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
Contact Us
Webmaster Message
We make every effort to document our research. If you have something you would like to add, please contact us.