[How-TO]: World of Warcraft Website Design v1.3

[Inny]

The last few days more and more people either through TP or friends and colleagues were asking me on how to create their World of Warcraft website so i decided to create this brief and small guide on how to fit your SMF+TP installation to the specific game needs, but also for my obscene kind of perfection to see Tinyportal World of Warcraft websites that are not using in the "correct" or "proper" way articles so it leads to have their Web Applications opening in new window or outside of the Portal Wrapper.

Have in mind that because of the nature of the guide you need to know how to install specific Web Applications but also some minimal skills of editing SMF files.

Changelog:
1.3 Added RSS Collection
1.2 Minor Fix
1.1. Added Extra features
1.0 Initial Release of the Guide


Required:
Simple Machines Forum
Tinyportal


Tools
NotePad 
Core FTP


1) Search for a good host that causes you no headaches. Im using Hostgator for the last 26months (as of 04/2009) without any problems. In total i opened 1 technical ticket so far. Feel free to check around this Server & Hosts Board for more info.

2) Get Simple Machine Forum Engine. You can find a series of usefull documents for everything Here

3) Next step is to install TinyPortal and its not as Tiny as it seems. Installation is Here.

As of the end of this step you have a fully functional website with a forum engine. Steps below this have to do with your personal preferences in website design. There are many places that you can get a theme for your site, i will just mention 2 because i truly support the people working on them

4) Tinyportal Theme Club

5) DzinerStudio


Following next steps are the customization of your site according to your WoW needs.

6) Recruitment Block

7) Progress Block

8.) Join-Us form

9) WoW Login News

10) Ulduar Progress Block

Advanced:
By using TP you have opened some more possibilities by the usage of articles. I'm not giving installation steps for the following just some general workaround.

Required Tools:
- Minimal knowledge of editing files and following instructions
- Iframe SSI script II
- WOWHead Tooltips
- EQDKP
- Event Horizon Fight Statistics
- PhP Raider

Installation of Iframe SSI Script II:
1) Download the script on the bottom of this topic, and put it in the Default Theme directory.

2) In index.template.php of your Default theme and/or SMF default theme find:

Code: [Select]

// The ?fin11 part of this link is just here to make sure browsers don't cache it wrongly.
Add Before:

Code: [Select]

   // Iframe scrolling bars make people go emo
      echo '
<script type="text/javascript" src="', $settings['default_theme_url'], '/IframescriptII.js?fin11"></script>';
   // No more emoness

Installation of WoWHead tooltips:
in index.template.php of your Default theme and/or SMF default theme find:

Code: [Select]

// The ?fin11 part of this link is just here to make sure browsers don't cache it wrongly.

Add Before:

Code: [Select]

   // WoWhead tooltips makes good boys behave like bad boys
   echo '
   <script src="http://www.wowhead.com/widgets/power.js?fin11" type="text/javascript"></script>';
   // Im a bad boy now



Installation of these tools is recommended in your server root before attempting to create the articles.

Categories to put the specific articles in it are needed, im suggesting to create DKP, Raid Calendar and Raid Report categories.

EQDKP:
After you installed EQDKP, open your SMF admin panel, go to Articles and create an HTML article:
put the following code in it:

Code: [Select]

<iframe id="myframe" src="/your_eqdkp_folder/" marginheight="0" vspace="0" hspace="0" scrolling="no" width="100%" frameborder="0">none</iframe>

PHPRaider:
For Raid Calendar Create an HTML article again add the following code:

Code: [Select]

<iframe id="myframe" src="/your_phpraid_folder/" marginheight="0" vspace="0" hspace="0" scrolling="no" width="100%" frameborder="0">none</iframe>

Event Horizon Fight Statistics:
For this i suggest to make a directory in your server root called "Raid Reports". Each and everytime you create reports you save them by date in that directory. e.g. 300409.

Create an HTML article use this code:

Code: [Select]

<iframe id="myframe" src="/your_raidreports_folder/report_date/index.html" marginheight="0" vspace="0" hspace="0" scrolling="no" width="100%" frameborder="0">none</iframe>


Extras:
Extras is my personal preference to some of the most important block codes for your frontpage.

Article Archive Index:
Article Archive List.
I use this block code in an article, to have some kind of an index of my Raid Reports. If you followed my suggestion to create a category of the Raid Reports, the only thing you need to edit in the block code is the category.

Use the following 2 Blocks for your frontpage, preferably in a 2 Column display of blocks.

Multifunctional Article Snippet:
- Multifunctional Article Snippet. This Snippet is good to show the latest 5-10, you call it, latest Raid reports for you members.

Multifunctional Post and Topics:
- Multifunctional Post and Topics. Simple Recent Topics Snippet.


WoWhead Search box:
Code to use in an HTML & Javascript Code type of block. Preferably should be either a left or right Block.

Code: [Select]

<center><script type="text/javascript">var mt_style = 3</script>
<script src="http://www.wowhead.com/widgets/searchbox.js" type="text/javascript"></script> </center>


RSS Feed Collection
As with the upcoming versions of TP more RSS features will be included i compile here a list of RSS feeds:

• http://blue.mmo-champion.com/mmoc.rss
• http://feeds.gameriot.com/wowriot?format=xml
• http://www.worldofraids.com/wow-blue-tracker/0-all.xml
• http://blue.mmo-champion.com/feed.rss

As of today 05/2009 and TP v1.0 Beta 3 i use the RSS Feeds in php Article Pages using the code below:

Code: [Select]

// An RSS Reader to grab news from whichever site you choose
$backend = "http://feeds.gameriot.com/wowriot?format=xml"; //change this to match the rss feed url you wish to display.
// end


