Template Guide - Printable Version

Beginner's Guide to Templates

Save It • Use It • Write • Customize

No Coding Experience Required

Start Here

Posting Templates let you save the reusable layout that goes around your writing so you do not have to paste the same full template code into every post.

You do not need to know HTML or CSS to use a Posting Template. If you already have a finished template, you only need to know where the writing belongs, how to save the pieces around it, and how to select it while posting.

THE SIMPLE VERSION

Your saved template has three parts:

HEADER
Your opening layout code.

YOUR WRITING
The actual reply you type in the normal post editor.

FOOTER
Your closing layout code.

Once saved, the site automatically places your writing between the Header and Footer.

If you want to build or heavily customize templates yourself, use the Advanced Posting Templates Guide. This guide is only for getting a template saved and working.

Get a Template

You do not need to build a template from scratch before using Posting Templates.

If you already have a template you like, you can use that. If not, there are two easy places to start:

JAE'S TEMPLATE EMPORIUM

Use the Template Emporium if you want a custom or more elaborate template made for you.

Visit the Template Emporium

FREE-TO-USE TEMPLATES

Use the free-to-use thread if you just want to grab a ready-made template and start writing.

Browse Free-to-Use Templates

LINKS NEEDED

Replace both # links above with the final Template Emporium and free-to-use thread URLs.

Save Your Template

1. Open User CP.

2. Click Posting Templates in the User CP menu.

User CP → Posting Templates

3. Create a new Posting Template and give it a name you will recognize later, such as Jane Doe - Simple.

4. Find the main writing area in your complete template. Everything before that writing area goes into the Header. Everything after it goes into the Footer.

HEADER

YOUR WRITING GOES HERE

FOOTER

5. If you want dialogue to use a saved speech color, choose that color in the Speech Color field. Otherwise, you can leave it blank.

6. Make sure the template is Enabled so it appears while posting. Mark it Default only if you want it automatically selected.

New Posting Template form showing Template Name, Header, Footer, Speech Color, Enabled, and Default

7. Preview the template. If it looks right, save it.

Use a Saved Template

When you open the full posting form, look for the Posting Template selector near the top of the form.

On the New Thread page, the selector sits directly above the Thread Title bar.

Posting Template selector above the Thread Title bar

1. Choose the saved template you want from the dropdown.

2. Write your post normally in the main message editor.

3. Do not paste the saved Header or Footer into the editor. The site adds them automatically.

4. Preview if you want to check the finished layout.

5. Submit normally.

If you have several enabled templates, you can choose a different one for an individual post without changing your default.

Speech Color & [say]

If your saved Posting Template has a Speech Color, you can apply it to dialogue by wrapping the dialogue in [say] tags while you write your post.

John looked across the room.

[say]"Are you coming?"[/say]

Jane shook her head.

Only the words between [say] and [/say] receive the saved speech color.

You add the [say] tags in the normal post editor while you are writing. You do not need to put them permanently into the saved Header or Footer.

Safe Editing

You do not have to understand the whole template to make a few simple changes.

SAFE THINGS TO CHANGE

If a template creator says customization is allowed, common beginner-friendly edits include names, image URLs, written labels, and simple colors.

Make one change at a time and preview after editing.

If you want to change the actual structure, build new CSS, add Google Fonts, use <newclass>, or build PTabs, move over to the Advanced Posting Templates Guide.

Quick Troubleshooting

My template is not listed in the Posting Template dropdown.

Open User CP → Posting Templates and make sure the template is enabled.

The wrong template is selected automatically.

Check which saved template is marked as your default. You can still choose another enabled template manually.

My dialogue is not using the speech color.

Make sure the saved template has a Speech Color and that the dialogue in your post is wrapped in [say]...[/say].

The saved version looks broken even though the full code worked when pasted directly into a post.

The Header/Footer split may be in the wrong place, or a closing tag may have been moved into the wrong section. Return to the complete template and check where the writing area begins and ends.

There are strange gaps in a coded layout.

That moves into advanced territory. Check the Advanced Posting Templates Guide for <nospaces>, structural troubleshooting, and more complex code fixes.

STILL STUCK?

Ask for help and include the template code plus a link or screenshot showing what went wrong. It is much easier to diagnose a layout when staff can see both the code and the result.

Where to Go Next

If you just want more ready-made layouts, head back to the Template Emporium or the free-to-use thread.

Template Emporium Free-to-Use Templates

If you want to learn how the code works or start building your own layouts, continue to the Advanced Posting Templates Guide.

The advanced guide is where Google Fonts, <nospaces>, <newclass>, PTabs, more complex Header/Footer work, and deeper troubleshooting belong.

