Below is coding that you'll need to add to your css file if you don't have one of our templates. If you have one of our templates, you can ignore this page.

Histories css coding

If you don't have one of our templates, you will need to add these css codes to either your template css file or to the main css file:

/* ================== IMAGE CODING ================= */
.img-curved {background: #ffffff; border: 1px #92575d solid; padding: 3px;border-radius: 10px; margin: 2px 5px 5px 0; box-shadow: 0 10px 15px -9px rgba(0, 0, 0, 0.5); max-width: 100%;}
.img-left {margin: 10px 10px 10px 0; float: left;}
.img-right{margin: 10px 0 10px 10px; float: right;}

/* ================== CONTENT BOX CODING ================= */
.contentBox3a {float: left; width: 31%; padding: 0; margin: 0 0 5px 0;}
.contentBox3b {float: left; width: 31%; padding: 0; margin: 0 1% 5px 1%;}
.contentBox3c {float: left; width: 31%; padding: 0; margin: 0 0 5px 0;}
.sidebarLeft {float: left; width: 31%; padding: 0; margin: 0 1% 0 1%;}
.contentRight {float: right; width: 64%; padding: 0; margin: 0 1% 0 1%;}

/* ================== MEDIA QUERIES ================= */
@media screen and (max-width: 320px) {
.contentBox3a, .contentBox3b, .contentBox3c, .sidebarLeft, .contentRight {width: 98%; margin: 0 1% 20px 1%; padding: 0; float: none;}

@media screen and (min-width: 321px) and (max-width: 480px) {
.contentBox3a, .contentBox3b, .contentBox3c, .sidebarLeft, .contentRight {width: 98%; padding: 0; margin: 0 auto 20px auto; float: none; max-width: 450px;}

@media screen and (min-width: 481px) and (max-width: 623px) {
.contentBox3a, .contentBox3b, .contentBox3c, .sidebarLeft, .contentRight {width: 98%; padding: 0; margin: 20px auto; float: none; max-width: 450px;}

@media screen and (min-width: 624px) and (max-width: 669px) {
.contentBox3a, .contentBox3b, .contentBox3c {width: 450px; padding: 0; margin: 0 auto 20px auto; float: none;}
.sidebarLeft {width: 450px; padding: 0; margin: 0 auto 20px auto; float: none;}
.contentRight {width: 98%; margin: 1%; padding: 0;}

@media screen and (min-width: 670px) and (max-width: 768px) {
.contentBox3a, .contentBox3b, .contentBox3c {width: 450px; padding: 0; margin: 0 auto 20px auto; float: none;}
.sidebarLeft {width: 450px; padding: 0; margin: 0 auto 20px auto; float: none;}
.contentRight {width: 98%; margin: 1%; padding: 0;}

@media screen and (min-width: 769px) and (max-width: 800px) {
.contentBox3a, .contentBox3b, .contentBox3c {width: 450px; padding: 0; margin: 0 auto 20px auto; float: none;}
.sidebarLeft {width: 450px; padding: 0; margin: 0 auto 20px auto; float: none;}
.contentRight {width: 98%; margin: 1%; padding: 0;}

Styling

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