Page Template

In order to understand how to format pages in OP, you need to understand how Tags work in HTML. Specifically you need to know about attributes and closing tags. Obsidian Portal takes care of the Element tags for us (such as HEADER, BODY, & HTML) so we don’t have to worry about having those on the pages.

Each page is broken up into sections:

  1. Header – Made up of the album image and a link to listen to samples and purchase, when available
  2. Critique – One of these sections for each reviewer, copied one after the other

Each section is enclosed by a DIV tag in HTML. It is modified using the STYLE Attribute using quite a few details. Those details break down the look for that section, including overall width, centering, alignment of text, and the border lines between sections.

To piece together a new page:

  1. copy clip each section needed in grey below and paste them, one after the other, into a blank page window.
    1. feel free to leave out other author critque sections. Each person can just add their block to the end of the page as reviews are made.
  2. Replace “ADDRESS_LINK_TO_IMAGE” with the appropriate web link starting with www.
  3. Replace “ADDRESS_LINK_TO_PURCHASE_WEBSITE” with the appropriate web link starting with www.
  4. Use the Character selection link at the top right of the editing box to insert a link where INSERT_CHARACTER_LINK_HERE is.
  5. Decide what rating you want to give the album in question and remove the rest of the rating image links between exclamation marks.
    1. Note that each path for the images are slightly different. This is what the media uploads built into OP do to store the graphics.
  6. Replace the text “Content of review goes here.” with your review as appropriate.
    You’re done!

check out the example “finished” code for a page at the bottom of this page

Header

<div style="width:720px;margin-left:auto;margin-right:auto;text-align:center;">
!(media-item-align-center)http://ADDRESS_LINK_TO_IMAGE(Name of image for hover text)!
"_Listen to Samples & Purchase_":http://ADDRESS_LINK_TO_PURCHASE_WEBSITE
Artist: INSERT_CHARACTER_LINK_HERE
</div>

Critique (DarkMagus)

<div style="width:650px;margin-left:auto;margin-right:auto;text-align:justify;border-top:solid;">
<table>
<tr style="background-color:#CCCCCC;">
<td width="50">!http://cdn.obsidianportal.com/assets/32075/OPDarkMagusSays.jpg(Op dark magus says)!</td>
<td width="510">*DarkMagus says:*</td>
<td width="90">
!http://cdn.obsidianportal.com/assets/32096/norating.png(Norating)!
</td>
</tr>
</table>
Content of review goes here.
</div>

Critique (Dethstryke)

<div style="width:650px;margin-left:auto;margin-right:auto;text-align:justify;border-top:solid;">
<table>
<tr style="background-color:#CCCCCC;">
<td width="50">!http://cdn.obsidianportal.com/assets/32077/OPDethstrykeSays.png(Op dethstryke says)!</td>
<td width="510">*Dethstryke says:*</td>
<td width="90">
!http://cdn.obsidianportal.com/assets/32096/norating.png(Norating)!
!http://cdn.obsidianportal.com/assets/32095/5rating.png(5rating)!
!http://cdn.obsidianportal.com/assets/32094/4rating.png(4rating)!
!http://cdn.obsidianportal.com/assets/32093/3rating.png(3rating)!
!http://cdn.obsidianportal.com/assets/32092/2rating.png(2rating)!
!http://cdn.obsidianportal.com/assets/32091/1rating.png(1rating)!
!http://cdn.obsidianportal.com/assets/32090/0rating.png(0rating)!
</td>
</tr>
</table>
Content of review goes here.
</div>

Critique (Gaaran)