Advanced Posting Templates Guide

LINKS NEEDED

Replace the three # links in this tab once the Template Emporium, free-to-use thread, and Advanced Guide URLs are final.

Advanced Guide to Templates

Build • Style • Extend • Troubleshoot

Build It One Piece at a Time

Start Here

This guide is for members who want to build, change, or troubleshoot coded Posting Templates. If you only want to save a finished template and use it while posting, the Beginner's Guide is the easier place to start.

YOU DO NOT NEED TO MEMORIZE THIS

Use this guide while you work. Pick the section that matches what you are trying to change, test one small thing, and preview often.

A few coding words appear because they are useful names for things. When one matters, this guide explains it in plain language first.

HTML is the part that builds the boxes and puts content in them.

CSS is the part that tells those boxes how to look.

A selector is simply the name that tells a style what it should change.

Nesting means putting one box or set of tabs inside another.

THE GOLDEN RULE

When something breaks, do not change five things at once. Go back to the smallest version that works, change one thing, preview it, then continue.
Beginner's Guide

Structure

Template Anatomy

A coded template is easier to understand when you stop looking at it as one giant spell and start looking at it as a stack of boxes.

The simplest Posting Template has three jobs:

HEADER — everything that opens before the writing.

WRITING AREA — the reply the member types normally.

FOOTER — everything that closes after the writing.

Header & Footer

The Header should stop exactly where the member's writing begins. The Footer should begin exactly where that writing ends.

For example, if this is the complete template:

<div style="padding:25px;">
<div style="font-size:24px;">Jane Doe</div>
<div style="line-height:1.7;">

YOUR WRITING GOES HERE

</div>
Footer note goes here. </div>
The first three opening lines belong in the Header. The two closing </div> lines belong in the Footer.

COUNTING IS NOT ENOUGH

Having the same number of opening <div> and closing </div> tags does not guarantee that they close in the right places. A box opened inside another box should normally close before the outside box closes.
Boxes Inside Boxes
A <div> is just a general-purpose box. Templates often put one box inside another so each part can have its own size, spacing, color, or border.

When one box is inside another, close the inside box first:

<div class="outside">
  <div class="inside">
    Content goes here.
  </div>
</div>
A USEFUL HABIT

When a layout starts behaving strangely, indent the code so boxes inside other boxes sit farther to the right. It becomes much easier to see which closing tag belongs to which opening tag.

Styling

Size & Space

Most visual changes happen inside style="". Each setting is separated with a semicolon.

style="width:450px;padding:25px;margin:20px auto;"
width controls how wide the box is.

height controls its height when you truly need a fixed height.

padding adds space inside the box, between its edge and its content.

margin adds space outside the box. margin:auto is commonly used to center a fixed-width template.

box-sizing:border-box makes the declared width include the padding and border. This usually makes fixed-width layouts easier to control.

Colors & Borders

style="background:#17191d;color:#d5d0cb;border:1px solid #9a7057;"

background changes the box behind the content.

color changes the text color inside that box unless a smaller piece overrides it.

border controls the line around the box. The example above means a 1 pixel solid border in #9a7057.

border-radius rounds the corners.

KEEP IT READABLE

Pretty colors still need enough contrast to read comfortably. If you have to squint at your own template, soften the design before adding more decoration.

Text & Layout

A few settings do most of the work for template text:

font-family chooses the font.

font-size changes text size.

line-height changes the vertical space between lines.

text-align can be left, center, right, or justify.

letter-spacing changes the space between letters.

overflow controls what happens when content is larger than the space you gave it. overflow-y:auto adds a vertical scrollbar only when the content needs one.

SCREENSHOT NEEDED

A before-and-after comparison of the SAME simple template. The second version should visibly change width, padding, border, background, and text color while keeping the content identical.

Google Fonts

Google Fonts lets you use font families that are not already installed on a member's computer.

Open Google Fonts
1. Open Google Fonts and choose the font family you want.

2. Use Google Fonts' controls to add the font and open the embed-code area.

3. Copy the web <link> code Google gives you.

4. Put that embed code before the rest of your Header or after the rest of your Footer.

5. Use the font-family name Google gives you inside your template styling.

font-family:'Libre Baskerville', serif;
SCREENSHOT NEEDED

The current Google Fonts page with one font selected and the WEB EMBED CODE area visible. Circle or point to the exact code members should copy.
MORE THAN ONE FONT

You can add several font families before copying the embed code so Google can give you one embed block for the set.

<nospaces>

