Theme

Wiki Pages: Home | Setup | Options | Theme | Change

Rendered HTML with CSS (default template)

Overall

<div class="guildnews wow-guild-news">
  ...
</div>

CSS - "wow-guild-news" class is always added to the wrapper

/* overall wrapper */
.wow-guild-news {
  font-family: Arial,Verdana,Segoe,sans-serif;
  font-size: 12px;
  line-height: 1.3em;
}

Guild

<h3 class="wow-guild-name">
  <a href="http://us.battle.net/wow/en/guild/{server}/{guild}/">Guild's Name</a>
</h3>

CSS

/* guild name */
h3.wow-guild-name {
  font-size: 16px;
  font-weight: bold;
  text-align:center;
  margin: 5px;
}
h3.wow-guild-name a {
  text-decoration: none;
}

Guild Info

<!-- default guildinfo template
  "guildinfo" : "(Level {level} {faction} Guild, {server})"
-->
<h4 class="wow-guild-info">
  (Level 
  <span class="wow-guild-level">{level}</span>
  <span class="wow-guild-faction">{faction}</span> Guild,
  <span class="wow-guild-realm">{server}</span>
  )
</h4>

CSS

/* guild info */
h4.wow-guild-info {
  text-align: center;
  font-size: 12px;
  margin: 5px;
  padding-bottom: 3px;
  border-bottom: #555 1px solid;
}
.wow-guild-level { }   /* "Level ##" */
.wow-guild-faction { } /* "Alliance" or "Horde" */
.wow-guild-realm { }   /* realm name */

News Items

Shared CSS

/* news items */
.wow-news-item { } /* wraps each news item */

/* item/achievement icon */
.wow-icon { display: inline-block; } /* icon wrapper */
.wow-icon-small { width: 18px; height: 18px; }
.wow-icon-large { width: 56px; height: 56px; }
.wow-icon img { border: 0; vertical-align: middle; }

/* time (recently/minutes ago/hours ago/yesterday... */
.wow-action-time { color: #aaa; font-size: 0.9em; }

Items

<!--
  showing each type of news item, using this template:
  "item" : "{icon} {player} {action} {item}. {time}"
-->

<!-- action = obtained -->
<div class="wow-news-item">
  <span class="wow-icon wow-icon-small wow-icon-87261">
    <img class="wow-icon-small" src="http://media.blizzard.com/wow/icons/18/inv_letter_17.jpg" alt="Mysterious Note">
  </span>
  <a class="wow-character-name" href="http://us.battle.net/wow/en/character/{server}/{player}/">{player}</a>
  <span class="wow-action-type wow-action-obtained">obtained</span> 
  <a class="wow-item wow-item-87261 q5" href="http://www.wowhead.com/item=87261">Mysterious Note</a>.
  <span class="wow-action-time">5 hours ago</span>.
</div>

<!-- action = purchased -->
<div class="wow-news-item">
  <span class="wow-icon wow-icon-small wow-icon-89065">
    <img class="wow-icon-small" src="http://media.blizzard.com/wow/icons/18/inv_jewelry_necklace_98.jpg" alt="Choker of the Klaxxi'va">
  </span>
  <a class="wow-character-name" href="http://us.battle.net/wow/en/character/{server}/{player}/">{player}</a>
  <span class="wow-action-type wow-action-purchased">purchased</span>
  <a class="wow-item wow-item-89065 q4" href="http://www.wowhead.com/item=89065">Choker of the Klaxxi'va</a>.
  <span class="wow-action-time">Yesterday</span>.
</div>

<!-- action = crafted -->
<div class="wow-news-item">
  <span class="wow-icon wow-icon-small wow-icon-85823">
    <img class="wow-icon-small" src="http://media.blizzard.com/wow/icons/18/inv_chest_leather_raiddruid_i_01.jpg" alt="Greyshadow Chestguard">
  </span>
  <a class="wow-character-name" href="http://us.battle.net/wow/en/character/{server}/{player}/">{player}</a>
  <span class="wow-action-type wow-action-crafted">crafted</span>
  <a class="wow-item wow-item-85823 q4" href="http://www.wowhead.com/item=85823">Greyshadow Chestguard</a>.
  <span class="wow-action-time">23 hours ago</span>.
</div>

Specific CSS

• wow-action-##### - used by the script to target links for adding item name & item quality
• q4 - Item quality coloring (q0-q10) added by wowhead script.

/* character name - not colored by class name */
a.wow-character-name { }

.wow-action-type { color: #ddd; }
.wow-action-obtained { }
.wow-action-crafted { }
.wow-action-purchased { }

/* wowhead tooltip links */
a.wow-item { }

Achievements

<!--
  showing each type of achievement news item, using this template:
  "achv" : "{icon} {player} earned the achievement {ach} for {points} points. {time}",
-->

<!-- achievement by a player -->
<div class="wow-news-item">
  <span class="wow-icon wow-icon-small">
    <img class="wow-icon-small" src="http://media.blizzard.com/wow/icons/18/achievement_level_90.jpg">
  </span>
  <a class="wow-character-name" href="http://us.battle.net/wow/en/character/{server}/{player}/">{player}</a>
  earned the achievement
  <a class="wow-character-achievement" href="http://www.wowhead.com/achievement=undefined">Level 90</a>
  for <span class="wow-points">10</span> points.
  <span class="wow-action-time">9 hours ago</span>.
</div>

<!-- achievement by guild -->
<!-- {player} replaced by "text -> guild" option -->
<div class="wow-news-item">
  <span class="wow-icon wow-icon-small">
    <img class="wow-icon-small" src="http://media.blizzard.com/wow/icons/18/trade_archaeology_highborne_scroll.jpg">
  </span>
  The guild earned the achievement
  <a class="wow-guild-achievement" href="http://www.wowhead.com/achievement=6644">Pandaren Embassy</a>
  for <span class="wow-points">10</span> points.
  <span class="wow-action-time">4 days ago</span>.
</div>

Specific CSS

.wow-action-earned { } /* earned the achievement */

/* wowhead tooltip links */
a.wow-character-achievement { } /* character achievement name */
a.wow-guild-achievement { } /* guild achievement name */

/* achievement points number */
.wow-points { color: #c55; }