Event Tags

Event Tags can be utilized to identify Event Locations or Event Categories on an Events page. Here’s how to customize your Event Tags. For more details on creating an event, 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 inside the twig file, you can now do either of the following:

To display a tag icon, add the css classname .events-tag. To hide the tag icon, delete the .events-tag.
To display the light button styled design, ensure that .events-btn-light is in replacement of .events-btn-dark
You will also need to add the below styles to your scss documents.
Applying the below variables @mixin tag-bg($color) will help ensure that your college colors are applied to the event tag icon. See below.
You also want to add your branding to the events.scss file. Below is how you would do this.

// 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 include the new events.scss file in your main style.scss.
Make sure to change the color values to your colleges brand colors. One of the color values needs to ba a data uri for the tag icon. Use the blah tool to convert a normal color hex value to a color data uri value.
```
  // Event Tag
  &-tag {
    a {
      @include tag-bg('%23002b5c');
    }
  }

  &-tag.events-btn-light {
    a {
      &:hover, &:focus {
        @include tag-bg('%23002b5c');
      }
    }
  }
```
Make sure that your .events-btn-dark css class is using your college primary colors.

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

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