Home

💫 5 Ways to Highlight Sponsored Events 💫

Sponsoring gives events unique styling throughout the calendar and a prominent spot on your homepage in Trending events list. Below are some ideas and inspiration to really make these events pop!

Note: The event cards shown below are from our Emphasis theme. If your platform is using our Legacy theme, you can certainly still apply these styles to your Sponsored events as well. Want access to Emphasis? Learn more about upgrading here!

Underneath each example, you’ll find the appropriate CSS to apply these styles your platform. Here’s how: Admin Dash > Settings > Platform Settings > Edit Settings > Custom CSS.

1. Drop Shadow

1. .em-card.sponsored{
box-shadow: 0 10px 20px 5px #HEXCODE;
}

2. .em-card.sponsored{
box-shadow: 10px 10px #HEXCODE;
}

2. Border

1. .em-card.sponsored{
border: 2px solid #HEXCODE;
}

2. .em-card.sponsored{
border-top: 5px solid #HEXCODE;
}

3. Title Highlight

1. .em-card.sponsored h3.em-card_title{
text-shadow: 1px 1px 10px #HEXCODE;
}

2. .em-card.sponsored h3.em-card_title{
border-bottom: 2px solid;
border-bottom-color: #HEXCODE;
}

4. Card Fill

1. .em-card.sponsored div.em-card_text{
background: #HEXCODE;
}

5. Label Customization

By default, Sponsored events will display with a “Sponsored” logo. If you’d like to change this language (similar to the examples above), here’s how:

  • Navigate to the Admin Dash > Settings > Platform Settings
  • Click Edit HTML
  • Under Shared Among Multiple Views > click the _event_item file
  • Command+F search for: <a class="em-card_tag">Sponsored</a>
  • Replace “Sponsored” with the language or symbol of choice
  • Save Changes

Was this article helpful?