Layout Design Tweaks

Outgrow offers a wide range of customization that can be incorporated into your content.

There might be cases where you would want to change the appearance of how your text shows up on live content. HTML customization using Code editor comes in really handy when you want to make minor modifications like adding a new line, changing font sizes, adding strong/bold tags, and adjusting the spacing between rows, etc.

Customizing existing Layout

To check if you have access to the code editor simply navigate to the builder of your content and look for </> in the Text editor area, as shown in this snapshot below.

If you have access to the Code editor, you can start customizing the HTML on few elements of your content as per your requirements. Here are some basic tweaks which you can do on your calculator or quiz using HTML and CSS.

Align text

To align the text on heading, descriptions or result you can use CSS style properties.

Here's a tutorial with basic alignments parameters.

To align text Right

<p style="text-align:right;"><strong>Your should check how much you are spending on Video campaigns, make sure these don't burn a hole in your pockets!</strong></p>

To align text center

<p style="text-align:center;"><strong>Your should check how much you are spending on Video campaigns, make sure these don't burn a hole in your pockets!</strong></p>

To align text Left

<p style="text-align:left;"><strong>Your should check how much you are spending on Video campaigns, make sure these don't burn a hole in your pockets!</strong></p>

To align all the paragraphs of an element, add align attribute to every p tag of the element. For example change every

to

to align entire text of result description to right.

📘

Note

To align the Result you will have to use !important within the style attribute in the following manner
style="text-align:right !important;"

Add a new line

The br tag inserts a single line break to your text on calculator or quiz.

Note -: The br tag is an empty tag which means that it has no end tag.

Example:

This text contains <br> a line break.

Changing Font Style

To change the font style and font size

Change

Attribute

Font family

font-family

Font Size

font-size

Text Color

color

Background Color for text or paragraph

background-color

Font Family
Change font family on questions using font-family attribute

<p style="font-family:courier;">This is a paragraph.</p>

HTML Text Size
The font-size property defines the text size for an HTML element:
Example-:

<h1 style="font-size:300%;">This is a heading</h1>

Change font size of questions and other text using font-size attribute

<p style="font-size:160%;">This is a paragraph.</p>

Text Color
Change Text Color on questions text and other text using color attribute

<p style="color:red;">This is a paragraph.</p>

Background Color on text
Add Background color on text using background-color attribute.

<p style="background-color:powderblue;">This is a paragraph.</p>

Formatting text on your Calculator or quiz

Change

Formatting Element

Highlight important text using Strong

strong

Emphasize

em

Strikethrough

del

Underline

ins

Subscript

sub

Superscript

sup

Highlight text

mark

<strong>This text is strong</strong>
<em>This text is emphasized</em>
<p>My favorite color is <del>blue</del> red.</p>
<p>My favorite <ins>color</ins> is red.</p>
<p>This is <sub>subscripted</sub> text.</p>
<p>This is <sup>superscripted</sup> text.</p>
<p>HTML <mark>Marked</mark> Formatting</p>

Quote and Cite

Change

HTML Element

A quotation mark

q

Abbreviate - Marking abbreviations can give useful information to browsers, translation systems and search-engines.

abbr

Right to Left- The HTML element defines bi-directional override.

bdo

Quotation

The HTML element defines a short quotation.

<p>This is a sample quote: <q>An eye for an eye makes the whole world blind.</q></p>

Abbreviation

The HTML element defines an abbreviation or an acronym.

<p>The <abbr title="North Atlantic Treaty Organization">NATO</abbr> was signed in 1949.</p>

Bi-Directional Override
The HTML element defines bi-directional override.

<bdo dir="rtl">This text will be written from right to left</bdo>