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.

...

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 Twig file, you can now do either of the followingchoose to:

...

• To display a tag icon, add the css classname CSS class .events-tag. To hide the tag icon, delete remove the .events-tag class.

• To display the For a light button styled designstyle, ensure that replace .events-btn-light is in replacement of dark with .events-btn-darkYou will also need to light.

• Additionally, add the below following styles to your scss documentsSCSS files.

• Applying Using the below variables @mixin tag-bg($color) variable will help ensure that apply your college colors are applied to the event tag icon. See below for details.

...

• You should also want to add incorporate your branding to into the events.scss file. Below is Here’s how you would do this.
  

  Image Removed

  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
}

• Make Be sure to change replace the color values to with your colleges college's brand colors. One of the color values needs to be a Basse64 value must be in Base64 format for the tag icon. Use the a URL-encoder for SVG tool to convert a normal standard hex color hex value into a color Base64 value. The Although this tool is normally typically used for svg SVG graphics, but you it can also use it for 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'); } } }

• Make sure Ensure that your the .events-btn-dark css CSS class is using uses your college college’s primary colors.

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

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

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

...