This article explains the basics of creating stylized posts with HTML and CSS code. 

 

Outer Container

The outermost HTML element can be any of the following:

• <div></div> (recommended)
• <h1></h1>
• <h2></h2>
• <h3></h3>
• <h4></h4>
• <h5></h5>
• <h6></h6>
• <span></span>  This element requires style="display:block" in order to display correctly as an outer container.
• <blockquote></blockquote>

Quotes Issue

Double quotes are used for HTML attributes such as style="display:block". When typing a double quote into the rich text field in Commissioned it produces a different type of quote mark that breaks the code. If your code does not work replace all your double quotes with this one: ".

 

It appears there may be a workaround to this issue. When adding a double quote into the rich text field, hit the backspace after typing it. That seems to revert it back to the working quotation referenced above.

Removing Post Border

Your styled content will sit inside the post container. That is, it will have a white border around it. To remove the border you must add two styles to the Outer Container: style="margin: -28px !important; padding: 45px;". It must be placed inside the opening tag of the outer container like this:

 

<div style="margin: -28px !important; padding: 45px;">Your content or additional HTML elements go here.</div>

 

HTML Elements

HTML elements can be used within your outer container. However, not all HTML elements will function. The structure of an HTML element includes an opening tag and a closing tag like so: <div>Stuff inside goes here</div>. Notice how the closing tag includes a forward slash before the tag name.

 

Not all HTML elements have closing tags. One example you might encounter is the image tag. It is considered self closing and looks like this:

 

<img style="width: 100%;" src="http://keithmon.com/sunset.png" />.

 

You may find these elements useful (in addition to the elements listed above for outer container):

• Anchor / link: <a href="https://www.example.com">Link Text</a>
• Image: <img src="http://keithmon.com/sunset.png" />
• Line break: <br/>
• Center: <center>Text Here</center>
• Span: <span>Some Text</span>
• Div: <div>other elements can go inside here</div>  This is the recommended element for the outer container but can be used in other places.
• Paragraph / normal text: <p>This is a typical sentence. It will be styled according to the default app style. Most text should be inside a paragraph unless it’s a heading</p>

 

Style Attribute

The style attribute is used for inline styles as we have described in various places above. Attributes are always added into the opening tag of an HTML element. Each element can only have one style attribute. Therefore, you must combine all properties into one style attribute. For example, if you want to use style="display:block" and style="margin: -28px !important; padding: 45px;". You would combine all properties into one attribute like this: style="display: block; margin: -28px !important; padding: 45px;"

 

CSS Properties

The style attribute can have many inline CSS properties. You can reference this resource to find more properties and other values for properties mentioned here. A property is a statement that changes a particular aspect of the look or layout. The following list are some common examples of CSS properties that may be useful:

 

• color: #ffffff;  Changes the text color to white. You can use any hex color code.
• background-color: #000000;  Changes the background color to black, accepts hex color codes.
• font-size: 16px;  Changes the text size, browser default text size is 16 pixels.
• background-image: url(http://keithmon.com/sunset.jpg);  Sets a background image, you must supply the direct image URL, this works great on the outer container.
  • The following properties will enhance the look of your background image. You should probably use these whenever adding a background image:
    • background-repeat: no-repeat:
    • background-size: cover;
    • background-position: center;
• text-decoration: underline;  Adds an underline to the text, use none instead of underline on a link to remove the style.
• display: block;  Turns an inline element into a block element, is useful with Span elements.
• margin: 10px 5px 10px 5px;  Adds external space to the element, the numbers are ordered by: top right bottom left. This will only work correctly for block-level elements or elements that also include display: block; or display: inline-block;.
• padding: 15px 20px 10px 25px;  Similar to margin but affects internal spacing, does not require display: block; but top and bottom padding might need display: block-inline;.
• border: 2px solid #cccccc;  Adds a solid border (opposed to dotted or dashed) that is 2 pixels wide and gray.
• border-radius: 5px;  Makes the corners rounded, great with background color and border, doesn’t appear to work on outer container.

 

In addition, the position and z-index properties have been proven to work. We will not cover those here as they are advanced. There may be other CSS properties that work inside the post box.

 

Notice how properties follow a consistent pattern: name: value;. The colon and semicolon are required elements of CSS  syntax.

 

Troubleshooting

Check for these things if your design doesn’t work:

1. The correct quotation marks are being used: " instead of “
2. Ensure your attributes include an opening and closing quotation mark like this: style="name: value;"
3. Ensure your properties include the colon and semicolon in the correct spots like this: style="display: block; margin: -28px !important; padding: 35px 45px 45px 45px;"
4. Ensure your HTML elements include an opening and closing tag (except image and line break).
5. Ensure your closing tag includes the forward slash: <div></div>
6. Review your code and look for any missing or misplaced syntax. It’s often something very small.

 

Example: Image With Text Below

<div style="display: block; font-weight: bold; text-align: center; margin: -28px !important; padding: 45px; background-color: #000; color: #fff; font-size: 30px;"><a target="_blank" href="https://www.commissioned.global"><img style="display: block;" src="https://upload.wikimedia.org/wikipedia/commons/a/a4/Anatomy_of_a_Sunset-2.jpg" /></a><span style="display: block !important; margin-top: 30px;">Hello World</span></div>

 

Example: Multi-line Text With Black Background, Centered

<h1 style="color:white; background-color: #000000; margin: -28px !important; padding: 45px;"><center>Vision:<span style="display:block; color:red;">ALL NATIONS DISCIPLED.</span>Communication, Intelligence and Mobilization for the Kingdom</center></h1>

 

 

Example: Multi-line Centered Header and Subheader with Paragraph

<h1>S<span style="color:#0070bf;">ocial </span> M<span style="color:#ef4d46;">edia</span></h1>
<h3><center>With A <span style="color:#493ebf;">Kingdom</span> Purpose</center></h3>
<p>Commissioned's machine learning and crowdsourcing technology creates unified teams focused around causes, passions, interests, and spheres of influence.</p>