This feature is available to our Premium customers.
If you’ve exhausted the capabilities presented via our Help Center article here - Site Settings: Header, Logo, Colors, and Background Images, then digging into the HTML of snippets and hooking styling to that is going to be your next step.
You will need to edit the HTML code of a Text Area Snippet.
➧ Step 1: If you have a Text Area Snippet, edit that Snippet
➧ Step 2: Click the “HTML” tool
➧ You’ll see something similar to this:
➧ Step 3: 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, an “announcement-one” is used for the class name.
➧Example code:
<div class="announcement-one">
<h2>Announcement Type 1</h2>
<p>
This is a special announcement! Please pay attention!
</p>
</div>
➧ Step 4: Then under 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;
}
➧ The two of these things will result in something like this on your page:
For more CSS information ➞ See Guide to Customizing Specific CSS Elements
» Tip: We recommend teams utilize the Basic options to eliminate the need for a volunteer proficient in CSS to maintain this advanced coding technique. SwimTopia supports CSS in the system for teams who would like more design leeway, but we do not have the resources available to create or update CSS for our customers.
Comments
0 comments
Please sign in to leave a comment.