MyBB can turn the line breaks and indentation inside code into visible gaps. If a layout has strange empty space that is not coming from your own margin or padding, <nospaces> may be the right fix.

Put it at the very beginning of the Header.

<nospaces>
There is no closing </nospaces> tag. It is a one-time instruction.

After using it, add intentional line breaks yourself with <br> or <br><br> where you actually want them.

First paragraph.<br><br>Second paragraph.
DO NOT USE IT AS A BANDAGE

If the gap comes from margin, padding, height, or a closing tag in the wrong place, <nospaces> will not repair that problem. Use it for parser-created spacing.

NewClass

NewClass Basics

Simple styling can stay inside style="". Use <newclass> when you want one reusable style name or when you need styling that inline CSS cannot express.

First, make the style rule:

<newclass=.example-box>
background:#181818;
color:#eeeeee;
padding:20px;
</newclass>
Then give the HTML box the matching class name:

<div class="example-box">
Jane Doe writes here.
</div>
THE DOT MATTERS

The HTML says class="example-box". The NewClass rule uses .example-box. That dot means “a class with this name.”
SCREENSHOT NEEDED

A simple side-by-side image: on the left, class="example-box" in the HTML; on the right, <newclass=.example-box>. Add an arrow showing that the two names match.

Reuse & Hover

One class can be used on more than one box. That is useful when several pieces of a template should share the same styling.

NewClass can also handle a hover effect. A hover style applies when the mouse is over the element.

<newclass=".example-box:hover">
transform:translateY(-2px);
</newclass>
The part after the class name, :hover, tells the site to use that version only while the mouse is over the box.

WHERE IT CAN GO

NewClass rules can live in a saved Header or Footer. Keep the rule with the template that needs it so the style is available when the post is displayed.

PTabs

Basic Build

PTabs make clickable sections inside a post. The whole tab set begins with <PTabbedContent>. Each individual tab begins with <PTab=Tab Name>.

<PTabbedContent=Example Tabs>

<PTab=Overview>
Overview text goes here.
</PTab>

<PTab=History>
History text goes here.
</PTab>

<PTab=Notes>
Notes go here.
</PTab>

</PTabbedContent>
SCREENSHOT NEEDED

A basic three-tab PTabs result on SoS. Show Overview, History, and Notes, with one tab clearly active and its content visible.
PTABS STAY INLINE

PTabs should be pasted directly into the normal post editor rather than split into a saved Posting Template. Each tab has its own writing area, so keeping the whole block inline lets the member reach and edit every section.

Style the Tabs

The closing tag for each PTab can style two different things: the content panel and that tab's button.

Normal settings style the content panel. Settings that begin with tab- style the button.

