Page Comparison

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

Instructions

• Go to Structure > Taxonomy > Event Locations > List terms

  Image Removed

• Click Add term

• Give the term a name. Example (Online, In-Person, Hybrid)

• Uncheck Generate automatic URL alias

• Give the term a URL alias. Example /events/location/online

• Check Generate automatic URL alias

• Click Save

...

...

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:
  

  Image Added

• 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.

  Code Block
  // 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.

...