[valtam]

HTML Formatting Reference Guide for the Linux Lite Help Manual.

All code starting with the following syntaxes has 5 tab indentations from the left of your text editor:

Code:

                    <p>
                    <h2>
                    <a href="

All Terminal Command code blocks are 6 tab indentations from the left side of your text editor, eg.

Code:

                        <div class="codeheader">Terminal Command:</div>
                        <pre style="margin: 0; padding: 0;">
                        <code style="overflow: scroll;" class="bbc_code">sudo apt-get install</code></pre><br>

Each block of code is followed by an empty line and all code is aligned, eg.

Code:

                    <h2>Customizing Linux Lite</h2>
                    <p>Linux Lite uses the XFCE desktop environment because it strikes a good balance between resource usage, functionality and customizability for the user. It's
                    relatively light on resources which makes it suitable for installation on older computers, giving them a new lease on life, as well as on newer systems.</p>

                    <p>Navigating the applications menu and the file system is straightforward, intuitive and is similar to what many people coming from a Windows XP or Windows 7
                    environment are used to. At the same time, XFCE offers a variety of ways for people to customize the look and feel of their desktop work environment to suit their own
                    tastes if that is what they want to do.</p>

Img syntax must be surrounded by <p> tags, eg.

Code:

                    <p><img src="images/customize/desktop/desktop-01.png"></p>

If a block of code is accompanied by an image, keep the block AND the image code together, eg.

Code:

                    <p>There are two ways to access the <b>Desktop Settings</b> menu. One way is to simply right-click on the desktop and choose <b>Desktop Settings</b>.</p>
                    <p><img border="1" src="images/customize/desktop/desktop-01.png"></p>

remember to leave an empty line after the image code line before starting the next code block.

If there are 2 image links with a code block, place an empty line between each image link, eg.

Code:

                         <p>You can also go to the main <b>Settings Manager</b>, choose <b>Workspaces</b> there and that will allow you to change the number
                          of workspaces, their names and margins (if desired).</p>
                         <p><img src="images/customize/workspaces/workspaces-07.png"></p>

                         <p><img src="images/customize/workspaces/workspaces-08.png"></p>

Maximum line length:

Code:

<!--                                                                                                                   Each line of code should not go past this length                                                                                                                     

use the above line as a measurement if you need to.

Make sure the end of each line/sentence has a space after it if the sentence continues to the next line, eg.

Code:

                          <p>Workspaces are particularly useful if you tend to have multiple programs open at the same time. For example, if you have two programs running in <--space after 'in'
                          one workspace and want to open a few more, switching to another workspace gives you a fresh, clean desktop to put them on. This cuts down on desktop <---space after 'desktop'
                          clutter and many find it easier to just switch workspaces rather than fumbling through multiple windows on the same desktop to find the one they <--space after 'they'
                          want. Here are four screenshots that show the difference.</p>

Fullstops only have one space before the start of the next sentence, eg.

Here are four screenshots that show the difference. Now click on

instead of:

Here are four screenshots that show the difference.  Now click on

Avoid using underline to make a point, instead bold the text, eg.

<b>My bolded text </b>is here.

'Top of page' code blocks should have an empty line above and below it, eg.

Code:

          <a href="#tweaks"><b>Window Manager Tweaks</b></a> section.</p>
         
          <p><a href="#top">Top of page</a></p>

          <h2><a name="themes">Themes &amp; Icon sets</a></h2>

When writing about links on the Menu, use commas:

<b>Menu, Settings, Settings Manager</b>

instead of arrows:

<b>Menu -> Settings -> Settings Manager</b>

The end of each section needs a 'Top of page' link, eg.

Code:

          <p><a href="#top">Top of page</a></p>

Use the <h2> tags and bookmarks (<a name="apply_theme">) for all section headings in the following format:

Code:

                          <h2><a name="apply_theme">Applying a new Theme</a></h2>

For all links that go outside the Help Manual to the Internet, use the target="_blank" syntax to ensure the link opens in a new tab in their browser, eg.

Code:

<a href="http://gnome-look.org/index.php?xcontentmode=121" target="_blank">Icon set</a>

Avoid using 'border' syntax, eg.

Code:

                    <p><img border="1" src="images/customize/desktop/desktop-01.png"></p>

becomes:

Code:

                    <p><img src="images/customize/desktop/desktop-01.png"></p>

All images need to be in subfolders, eg. for the Archive tutorial, we use:

root folder: 'images'
page folder: 'images/software'
subfolder: 'images/software/archive'
image name: 'archive-01.jpg'

would appear as:

Code:

                    <p><img src="images/software/archive/archive-01.jpg"></p>

Numbered instructions should have each number in bold, eg.

Code:

                    <p><b>2.</b> Now logout, and login with the user tempuser.</p>

All 'NOTE:' sentences/blocks are to be entirely in bold, eg.

Code:

                          <p><b>NOTE: If you are having any trouble booting Linux Lite after installation, please read through <a href="hardware.html#installissues">this trouble shooting guide</a></b>.</p>

The <mark> tag is used to highlight important text, please use it sparingly:

Code:

<mark>y%9L2x#o</mark>