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:
- Copy the code from the text box below
- 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:
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="https://www.thechicagonetwork.org/wp-content/uploads/2019/06/BadgeLogo-03.svg" alt="The star-burst shaped logo for The Chicago Network's Equity Principles Campaign"></div><div id="equityCopy"><div id="equityPrinciplesHeader"><p><a href="https://www.thechicagonetwork.org?utm_source=equity_principles_badge&utm_medium=banner&utm_campaign=equity_principles" target="_blank" class="equityPrinciplesLink" id="equityHeaderLine1" rel="noopener noreferrer">THE CHICAGO NETWORK</a> <a href="https://www.thechicagonetwork.org/equity-principles?utm_source=equity_principles_badge&utm_medium=banner&utm_campaign=equity_principles" target="_blank" id="equityHeaderLine2" class="equityPrinciplesLink" rel="noopener noreferrer">EQUITY PLEDGE PARTNER</a></p></div><div id="equityPrinciplesCopy"><p>Supporting <a href="https://www.thechicagonetwork.org/equity-principles?utm_source=equity_principles_badge&utm_medium=banner&utm_campaign=equity_principles" target="_blank" class="equityPrinciplesLink" rel="noopener noreferrer">gender equity</a> at all levels with <a href="https://www.thechicagonetwork.org?utm_source=equity_principles_badge&utm_medium=banner&utm_campaign=equity_principles" 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.
Access the Widget Area
Using the left sidebar in the WordPress back-end, access the widget area as shown.
Manage with Live Preview
Click on the “Manage with Live Preview” button at the top of the widget page.
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.
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!
If you have any problems, please call Nathan Upchurch at 312-787-7936).