function endtheElement($parser, $tagName) {
// This function is used when an end-tag is encountered.
global $insideitem, $tag, $title, $description, $link;
 
  if ($tagName == "ITEM") {
    echo '<table width="100%" border="0"><tr>
      <td class="main-table">
      <span class="nav-head"><strong>
      ';
    printf("<p><b><a href="%s">%s</a></b></p>", // make our title into an actual link
    trim($link),htmlspecialchars(trim($title))); // remove html characters from the title
 
    echo "</tr>";
    echo '<tr>
      <td class="nav">';
    printf("<p>%s</p>",$description); // Print out the live journal entry
    echo"</td>";
    echo "</tr>";
    echo "</table>";
    echo "<br>";
    $title = $description = $link = $insideitem = false;
   }
}

// Now to the parsing itself. Starts by creating it:

$xml_parser = xml_parser_create();

// Then setup the handlers:

xml_set_element_handler($xml_parser, "startElement", "endElement");
xml_set_character_data_handler($xml_parser, "characterData");

// Open the actual datafile:

$fp = fopen($backend, r);

// Run through it line by line and parse:

while ($data = fread($fp, 4096)) {
  xml_parse($xml_parser, $data, feof($fp))
    or die(sprintf("XML error: %s at line %d",
           xml_error_string(xml_get_error_code($xml_parser)),
           xml_get_current_line_number($xml_parser)));
}

// Close the datafile

fclose($fp);

// Free any memmory used

xml_parser_free($xml_parser);

In the above find:

Code: [Select]

$backend = "http://feeds.gameriot.com/wowriot?format=xml"; //change this to match the rss feed url you wish to display.

and change the url to the specific RSS feed.


Important Info:
- Guide was written for TinyPortal.
- All credits go to the block code authors and web application developers.
- Block Specific Support request it in the appropriate block code topic.

To-Do List:
- Clarification of some parts of the Guide

I will try to reply to every question involving the guide and specific steps. Comments are welcomed.

[G6Cad]

 :up:

These kind of posts are valuable to a lot of people, including us in the staff, Well written, and a good collection of the code snippets.
5 of 5 Stars to you Inny 

[Inny]

Thanks G6 

Added some more features called Extras.

[Renegd98]

Nice guide

[maviel]

thank you for the guide but i cant find // End i do find ...// TinyPortal end

Is that correct?

[Inny]

thank you for the guide but i cant find // End i do find ...// TinyPortal end

Is that correct?

Had to go over some themes, to check index.template.

I fixed the code for it in the guide.

You have to find:

Code: [Select]

// The ?fin11 part of this link is just here to make sure browsers don't cache it wrongly.


[maviel]

nice thank you!  :up: :up: :up: :up: :up:

got a question for the wowhead tooltip, how do u use it is it <item> or [item] ? and is it possible to add it in the forums to were u press a button so it automatic comes up [item][/item] ?

[Inny]

You dont need to use the item tags anymore.

any of the ones below will give you a tooltip:

Code: [Select]

http://www.wowhead.com/?spell=47498
[url=http://www.wowhead.com/?spell=47498]Devastate[/url]

http://www.wowhead.com/?achievement=1860
[url=http://www.wowhead.com/?achievement=1860]Gotta Go![/url]

http://www.wowhead.com/?quest=13183
[url=http://www.wowhead.com/?quest=13183]Victory In Wintergrasp[/url]

http://www.wowhead.com/?item=43228
[url=http://www.wowhead.com/?item=43228]Stone Keeper's Shard[/url]

http://www.wowhead.com/?spell=44529
[url=http://www.wowhead.com/?spell=44529]Enchant Gloves - Major Agility[/url]


http://www.wowhead.com/?item=18582
[url=http://www.wowhead.com/?item=18582] The Twin Blades of Azzinoth[/url]

So if you wanna put items or quests or anything from WoWHead you simply copy paste the url from WoWHead. You can enhance the link by using url tag.

Not using item tags might be a downpart, but with that mod you cant add achievements, spells, quests

[maviel]

found another option to this with the thing i needed however it was a SMF configuration. I haven't tested this yet but:

http://wowhead.crackpot.us/

Will fix this as we speak supports SMF 1.*

EDIT: Works like a charm and u even get "epic" look on epic items. U can add stuff such ass:

Code: [Select]

    *  Item Syntax: [item]{item name}[/item] or [item]{item id}[/item]
          o You can also add enchant="{enchant_id}" and gems="{gem1id},{gem2id},etc."
    * Item Icon Syntax (Default Size Medium): [itemico]{item name}[/itemico] or [itemico]{item id}[/itemico]
    * Item Icon Syntax (Specific Size): [itemico size=(small|medium|large)]{item name}[/itemico] or [itemico size=(small|medium|large)]{item id}[/itemico]
    * Quest Syntax: [quest]{quest name}[/quest] or [quest]{quest id}[/quest]
    * Spell Syntax w/o Ranks: [spell]{spell name}[/spell] or [spell]{spell id}[/spell]
    * Spell Syntax w/ Ranks: [spell rank={#}]{spell name}[/spell]
    * Achievement Syntax: [achievement]{achievement name}[/achievement] or [achievement]{achievement id}[/achievement]
    * Itemset Syntax: [itemset]{itemset name}[/itemset]
    * Craftable Syntax: [craft]{craftable name}[/craft]
    * For any of these you can add the lang={en|fr|de|es|ru} option to force a language for that given object.

 

[Inny]

Added a list with RSS feeds.