Formatting Testing

Formatting Testing

This page is used to compile different special formatting that can be used on the site. Players can use this when making their own Codex contributions. Simply copy out the code for the formatting method you want. You can then modify bits of this as needed for your own content.

If you are visiting from an outside source and would like to use this content on your own campaign page you will also need to apply the appropriate CSS to your campaign otherwise your results with this will vary.

Popup Note

On this one you must change where it says Button Text (the visible link text) and also where it says HELLO! Secret Content HERE!!! (the hidden popup note).

Button TextHELLO! Secret Content HERE!!!

<a href="#" class="popupbutton">Button Text</a><span class="popupcontent">HELLO! Secret Content HERE!!!</span>


Quotes

On this one you must change where it says The quote goes here. only.

The quote goes here.
<div class="quote">The quote goes here.</div>


On this one you must change where it says The quote goes here. and Quote source goes here both.

The quote goes here.

—Quote source goes here
<div class="quote">The quote goes here.

--Quote source goes here</div>


Centered Tables with Headers

On this one you must change where it says Header, Content, and More Content or you can add additional content rows or an additional column.

Header Header
Content Content
More Content More Content
table{margin-left:auto;margin-right:auto}.
|_. Header|_. Header|
|Content|Content|
|More Content|More Content|


Styled Tables

On this one you must change where it says Title # and Row #.# and can again add in additional rows or columns by making minor modification to the code.

Title 1 Title 2
Row 1.1 Row 1.2
Row 2.1 Row 2.2
Row 3.1 Row 3.2
Row 4.1 Row 4.2


<div class="basicTable">
<table>
<tr>
<td>Title 1</td>
<td>Title 2</td>
</tr>
<tr>
<td>Row 1.1</td>
<td>Row 1.2</td>
</tr>
<tr>
<td>Row 2.1</td>
<td>Row 2.2</td>
</tr>
<tr>
<td>Row 3.1</td>
<td>Row 3.2</td>
</tr>
<tr>
<td>Row 4.1</td>
<td>Row 4.2</td>
</tr>
</table>
</div>
<br />


News Ticker

On this one you must change where it says Link (for each link, you must include 4 to use this) and Title Text # throughout and you may not add or remove from this for it to work. You can also change where it says red to one of the following options (each is shown below in order):

  • yellow
  • blue
  • red
  • green
  • magenta





<div class="news red"><span>Updates</span><ul><li><a href="Link">Title Text 1</a></li><li><a href="Link">Title Text 2</a></li><li><a href="Link">Title Text 3</a></li><li><a href="Link">Title Text 4</a></li></ul></div><br />


Pinned Notes

On this one you must change where it says Note content goes here (body of the note) and Author Signature (character or player as appropriate), and you can also change where it says blue to one of the following options (each is shown below in order):

  • yellow
  • blue
  • red
  • green
  • magenta
Note content goes here. Author Signature
Note content goes here. Author Signature
Note content goes here. Author Signature
Note content goes here. Author Signature
Note content goes here. Author Signature



<div class="quote-container">
  <i class="pin"></i>
  <blockquote class="note blue">
    Note content goes here.
    <cite class="author">Author Signature</cite>
  </blockquote>
</div>


Info Boxes

On this one you must change where it says Info text here only. You can also add warning to the class to make the warning box rather than the info box.

Info text here.

Info text here.

<p class="info">Info text here.</p>


XP Bar

On this one you must change where it says Current XP and Level XP only. You can also add warning to the class to make the warning box rather than the info box.

Current XP / Level XP


<div class="graph round"><div class="bar round" style="width:34%"><span class="xpValue">Current XP / Level XP</span></div></div>


back.png

Formatting Testing

Dragon Age: Requiem alex_redeye alex_redeye