</PTab={background:#181818;color:#eeeeee;padding:20px;tab-background:#242424;tab-color:#dddddd;tab-hover-background:#333333;tab-hover-color:#ffffff;tab-selected-background:#6b4a31;tab-selected-color:#fff1d6;}>
tab-background and tab-color style the normal button.

tab-hover-... changes it while the mouse is over it or it is focused.

tab-selected-... changes the currently open tab.

Because every PTab has its own closing style block, different tabs can have different colors or other styling.

Layout Options

The closing </PTabbedContent> tag controls the whole tab set.

</PTabbedContent={tabs:top;tab-alignment:center;tabgap:8;animation:fade;}>
tabs can be top or side.

tab-alignment controls top tabs: left, center, or right.

tabvalign controls side tabs: top, middle, or bottom.

tabgap controls the space between the buttons and content.

tabwidth controls the width of the side-tab column.

animation can be fade or slide.

</PTabbedContent={tabs:side;tabvalign:top;tabwidth:150;tabgap:10;animation:slide;}>
SCREENSHOT NEEDED

A side-by-side comparison: LEFT should show wrapped top tabs; RIGHT should show side tabs. Use the same simple content in both so only the layout changes.

More Behavior

PTabs can be put inside another PTabbedContent block. That is called nesting: one tab set lives inside another.

Use nesting when a large subject really has smaller sections. Do not add nested tabs only for decoration, because too many navigation layers become harder to follow.

The whole row of tab buttons can also be styled with tabbar- settings on the closing PTabbedContent tag.

</PTabbedContent={tabbar-position:sticky;tabbar-top:0;tabbar-z-index:10;}>
In that example, the entire tab-button row stays in place while its surrounding scroll area moves.

TRANSPARENT STICKY TABS

If a sticky tab bar is transparent, scrolling text can still be visible behind it. For a clean transparent look, it is often better to keep the tab row outside the scrolling box and let only the content panel scroll.
SCREENSHOT NEEDED

PTabs code beside its rendered result. Draw a simple visual line from each <PTab=...> block in the code to the matching visible tab button.

Carousels

Carousels make a click-through slideshow inside a post. The whole carousel goes between the carousel tags, and each individual page goes between its own slide tags.

<carousel>
<slide>First slide content.</slide>
<slide>Second slide content.</slide>
<slide>Third slide content.</slide>
</carousel>
A slide can contain normal text, an image, or a whole coded layout. For an image-only slideshow, put one image inside each slide.

<carousel>
<slide><img src="IMAGE URL"></slide>
<slide><img src="IMAGE URL"></slide>
</carousel>
Optional settings go on the opening carousel tag:

<carousel loop="yes" counter="yes" animation="slide">
loop can be yes or no. When it is on, moving past the last slide returns to the first.

counter can be yes or no. It controls the visible slide counter.

animation can be slide or fade.

NO JAVASCRIPT NEEDED

The carousel behavior is already built into SoS. Members only need the carousel and slide tags.

Debug It

First Checks

You do not need to understand the entire template to debug it. Find the smallest part that stopped working and test that first.

1. Preview the template before changing anything else.

2. If it broke after one recent edit, undo that edit first.

3. Check whether a tag was deleted, moved, or typed differently.

4. If the problem appeared after splitting a Posting Template, check the Header/Footer cut.

5. Remove newer decorative pieces until the simple version works again, then add them back one at a time.

ONE BUG AT A TIME

Changing several things at once makes it harder to learn which change fixed the problem and which one created a new one.

Structure Problems

Content spills outside the template, borders stop early, or the bottom looks crushed.

Check the opening and closing <div> tags near the place where the layout first goes wrong.

The full template works, but the saved Posting Template breaks.

Check the Header/Footer split. A closing tag may have landed on the wrong side of the writing area.

SCREENSHOT NEEDED

A deliberately broken simple template caused by ONE missing closing
. Show the visible layout problem. If possible, place the broken code beside it with the missing closing line marked.

Spacing & Styles

There are strange gaps.

First check margin and padding. If those are correct and the gaps come from the way MyBB reads line breaks in the code, try <nospaces>.

A Google Font does not appear.

Check that the embed code is present and that the font-family name matches the name Google gives you.

A CSS setting does nothing.

Check spelling, the colon after the setting name, and the semicolon between settings. If you are using NewClass, also check that the class name matches.

PTabs & NewClass

A NewClass style does nothing.

If the HTML says class="example-box", the NewClass rule should point to .example-box.

One PTabs button looks different from the others.

Check that tab's own closing style block. Each tab can carry its own normal, hover, and selected button styles.

A PTabs layout option does nothing.

Make sure whole-layout options such as tabs, tab-alignment, tabvalign, tabgap, tabwidth, and animation are on the closing PTabbedContent tag.

Debugging Toolbox

SOS CUSTOM TAG WARNING

Outside code checkers understand normal HTML and CSS, but they do not understand SoS-only tags such as <nospaces>, <newclass>, <PTab>, or <PTabbedContent>. A checker may complain about those even when the SoS code is correct. Use these tools to inspect the ordinary HTML or CSS around our custom tags.

MY BOXES ARE CLOSING IN STRANGE PLACES

W3C HTML Checker

Use this to look for ordinary HTML mistakes such as badly placed or missing closing tags. Expect warnings about SoS custom tags.

MY CSS LOOKS RIGHT, BUT A STYLE WILL NOT WORK

W3C CSS Validator

Paste the CSS itself into the direct-input box. This is useful for misspelled settings, missing punctuation, or invalid CSS.

THE CODE LOOKS NORMAL, BUT SOMETHING INVISIBLE MAY HAVE BEEN PASTED IN

ByteScope Invisible Character Checker

Paste the suspicious code to reveal zero-width spaces, unusual Unicode, and other hidden characters that can sneak in when code is copied between apps.

IT WORKED BEFORE I EDITED IT

Diffchecker Text Compare

Put the working version on one side and the broken version on the other. The changed pieces are highlighted so you can find a tiny accidental edit in a large template.

Still Broken?

Ask for help before the problem turns into a three-hour staring contest with one closing tag.

Include as much of this as you can:

• The code.

• What you expected it to look like.

• What it actually looks like.

• A screenshot or direct link to the broken result.

• What you changed immediately before the problem appeared, if you know.

DO NOT CLEAN IT UP FIRST

If you are asking someone to find a bug, give them the version that is actually broken. A screenshot of the problem plus the exact code that produced it is usually more useful than a rewritten explanation.