Even more advanced CSS: styling with custom classes

What’s Built-in just isn’t enough for me, man.

If you’ve exhausted the capabilities presented via Customizing your site’s appearance then digging into the the HTML of snippets and hooking styling to that is going to be your next step.

Give me the hard stuff.

What you’re going to need to do is edit the HTML code of a Text Area Snippet.

  1. Have a Text Area Snippet
  2. Edit that Snippet
  3. Click the “HTML” tool
  4. You’ll see something similar to this:
  5. You’ll need to add a “DIV” wrapper with a class for styling (as shown above). This can be any class name you like as long as it follows the rules. In this case, I chose “announcement-one” for my class name.
    Example code:
    <div class="announcement-one">
    <h2>Announcement Type 1</h2>
    This is a special announcement! Please pay attention!
  6. Then in Manage Team > Website > Site Settings > Advanced add similar CSS to the below (targeting the class “announcement-one”):
    #wrapper #container .announcement-one {
        background: red;
        padding: 16px;
        border-radius: 6px;

    #wrapper #container .announcement-one h2 {
        color: black;

    #wrapper #container .announcement-one p {
        color: white;
  7. The two of these things will result in something like this on your page:
Have more questions? Submit a request


Please sign in to leave a comment.
Powered by Zendesk