How to Comment Something Out on Your Union Branded Site (Quick Guide)

Sometimes you might want to hide a section of your site without permanently deleting it. You can do this by commenting it out — which tells the site to ignore that piece of code.

Looking for a more detailed guide? Check out this version here!

Common Reasons to Comment Something Out

To temporarily hide something you might want to bring back later
To test changes without fully deleting your original code
To leave notes for yourself or your team inside the code

Commenting Out HTML

To comment out HTML (like a button, image, or text section), wrap it like this:

<!--
<p>This is my paragraph that I want to hide!</p>
-->

Anything inside the <!-- —-> will be ignored by the site.

HTML Example

In this example, we’ll comment out the “Beginner Favorites” dropdown menu in the navigation.

Before:

<a class="dropdown-item" href="/replays?event_category_id=atelier-beginner-favorites">Beginner Favorites</a>

After:

<!--
<a class="dropdown-item" href="/replays?event_category_id=atelier-beginner-favorites">Beginner Favorites</a>
-->

Once you save, it should no longer appear on your site. When you're ready to bring it back, just remove the comment tags!

Commenting Out CSS

To comment out CSS (like colors, fonts, or spacing), wrap it like this:

/*
.card {
  background-color: #ffffff;
  border: 1px solid #cccccc;
}
*/

Anything between /* */ will be ignored by the browser.

CSS Example

This example shows how to comment out both a note and a style.

Before:

/* Main Header */
.main-header {
  text-transform: uppercase;
}

After commenting it out:

/* Main Header */
/*
.main-header {
  text-transform: uppercase;
}
*/

The “Main Header” note stays as a reminder for developers, but the style is now disabled.

Pro-Tips and Reminders

Always include both the opening and closing comment symbols:
- HTML: 
- CSS: /* */
To bring the code back, simply delete the comment markers.
If you comment out too much by accident, use Undo (⌘+Z or Ctrl+Z).