Different ways to implement the emblems through code

The simplest way to use your guild emblem is to download the PNG from the Emblem Creator. Alternatively, you can download the font pack and apply the HTML to your webpage to render the font-based version. Using the fonts is a great way to reduce page size and create highly-scalable content.

If you have a forum or want to save time creating the HTML blocks for an emblem, you can make use of the jquery plugin to add support for parsing special bbcode-style markup.

The simplest way to add the Emblems to your site is to generate the PNG version from the Emblem Creator page to the size you require, then save the image and upload it to your website, then where you would like to display the image, add the following HTML into your web page source:

<img src="http://example.com/path/to/guild/logo.png" alt="My Guild Logo" />

Changing the generated image size

You can change the size of the generated guild logos by altering the file name in the URL. For example, if you were to generate the guild logo for Veterans of Lions Arch, the Generator would give you the following URL:


The part highlighted in bold is the desired size. You can change the size to any positive numeric value above 10. The value 1024 is the recommended maximum size, as anything bigger may not work correctly or may completely fail to render. Use at your own risk!

You can also change the file extension from png to gif or jpg - however unless you specifically have a justified reason to do so, leave the extension as PNG for the best image quality.

A note on hot-linking to the Logo Generator on gw2.properdave.com

Although you can hot-link to the generated files on this website, the practise is discouraged and may be blocked in future if hot-linking begins to consume too much bandwidth. The best practise is to download your guild icon and upload it to your website or image hosting provider to link from.

To use the Font face, download the pack from the website and extract it to a folder on your computer. Once extracted, copy the contents of the extracted folder to your website. The kit assumes a generic website layout is in use - you may need to customise some file references to apply the font to your site. Please see the README in the extract for more information.

Once you have deployed the files into your website, edit your webpages to have the following additional header line:

<link rel="stylesheet" type="text/css" href="./css/gw2emblems.css" />

For modern browsers, that's it! Your website now has Emblem support for all CSS3 capable web browsers on all devices.

To try this out, use the Emblem Creator to create your code block and paste the code block into your page where you would like the emblem to display. Save the file and upload to your webserver.

When you test your web page out, you should see your guild emblem where you placed the code.

<title>Test page</title>
<link rel="stylesheet" type="text/css" href="./css/gw2emblems.css" />
<span class="gw2" title="Veterans Of Lions Arch [LA]" style="width:256px; height:256px; font-size:256px;"><span class="gw2 stack gw2b-454828 " style="color:#001f34"></span><span class="gw2 stack gw2f-455134 " style="color:#9d8e6c"></span><span class="gw2 stack gw2f-455136 " style="color:#714910"></span></span>

So instead of using the Emblem Creator to generate you code block, you have decided to create it by hand.

To start with, you need to declare a container for the emblem with the class "gw2".

<span class="gw2"></span>

This will define some of the important CSS properties for the emblem. You should also attach a size styling otherwise your emblem will not properly render. In the gw2emblems CSS there are several default sizes prefixed with the word 'emblem' (eg: emblem32, emblem64, emblem100)

<span class="gw2 emblem100"></span>

Once your container is ready, you can then insert containers for the emblem pieces themselves and set the class for the emblem piece you desire.

<span class="gw2 emblem100">
<span class="gw2 stack gw2b-59612"></span>

The above example will load the shield background in the default page text colour. There are a number of classes used in the above example:

  • stack
    We want all the emblem pieces to stack on top of each other, not line up side by side. The 'stack' class absolutely positions each part of the emblem over the top of the previous one.
  • gw2b-59612
    The reference to which emblem glyph you wanted. As CSS doesn't work well if the class name starts with numbers, all background glyphs are prefixed with gw2b-

Adding Foreground elements is exactly the same process - however instead of 'gw2b-' you use 'gw2f-' instead. Each foreground is comprised of two glyphs to provide support for the two tones of the emblem piece.

<span class="gw2 emblem100">
<span class="gw2 stack gw2b-59612"></span>
<span class="gw2 stack gw2f-59650"></span> <!--Foreground part 1-->
<span class="gw2 stack gw2f-59652"></span> <!--Foreground part 2-->

The result isn't too exciting, as it draws in the same font as the active text of the page.

By default, the above will draw a shield with the octopus and trident logo over it, but will all draw in the same colour. In order to get some colour into your emblem, you need to use standard CSS font colouring! Add a colour directive to get some life into your emblem:

