Installing the Equity Principles Badge

While adding the Equity Principles Badge on your website is fairly straight-forward, it is best to have someone in your organization with HTML and CSS knowledge perform the installation.

To install the Equity Principles Badge on your site:

  1. Copy the code from the text box below
  2. Paste it into the HTML of your website

You may find that the badge will work better in the header or footer of your website, instead of a page, or a post.

The badge should look like this:
The Chicago Network Equity Principles Badge, with a watermark saying: Example.

Badge code:

<style>#equityBadgeContainer{display:flex;flex-direction:row;border-style:solid;border-width:1px;border-color:rgba(180, 175, 169, 1);min-width:230px;min-height:85px;max-width:230px;max-height:85px;background-color:white;font-family:sans-serif;align-items:center;padding:5px 5px 5px 5px;line-height: 1.2}#equityCopy #equityPrinciplesCopy .equityPrinciplesLink{text-decoration:none !important;color:rgba(88, 89, 91, 1)}#equityCopy #equityPrinciplesCopy p{font-size:8px}#equityCopy #equityPrinciplesHeader #equityHeaderLine1{font-size:9px;font-weight:bold;color:rgba(88, 89, 91, 1);text-decoration:none}#equityCopy #equityPrinciplesHeader #equityHeaderLine2{font-size:9px;font-weight:bold;color:rgba(72,167,167,1);text-decoration:none}#equityCopy{font-size:9px;margin-left:10px;margin-right:10px}#equityPrinciplesCopy p{display:inline;color:rgba(88, 89, 91, 1)}#equityLogo img{min-width:70px;max-width:70px}</style><div id="equityBadgeContainer"><div id="equityLogo"> <img src="" alt="The star-burst shaped logo for The Chicago Network's Equity Principles Campaign"></div><div id="equityCopy"><div id="equityPrinciplesHeader"><p><a href="" target="_blank" class="equityPrinciplesLink" id="equityHeaderLine1" rel="noopener noreferrer">THE CHICAGO NETWORK</a> <a href="" target="_blank" id="equityHeaderLine2" class="equityPrinciplesLink" rel="noopener noreferrer">EQUITY PLEDGE PARTNER</a></p></div><div id="equityPrinciplesCopy"><p>Supporting <a href="" target="_blank" class="equityPrinciplesLink" rel="noopener noreferrer">gender equity</a> at all levels with <a href="" target="_blank" class="equityPrinciplesLink" rel="noopener noreferrer">The Chicago Network</a></p></div></div></div>

Example WordPress Installation:

As an example, here’s how we could install the Equity Principles Badge on our website, built on WordPress:

Copy The Code

First, copy the code in its entirety. It’s important not to miss any, or modify the code.

An animated GIF showing the Equity Principles Badge code being copied from a notepad document

Access the Widget Area

Using the left sidebar in the WordPress back-end, access the widget area as shown.

An animated GIF showing a user entering the widget area on WordPress using the menu on the left side-bar in the WordPress backend

Manage with Live Preview

Click on the “Manage with Live Preview” button at the top of the widget page.

 An animated GIF showing a user clicking on the

Add HTML Widget

Using the left side-bar, access the section that you wish to add the badge to, and add a new HTML widget as shown.

An animated GIF showing a user adding an HTML widget in the

Paste & Publish

Enter a title if you wish, and simply paste the code, complete and unmodified, into the widget. Just publish and you’re done!

 An animated GIF showing a user pasting the Equity Principles Badge code into the HTML widget

If you have any problems, please call Nathan Upchurch at 312-787-7936).

Weekly News and Insights: The Chicago Network Newsletter

Sign Up


The Chicago Network

The Chicago Network