Jump to section:

• List of Fundraising Blocks
• Constructing Fundraising Blocks
• Examples
• Mailchimp

List of Fundraising Blocks

There are three "Fundraising Campaign" blocks that can be placed in different places across the site.

Fundraising Campaign Block (Above Header Region)

Configure: https://www.allsides.com/admin/structure/block/manage/block/124/configure This can be placed on any page and it appears above the header.

Note: If you add this to a page, be sure to temporarily hide the above-header banner on the front page and the above-header ad on other pages. Having both simultaneously is overwhelming.

Fundraising Campaign Block (Highlighted Region)

Configure: https://www.allsides.com/admin/structure/block/manage/block/74/configure

This appears above the page title and can be placed on the following pages:

about
dictionary
topics-issues
media-bias/*
story/*
news/*
news-source/*
topics/*

Fundraising Campaign Block (Content Region)

Configure: https://www.allsides.com/admin/structure/block/manage/block/139/configure

This appears below the page title and can be placed on the following pages:

unbiased-balanced-news
dictionary/*
topics/*

Sustaining Members

Each of these blocks is hidden from Sustaining Members. If you change that setting during a campaign (under "Roles"), please change it back afterwards.

Constructing Fundraising Blocks

For the new fundraising blocks, the border, background, foreground, and button colors, as well as sizes, are controlled by a series of CSS classes. For instance, if you want a section of a fundraising block to have a red background, a blue border, be 60% wide, and have default padding, you would use:

Default formatting

The fundraising-block-flex class is used to add default formatting and set flex properties for fundraising blocks. It declares that the div it is placed on is a flex block and sets the font size to 16px and the line height to 1.2.

Colors and Borders

List of Background Color Classes

List of Gradient Background Classes

All gradient colors are described from left to right.

With the gradients below, you might need to add thetext-white or text-grey classes to the containing div in order to achieve the proper text contrast.

List of Border Classes

Buttons

See the list of buttons on the design page for the variety of possible button color classes.

When adding buttons, make sure to place them inside of a donate-button-container div in order to apply additional flex styling to them. In addition to the color classes for each button, use the donate-button class on smaller buttons which include dollar amounts and use the fundraising-member-button class on larger buttons.

Examples:

<div class="donate-button-container">

    <a class="btn btn-white donate-button" href="/user/register#register">$5</a>

    <a class="btn btn-white donate-button" href="/user/register#register">$10</a>

    <a class="btn btn-white donate-button" href="/user/register#register">$20</a>

    <a class="btn btn-white donate-button" href="/user/register#register">Other</a>

</div>

<div class="donate-button-container">

    <a class="btn btn-right-red fundraising-member-button" href="/user/register#register">Become a Member</a>

    <a class="btn btn-right-red fundraising-member-button" href="/support">Make a Donation</a>

</div>

Widths and Paddings

List of Width Classes

• 100%: block-width-100 (also includes max-width: 1200px)
• 85%: block-width-85
• 80%: block-width-80
• 75%: block-width-75
• 70%: block-width-70
• 65%: block-width-65
• 60%: block-width-60
• 55%: block-width-55
• 50%: block-width-50
• 45%: block-width-45
• 40%: block-width-40
• 35%: block-width-35
• 30%: block-width-30
• 25%: block-width-25
• 20%: block-width-20
• 15%: block-width-15

Padding Options

Padding is described top and bottom first, then left and right. For example, top and bottom padding of 24px and side padding of 16px would be described as 24px by 16px.

Adaption for Mobile and Desktop

Use the desktop-only and mobile-only classes to control when various text is shown. The fundraising banners will often collapse down to one of two 'halves' on mobile (screens smaller than 768px wide), so you will want to include desktop-only in the classes for that half. Anything you want to include on a half only when the user is on mobile (for example: a tagline that is normally on the side that is hidden on mobile) should have the mobile-only class.

This paragraph should only be visible on larger screens (desktop). Resize your screen to see a different paragraph!

This paragraph should only be visible on small screens (mobile). Resize your screen to see a different paragraph!

Putting it all together

If you put that all together, you can create some striking banners!

Example Fundraising Blocks

<div class="fundraising-block-flex">

    <button type="button" class="close close-fundraising-block" data-dismiss="alert">×</button>

    <div class="background-right-red block-width-60 padding-default desktop-only">

        <p class="large">There’s more money in driving <strong>division</strong> than in <strong>balanced news</strong>.</p>

        <p class="large"><strong>AllSides needs your support.</strong></p>

        <p>Help AllSides to provide a more complete and balanced view that can help us come together and actually solve problems.</p>

    </div>

    <div class="background-left-blue block-width-40 padding-default">

        <p class="mobile-only">AllSides needs <strong>your support</strong>.</p>

        <p class="large">Become a <strong>Sustaining Member today</strong>.</p>

        <div class="donate-button-container">

            <a class="btn btn-white donate-button payment-value" href="/user/register#register">$5</a>

            <a class="btn btn-white donate-button payment-value" href="/user/register#register">$10</a>

            <a class="btn btn-white donate-button payment-value" href="/user/register#register">$20</a>

            <a class="btn btn-white donate-button payment-value" href="/user/register#register">Other</a>

        </div>

        <p class="desktop-only text-center"><small>Or make a <a href="/donate">one-time donation</a> without committing to a membership.</small></p>

    </div>

</div>

<div class="fundraising-block-flex">

    <button type="button" class="close close-fundraising-block" data-dismiss="alert">×</button>

    <div class="padding-default background-right-red block-width-60">

        <p class="large"><strong>Freedom Requires Information</strong></p>

        <p class="desktop-only">This Independence Day, we're reminded that freedom depends on balanced information, many perspectives, and the competition of ideas — not propaganda or manipulation. And we need your help.</p>

        <p class="desktop-only">Become a Sustaining Member to read AllSides ad-free, or consider a one-time donation today.</p>

        <p class="mobile-only"><strong>Become a sustaining member</strong> with a monthly contribution to support media bias ratings and research.</p>

        <div class="donate-button-container mobile-only">

            <a class="donate-button btn btn-left-blue fundraising-member-button" href="/user/register#register">Become a Member</a>

            <a class="donate-button desktop-only btn btn-left-blue fundraising-member-button" href="/user/register#register">Make a Donation</a>

        </div>

    </div>

    <div class="padding-default border-right-red block-width-40 desktop-only">

        <p><strong>Become a sustaining member</strong> with a monthly contribution to support media bias ratings and research.</p>

        <div class="donate-button-container">

            <a class="donate-button btn btn-left-blue fundraising-member-button" href="/user/register#register">Become a Member</a>

            <a class="donate-button desktop-only btn btn-left-blue fundraising-member-button" href="/user/register#register">Make a Donation</a>

        </div>

    </div>

</div>

×

Support AllSides

We make bias transparent so people can avoid being manipulated and decide for themselves. These ratings inform our balanced newsfeed and media bias chart.

Become a sustaining member with a monthly contribution to support media bias ratings and research.

Become a Member Make a Donation

<div class="fundraising-block-flex">

    <button type="button" class="close close-fundraising-block" data-dismiss="alert">×</button>

    <div class="block-width-50 desktop-only">

        <img src="/sites/default/files/Person-Using-AllSides.jpg" />

    </div>

    <div class="padding-default background-left-blue block-width-50">

        <p class="large">Support AllSides</p>

        <p class="desktop-only">We make bias transparent so people can avoid being manipulated and decide for themselves. These ratings inform our balanced newsfeed and media bias chart.</p>

        <p><strong>Become a sustaining member</strong> with a monthly contribution to support media bias ratings and research.</p>

        <div class="donate-button-container">

            <a class="donate-button btn btn-right-red fundraising-member-button" href="/user/register#register">Become a Member</a>

            <a class="donate-button desktop-only btn btn-right-red fundraising-member-button" href="/user/register#register">Make a Donation</a>

        </div>

    </div>

</div>

<div class="fundraising-block-flex background-gradient-white-to-red">

    <div class="fundraising-block-flex block-width-100">

        <div class="padding-default block-width-60 desktop-only">

            <p class="large">There’s more money in driving <strong>division</strong> than in <strong>balanced news</strong>.</p>

            <p class="large"><strong>AllSides needs your support.</strong></p>

            <p>Help AllSides to provide a more complete and balanced view that can help us come together and actually solve problems.</p>

        </div>

        <div class="padding-default block-width-40 text-white">

            <p class="mobile-only">AllSides needs <strong>your support</strong>.</p>

            <p class="large">Become a <strong>Sustaining Member today</strong>.</p>

            <div class="donate-button-container">

                <a class="btn btn-white donate-button payment-value" href="/user/register#register">$5</a>

                <a class="btn btn-white donate-button payment-value" href="/user/register#register">$10</a>

                <a class="btn btn-white donate-button payment-value" href="/user/register#register">$20</a>

                <a class="btn btn-white donate-button payment-value" href="/user/register#register">Other</a>

            </div>

            <p class="desktop-only text-center"><small>Or make a <a href="/donate">one-time donation</a> without committing to a membership.</small></p>

        </div>

    </div>

</div>

<div class="fundraising-block-flex">

    <button type="button" class="close close-fundraising-block" data-dismiss="alert">×</button>

    <div class="padding-default-small block-width-50 desktop-only background-right-red">

        <p class="extra-large">AllSides needs <strong>your support.</strong></p>

    </div>

    <div class="padding-default-small desktop-only background-left-blue block-width-30">

        <p>Become a <strong>Sustaining Member today.</strong></p>

    </div>

    <div class="padding-default-minimal background-left-blue block-width-20">

        <p class="large mobile-only">AllSides needs <strong>your support.</strong></p>

        <div class="donate-button-container">

            <a class="donate-button btn btn-right-red fundraising-member-button" href="/user/register#register">Become a Member</a>

        </div>

    </div>

</div>

Mailchimp

Copy + paste the code snippets below to use these fundraising blocks in Mailchimp campaigns. These are intended for use in email campaigns, not the website.

Mailchimp CTA 1:

Copy & paste:

<style> 
   @media only screen and (max-width: 600px) {
      #mailchimp-cta-1 {
         display: flex;
         flex-direction: column;
         text-align: center;
      }
   }
</style>

<div id="mailchimp-cta-1" style="margin-top:25px; font-family: helvetica neue, sans-serif; background-color:#2E65A1; padding:20px 25px 25px;color:#ffffff;" >
    <h1 style="color:#fff;">Support Media Bias Ratings</h1>
     <p>AllSides conducts regular media bias research. Our ratings make bias transparent and inform our balanced newsfeed.</p>
     <p>Become a <b> Sustaining Member</b> today, or make a <b> one-time donation.</b></p>
<a href="/about/memberships" target="_blank" style="font-family: helvetica neue, sans-serif; background-color:#CB2127; border: none; color: white; padding: 16px 32px; text-align: center; text-decoration: none; display: inline-block; font-size: 16px; margin: 4px 2px;box-sizing:border-box;">Become a Member</a>
<a href="/support" target="_blank" style="font-family: helvetica neue, sans-serif; background-color:#CB2127; border: none; color: white; padding: 16px 32px; text-align: center; text-decoration: none; display: inline-block; font-size: 16px; margin: 4px 2px;box-sizing:border-box;">Make a Donation</a>
</div>

Mailchimp CTA 2:

Copy & paste:

<style> 
   @media only screen and (max-width: 600px) {
      #mailchimp-cta-2 { text-align: center; }
   }
</style>

<div id="mailchimp-cta-2" style="margin-top:25px; font-family: helvetica neue, sans-serif; background-color:#2E65A1; padding:20px 25px 25px;color:#ffffff;">
    <h1 style="color:#fff;">Support Media Bias Ratings</h1>
     <p>AllSides conducts regular media bias research. Our ratings make bias transparent and inform our balanced newsfeed.</p>
     <p><a style="color:#ffffff;" href="/support" target="_blank"><b>Become a Sustaining Member today →</b></a></p>
</div>