<span class="gw2 emblem100">
<span class="gw2 stack gw2b-59612" style="color:#FF0000;"></span> <!-- Shield -->
<span class="gw2 stack gw2f-59650" style="color:#00FF00;"></span> <!-- Octopus (foreground part 1) -->
<span class="gw2 stack gw2f-59652" style="color:#0000FF;"></span> <!-- Trident (foreground part 2) -->

If you test the above code in your page, it will look horrific, but you will have colour!

So you build your Guild logo, but it doesn't look right because your Guild has flipped or mirrored the background or foreground. Not to worry! You can achieve the same thing with CSS.

  • flip
    Will flip the container vertically.
  • mirror
    Flips the container horizontally.
  • invert
    Flips and mirrors the container.
<span class="gw2 emblem100">
<span class="gw2 stack gw2b-59612 flip" style="color:#FF0000;"></span>
<span class="gw2 stack gw2f-59650 mirror" style="color:#00FF00;"></span>
<span class="gw2 stack gw2f-59652 mirror" style="color:#0000FF;"></span>
<!-- be sure to apply the same orientation to both parts of the foreground! -->

The above code will flip the shield so that it is in a pointed-end-up orientation, and the octopus will now be on the right facing left.

To combine both the flip and mirror element, use the invert class.

<span class="gw2 emblem100">
<span class="gw2 stack gw2b-59612 flip" style="color:#FF0000;"></span>
<span class="gw2 stack gw2f-59650 invert" style="color:#00FF00;"></span>
<span class="gw2 stack gw2f-59652 invert" style="color:#0000FF;"></span>

The above sample effectively rotates the original a complete 360 degrees.

The plugin for JQuery allows you to save writing code blocks and use AJAX parsing to create emblems from doing bbcode-style tags. The jquery plugin runs on page load and scans the page for [guild] tags, then for each guild tag a call to this website is made to return the code block.

The plugin has been tested with JQuery 1.9.1+, but should also work from JQuery 1.4.2 and later.

Although the plugin by default targets this website, you can overload the AJAX URL through the settings if you wish to set up your own JSON source for the queries.

To use the JQuery plugin, follow the same process as for the Using the font face above, but you should also copy the "jquery-gw2emblems.js" file to your site javascript folder. Once copied over, add the following code to your web page:

<script type="text/javascript" src="./js/jquery-gw2emblems.js"></script>

It is recommended you place this code at the footer of your page to ensure the page is fully loaded before the script executes.

The above code sample will scan the entire "<body>" tag to find [guild] tags. If you know your guild tag mark-up will only be in a specific tag or set of tags, you can set the appropriate JQuery selector where body is defined.

The plugin supports both generic [guild]<name>[/guild] and also with size parameter: [guild size=<pixel size>]<name>[/guild]. The default size of an emblem when size is not specified is 100 pixels.

Because the plugin will perform AJAX calls to this website, there is a default limit of 10 calls made. Any more guild tags present on the page will be ignored once the cap is reached. You may alter the limit by specifying the parameters when writing the JQuery call.

You can change the default parameters of the plugin by adding a json object to the function call, as illustrated in this code sample:

<script>$("body").gw2emblems({limit:20, size:64});</script>

The parameters available are:

  • limit
    Defaults to 10. Allows you to change the number of guild tags that will be transformed into logos (For best page performance you should keep this number low).
  • size
    Sets the default size of the emblems, when no size parameter is specified (using [guild size=n]). This is by default 100 pixels.
  • bbtag
    If [guild] is going to be a problem in your markup, you can change the tag name. For example: bbtag:"clan" as a parameter will change the plugin to look for [clan] tags.
  • jsonhost
    This is the URL that will be returning the JSON responses to the plugin's queries. You should not change this unless you plan on hosting your own JSON responses!
<title>Test page</title>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" /></script>
<link rel="stylesheet" type="text/css" href="./css/gw2emblems.css" />
<p>My favourite guilds:<p>
<li>[clan size=256]Experience Express[/clan]</li>
<li>[clan size=100]Veterans of Lions Arch[/clan]</li>
<li>[clan size=64]Third Legio[/clan]</li>
<script type="text/javascript" src="./js/jquery-gw2emblems.js"></script>
<script>$("body").gw2emblems({limit:3, bbtag:"clan", size:32});</script>