Event Tags

Event Tags can be used to specify Event Locations or Event Categories on an Events page. Here's a guide to customizing your Event Tags. For additional information on creating an event, please refer to the Events article.

Customizing an Event Tag

Events Tags are set in a template file in each College’s theme. For support in updating this file, contact the District Web Team via Slack or ITS.Drupal.Team@domail.maricopa.edu.

To update this file yourself, use the local development set-up included in the Bitbucket repo to pull and update the following template file: templates/content/node--event.html.twig.

Once you’re inside the Twig file, you can choose to:

To display a tag icon, add the CSS class .events-tag. To hide the tag icon, remove the .events-tag class.
For a light button style, replace .events-btn-dark with .events-btn-light.
Additionally, add the following styles to your SCSS files.
Using the @mixin tag-bg($color) variable will help apply your college colors to the event tag icon. See below for details.

You should also incorporate your branding into the events.scss file. Here’s how to do that:
Here’s an example of how the code should look:

// Events Article
.events {
  &-category {

    a {
      color: $white;

      &:hover, &:focus {
        background-color: darken($gray-500, 15%);
      }
    }
  }

  // Event Tag
  &-tag {
    a {
      @include tag-bg('%23002b5c');
    }
  }

  &-tag.events-btn-light {
    a {
      &:hover, &:focus {
        @include tag-bg('%23002b5c');
      }
    }
  }

  &-tag.events-btn-dark {
    a {
      &:hover, &:focus {
        @include tag-bg('%23ffffff');
      }
    }
  }

  &-btn-light {
    a {
      background-color: $gray-100;
      color: $gray-700;

      &:hover, &:focus {
        background-color: darken($gray-100, 7.5%);
        color: $gray-700;
      }
    }
  }

  &-btn-dark {
    a {
      background-color: $gray-100;
      color: $gray-700;

      &:hover, &:focus {
        background-color: $primary;
        color: $white;
      }
    }
  }

  // end
}

Be sure to replace the color values with your college's brand colors. One of the color values must be in Base64 format for the tag icon. Use a URL-encoder for SVG tool to convert a standard hex color value into a Base64 value. Although this tool is typically used for SVG graphics, it can also be applied to hex values.
// Event Tag &-tag { a { @include tag-bg('%23002b5c'); } } &-tag.events-btn-light { a { &:hover, &:focus { @include tag-bg('%23002b5c'); } } }
Ensure that the .events-btn-dark CSS class uses your college’s primary colors.

  &-btn-dark {
    a {
      background-color: $gray-100;
      color: $gray-700;

      &:hover, &:focus {
        background-color: $primary;
        color: $white;
      }
    }
  }

Finally, make sure to include the new events.scss file in your main style.scss.

Common Framework 3

Event Tags

Customizing an Event Tag

Related content