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 our other CSS resources: Change Color Scheme with CSS & Guide to Customizing Specific CSS Elements 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
    text-area.png
  4. You’ll see something similar to this:
    text-area-html.png
  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>
    <p>
    This is a special announcement! Please pay attention!
    </p>
    </div>
  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:
    announcement-one.png
Have more questions? Submit a request

0 Comments

Please sign in to leave a comment.