<div style="width:650px;margin-left:auto;margin-right:auto;text-align:justify;border-top:solid;">
<table>
<tr style="background-color:#CCCCCC;">
<td width="50">!http://cdn.obsidianportal.com/assets/32078/OPGaaranSays.jpg(Op gaaran says)!</td>
<td width="510">*Gaaran says:*</td>
<td width="90">
!http://cdn.obsidianportal.com/assets/32096/norating.png(Norating)!
!http://cdn.obsidianportal.com/assets/32095/5rating.png(5rating)!
!http://cdn.obsidianportal.com/assets/32094/4rating.png(4rating)!
!http://cdn.obsidianportal.com/assets/32093/3rating.png(3rating)!
!http://cdn.obsidianportal.com/assets/32092/2rating.png(2rating)!
!http://cdn.obsidianportal.com/assets/32091/1rating.png(1rating)!
!http://cdn.obsidianportal.com/assets/32090/0rating.png(0rating)!
</td>
</tr>
</table>
Content of review goes here.
</div>

Critique (Mudwyrm)

<div style="width:650px;margin-left:auto;margin-right:auto;text-align:justify;border-top:solid;">
<table>
<tr style="background-color:#CCCCCC;">
<td width="50">!http://cdn.obsidianportal.com/assets/55324/OPMudwyrmSays.png(Op mudwyrm says)!</td>
<td width="510">*Mudwyrm says:*</td>
<td width="90">
!http://cdn.obsidianportal.com/assets/32096/norating.png(Norating)!
!http://cdn.obsidianportal.com/assets/32095/5rating.png(5rating)!
!http://cdn.obsidianportal.com/assets/32094/4rating.png(4rating)!
!http://cdn.obsidianportal.com/assets/32093/3rating.png(3rating)!
!http://cdn.obsidianportal.com/assets/32092/2rating.png(2rating)!
!http://cdn.obsidianportal.com/assets/32091/1rating.png(1rating)!
!http://cdn.obsidianportal.com/assets/32090/0rating.png(0rating)!
</td>
</tr>
</table>
Content of review goes here.
</div>

Example Page

<div style="width:720px;margin-left:auto;margin-right:auto;text-align:center;">
!(media-item-align-center)http://cdn.obsidianportal.com/assets/32076/MediaevalBaebesRose.jpg(Mediaeval Baebes: The Rose)!
"_Listen to Samples & Purchase_":http://www.amazon.com/The-Rose/dp/B00494E1OY/ref=tmm_other_title_0?ie=UTF8&qid=1293144550&sr=1-5
Artist: <a href="/campaigns/gaming-music/characters/james-horner" class="wiki-content-link">James Horner</a> 
</div>


<div style="width:650px;margin-left:auto;margin-right:auto;text-align:justify;border-top:solid;">
<table>
<tr style="background-color:#CCCCCC;">
<td width="50">!http://cdn.obsidianportal.com/assets/32075/OPDarkMagusSays.jpg(Op dark magus says)!</td>
<td width="510">*DarkMagus says:*</td>
<td width="90">
!http://cdn.obsidianportal.com/assets/32096/norating.png(Norating)!
</td>
</tr>
</table>
This was a good album for travel scenes, and general adventuring. Great for long ship rides, etc.
</div>

<div style="width:650px;margin-left:auto;margin-right:auto;text-align:justify;border-top:solid;">
<table>
<tr style="background-color:#CCCCCC;">
<td width="50">!http://cdn.obsidianportal.com/assets/32077/OPDethstrykeSays.png(Op dethstryke says)!</td>
<td width="510">*Dethstryke says:*</td>
<td width="90">
!http://cdn.obsidianportal.com/assets/32095/5rating.png(5rating)!
</td>
</tr>
</table>
I loved this album and think it's great for any Fantasy campaign. 

Every track is strong, and the ambiance of the softer pieces is perfect for most general adventuring. 

Blah blah blah, I'm opinionated.
</div>

<div style="width:650px;margin-left:auto;margin-right:auto;text-align:justify;border-top:solid;">
<table>
<tr style="background-color:#CCCCCC;">
<td width="50">!http://cdn.obsidianportal.com/assets/32078/OPGaaranSays.jpg(Op gaaran says)!</td>
<td width="510">*Gaaran says:*</td>
<td width="90">
!http://cdn.obsidianportal.com/assets/32093/3rating.png(3rating)!
</td>
</tr>
</table>
Not much to say. It's pretty good.
</div>

Check this example out in action here!

Page Template

Gaming Music DarkMagus