Creating a Colored Box of Text on A Content Page

Creating a Colored Box of Text on A Content Page

You can add a box of content that has a colored background and border by editing the source code for that content page.  
  • Type in your content.
  • Select the source code button in the editor. It's the button on the top right of the toolbar that looks like:  < >
  • Locate the section in the source code for the group of content you would like displayed in a colored box.
  • At the beginning of the content add in:   <div style="background-color: #fff5d5; padding: 30px; border: 10px solid #ffe89a;">
  • At the end of the content add in:  </div>
  • Customize the colors by editing the color HEX code for the background-color and border.

Example Source Code:
<div style="background-color: #fff5d5; padding: 30px; border: 10px solid #ffe89a;">
<h2>Why should I register?</h2>
<br>
<p><strong>Membership Toolkit</strong>&nbsp; gives our PTA the power to <strong>make purchases, complete paperwork</strong>, and <strong>coordinate our volunteer teams</strong> online. The goal is to save time, and work together more smoothly!</p>
<h3>Once registered, you can:</h3>
<ul>
<li><em>Join our PTA (and pay dues) online</em></li>
<li><em>Sign-up to receive important communications</em></li>
<li><em>Complete your directory information</em></li>
<li><em>Purchase school supplies</em></li>
<li><em>Volunteer</em></li>
<li><em>Donate</em></li>
<li><em>Purchase spirit wear</em></li>
<li><em>Access the online directory and app (for PTA members only)</em></li>
<li><em>Access to content website pages just for our families and members</em></li>
</ul>
<p>&nbsp;</p>
</div>

    • Related Articles

    • Creating a Website (Content) Page

      Content Pages To make your website functional you need content. Spend your time on Content! It is the most important component of a good website. It is always a good idea to have someone proof all of the content that is live on your site. What to ...
    • Customizing Content Pages

      Single vs. Double Line Spacing Using the "return" or "enter" key will give you a double space because the system recognizes it as a paragraph break. For single spacing, use shift+return. Customizing Colors Helpful Links for Choosing Colors in RGB and ...
    • Content Preview Blocks

      Content Preview Blocks provide a defined way of breaking up content so that you can present a small amount of information and then link to the the full story, similar to a blog. Content Preview Blocks are different than blogs because you are in full ...
    • Home Page Header/Banner

      Your website comes with a text version of the name of your organization. You can swap this out with a logo or graphic banner.     Adding a Graphic to your Website Header Visit your website and log in. Select "Dashboard." Go to Website / Design ...
    • Customizing the Website Page Template

      The default for page templates is "Inherit," but you can choose to update your pages to the "Fixed Width" style. If you'd like to update your content pages to this style, contact us through the help desk and let us know. Fixed Width - The content ...