Study Guide Page Formatting

Example Code for Tables:

<div class="table-responsive"><table style="width:100%" class="easy-table easy-table-cuscosky " border="1">

<thead>

<tr>

<th><div style="width:100%;height:100%;color:#000;font-size:1rem;text-align: left">Requirement</div></th>

<th><div style="width:100%;height:100%;color:#000;font-size:1rem;text-align: left">How solved with the Service Console</div></th>

</tr>

</thead>

<tbody>

<tr>

<td style="font-size:0.9rem;color: #000080">Quickly and easily spot important fields on records.</td>

<td style="font-size:0.9rem"><ul><li>Configure the highlights panel to display key fields.</li></ul></td>

</tr>

</tbody></table></div>

Paragraphs

• Update all Introduction paragraphs with the following styling: <p style="font-size:16px;margin:10px"></p>

SOP when Editing

• Update Images - remove the http/https on the link to open it in new tab.

• Careful with the spaces on every word.

• Put "Learn More" boxes at the end of every topic. 

Toggles

• Always close open tags at the end of every Toggle to avoid continuation of content from other Toggle.

• There shouldn't be any space between opened and closed toggle - if they are, it's possible that links won't work

Table and Diagram

• Make sure Table and Diagram are responsive to promote convenient learning

• Remove code rel="noopener noreferrer"

• Make Sure Captions are not bolded.

• Add the header section included in the image Div to add caption within the picture.

• Add <br> if Table is near to the description paragraph or list.

Headings

• Make <H3> for the standard size for all headings.

• e.g. <h3 style="margin-left: 10px;">Following</h3>

Margins

• Always maintain a 10px margin on every side.

• Put a border in every topic even in one Toggle.

Images

• Images should open in a new tab

• Make sure the images are aligned on the Left

• Use Jing software in taking screenshots for convenience and uniformity.

• remove https://focusonforce.com or http://focusonforce.com part from all images, so image links could be relative

Code

• when there's a content with codes e.g.: <apex>, you should replace '<' and '>' with &lt; &gt; - if you don't this content won't be shown at the front page, so when we add &lt;apex&gt; in WordPress, it looks normal on the front page

• &lt; stands for the less-than sign ( < )

• &gt; stands for the greater-than sign ( > )

• Make a habit of putting a space on every group of the code to avoid confusion and debug it easily.

Learn More and Video Links

• Learn More Links should open in a new tab

• Learn More Link title should be the topic name of the linked page

• Remove all Div`s in Learn More boxes

• Target blank should be added behind the link so that it can be open in another tab

• Do not remove the http/https on the links because it will not work. This work only in images.

Lists

• Lists should have line spacing

• Use the following class: <ul class="study-guide-li-line-spacing">