Tips & Tricks

I had some spare time today, so I thought I’d go through the Help and Tips forum and collect up the advice, tools, and tips that keep coming up, and put them into one thread for ease of reference. Totally unofficial like, but I suspect folks will find this a handy quick reference.

Guides

Floating Nav Bar Guide
Gnunn’s Interactive Map Guide
Gnunn’s Simple Button Guide
Wiki Navigation Box Guide
Official Dynamic Character Sheet Guide

Templates

4th Ed D&D Character Sheet Thread
Arsheesh’s Wiki Tempaltes
ChainsawXIV’s Wiki Templates
FiredrakeMacFie’s HERO System Character Sheet
General Use XP Bar Template
Gh0st’s D&D 3.5 Character Sheet
Gnunn’s D&D 3.5 Class Template
Gnunn’s D&D 3.5 Monster Template
Gully’s D20 Future Space Ship Sheet
Mage Character Sheet Thread
Mandi’s WoD 2.0 Character Sheet
Redstar’s Pathfinder Character Sheet
RobJustice’s Savage World Character Sheet
Sandman’s 4th Ed. Items Sheet
Sandman’s 4th Ed. Traps & Hazards
Untamed’s Shadowrun Character Sheet
Zalambar’s 4th Ed. Monster Block

Formatting Tools

ChainsawXIV’s D&D Tools
Dungonmastering.com’s DM Tools
Word to Textile Converter

Formatting FAQ

This is a collection of answers to a number of common formatting questions that have been posted on this forum. It’s not a comprehensive turorial, and it doesn’t cover the absolute basics, but if you’re stuck on something you may find the answer you need here. At the very least, this should get you on the right track to solving your formatting problems.



Question: How do I use special characters (hyphens, ampersands) in the name of a wiki page?
Answer: You can create a page with a special character in its name by clicking on the Create New Page button on the Wiki side bar, and entering the name you want in the field provided. The system won’t recognize regular wiki links with such characters though. To link to your page, you’ll have to create a link to the page’s full URL:

"Tips & Tricks":http://www.obsidianportal.com/campaigns/sanction/wiki_pages/tips-tricks



Question: My adventure logs are really long, and the main Adventure Log tab page is huge! How do I break up my logs, so just a short version is seen on the tab, and people can click to read more?
Answer: The Adventure Log pages have built in support for this feature. Add the following code where you want the brief version to leave off, and the link to read the rest to appear.

<!--more-->

Note that this only works in Adventure Logs, and creates an automatic link to the adventure log’s individual page, so it only appears in the entry listings under the Adventure Log tab. Also remember that spacing matters here. If there are spaces in it at all, it won’t work.



Question: How can I change the font used by text on a wiki page? What fonts are available?
Answer: You can change the font of any block of text on a wiki to any commonly available web font page by using a little bit of regular HTML with inline CSS. You can also use CSS to change font size, and other characteristics. Here’s an example of how to do it:

<div style="font-family:arial;">This text will be in Arial font.</div>
Note that if you want to change the font of a length of text in-line with other text, you can use the HTML span tag instead of the div tags in the above example.



Question: How do I create a link to a specific section of a wiki page, so it automatically scrolls down?
Answer: To do this, you will need to create an anchor, which marks the spot you want to scroll to, and then a link that tells the browser to scroll there. The link can come from another page, or scroll to a spot on the page you’re already on. For starters, you’ll need to place and anchor, which will look like this:

<a name="part1"></a>
Then you’ll need a link, which will look like this on the same page:
<a href="#part1">Part 1</a>
Or like this to link to a section of another page:
<a href="http://www.foo.com/bar.html#part1">Foo Bar, Part 1</a>



Question: How can I display HTML code on a wiki page or forum post that won’t be treated as code by the the browser, including indentation and spacing?
Answer: You can keep code from being parsed by the browser by enclosing it in HTML pre tags. Note however that this doesn’t always keep the wiki system from parsing things it thinks are code, before it serves up the page. Among other things, textile formatting may not appear as written inside pre tags. Unfortunately, there’s no better option.



