How to Implement WLIA Badges on your Website

How to Implement WLIA Badges on your Website

Thanks for your interest in including a WLIA “badge” on your website! Inserting one of our badges is easy, even if you have limited HTML skills.  If you have any problems, please email the WLIA Webteam.

As a starting place, simply copy one of the blocks of code into the desired place on your HTML page.

WLIA Membership Badge:

<div class="wliamember">
<a href="http://wlia.org" >
<img src="https://www.wlia.org/wp-content/uploads/2014/06/WLIA_Member_badge.png" width="140" alt="WLIA Member Badge" />
</a>
</div>

WLIA Sponsor Badge:

<div class="wliasponsor">
<a href="http://wlia.org" >
<img src="https://www.wlia.org/wp-content/uploads/2014/06/WLIA_Sponsor_badge.png" width="140" alt="WLIA Sponsor Badge" />
</a>
</div>

More Advanced Options:

In some cases, you may wish to use Cascading Style Sheets (CSS) to have more control over the placement of the badge on your page.  For example, the following CSS code block pushes the membership badge to the far right side of the page, and also places a 20-pixel wide invisible border around the graphic.  Consult your Webmaster for more information on how to edit your site’s CSS file(s).

.wliamember {
float: right;
margin: 20px;
}

You can also adjust the size of the image to better fit your page. The full resolution of the graphics is 320 x 264, but we’ve found a size of 140 x 123 seems to work well for most sites. To change the width, simply update the width value in the “img” tag (up to a max of 320). The browser will automatically scale the graphic proportionately in the Y direction.

<img src="https://www.wlia.org/wp-content/uploads/2014/06/WLIA_Member_badge.png" width="300" alt="WLIA Member Badge" />

If you have advanced Web editing skills and simply want a copy of the full-size member or sponsor graphics, see below. (right-click, save image as…):

WLIA Member BadgeWLIA Sponsor Badge