Question: I’m using the tools from dungeonmastering.com to add monsters, encounters, and so on to my wiki pages, and they automatically float at the right of the page. How can get them on the left or not float at all?
Answer: To change where these elements float on the page, you can wrap them in an HTML div tag, and apply the floating behavior you want to it (left, right, or none). This is what the code will look like:

<div style="float:left;">http://tools.dungeonmastering.com/monstercards/opcode/xxxx</div>



Question: How can I put a background image behind the content of my wiki page?
Answer: You can do this by enclosing all the content of your page in HTML div tags, and using inline CSS, as demonstrated below. You can also use the inline CSS options to control the tiling and position of the image. The content area is 730 pixels wide, so you don’t want to use a tiling background, that’s the best width to make your image.

<div style="background-image:url(http://myhost.com/background.jpg);">

Your content goes here...

</div>



Question: How can I use an image I’ve uploaded to Obsidian Portal with the Pictures button as the background image as described above?
Answer: To do this, just replace the image URL in the example above with the URL where the image is stored on Obsidian Portal. To get the URL, go to the ”From Your Library” tab of the Pictures dialog, right click on the image you want, and choose ”Properties”. The image’s URL will be listed in the dialog that appears.



Question: How can I create indented paragraphs in the text of my wiki pages?
Answer: You can create paragraph indentation for a block of text by enclosing the block in an HTML div tag, and applying the text-indent CSS property, like so:

<div style="text-indent:20px;">Your text here...</div>



Question: How can I create block quotes, indented from both sides of my wiki page?
Answer: To create a nice looking quote block, you can wrap the text in an HTML div tag, and use the CSS padding property to indent the sides. The indentation values in the padding property go in order, clockwise, starting with the top. Here’s an example:

<div style="padding:0px 20px 0px 20px;">Your text here...</div>



Question: How can I make an image float to the left or right of the text on a page? How can I change image outlines, size, and so forth?
Answer: To position an image so that text lows around it one one side or the other, you can apply the CSS float property to it, in the code for the image itself. You can also use CSS to control size, and borders:

<img src="http://www.mywebpage.com/pics/pic.jpg" style="float:right;width:50px;border-style:none;">



Question: How can I format HTML tables for use on my wiki pages?
Answer: You can use the full range of inline CSS in the style attribute of your HTML tables and table cells to achieve practically any kind of formatting. It’s worth noting that by default, tables on Obsidian Portal are set to 100% width, so if you want to float a table, you’ll need to explicitly set its width. Of particular value are the CSS border properties, and the vertical-align property, as demonstrated in the example table code below:

<table style="float:right;width:350px;border-style:solid;border-width:1px;">
    <tr>
        <td style="border-style:solid;border-width:2px;">Header</td>
        <td>Header</td>
        <td>Header</td>
    </tr>
    <tr>
        <td style="vertical-align:top;">Data<br>Data<br>Data</td>
        <td style="vertical-align:top;">Data</td>
        <td style="vertical-align:top;">Data</td>
    </tr>
</table>

.h1 Headline One

Body text here...



Question: How can I change the default colors used for links (light blue for a regular link, dark blue for a wiki link, and so forth) to something easier to read?
Answer: Unfortunately, there isn’t a way to change them all as a group, but you can change the color of individual links using either textile code or HTML and CSS, as shown below:

"%{color:blue}NPCs%":http://www.obsidianportal.com/campaign/the-westerlands/npc-tracker
<a href="http://www.obsidianportal.com/" style="color:blue;">NPCs</a>



Question: How can I make text float to the right hand side of the page, along side the normal text on the left hand side of a wiki page?
Answer: This can be accomplished using the HTML div tag and a little bit of inline CSS, as shone below. Note that the text you want to float should be put before the text on the left. This is slightly counter-intuitive for many users, but there you have it.

<div style="float:right;">Level 20 Paladin</div>
Bob "Holy Roller" Johnson



Question: How can I add hidden text to my wiki pages which I can see when editing, but isn’t shown on the page?
Answer: You can do this with the built in hide CSS class to the text in question, either using HTML or Textile. Note that the text can still be read in the code for the page.

p(hide). hidden paragraph
<p class="hide">hidden paragraph</p>

Tips & Tricks

Sanction of the Athar ChainsawXIV ChainsawXIV