How to compose your web page in Deskspace CMS

THE RULES OF COMPOSITION

Composing content in "markdown" format is a quick and accessible method of writing for the web. Markdown was invented by John Gruber to whom many thanks for his inspiration.
To get the information you need from this page you should read the markdown version within the Deskspace CMS App, where this is displayed as a web page you will see the results but not how those results were achieved.

Rule 1

Every paragraph you wish to display must be commenced with at least a single hash character and space before your content commences.

Rule 2

You can use from one to six hash characters, each one denotes a style h1 through h6 and the theme you have selected will apply different styling to each paragraph depending on which h level you have used. To change the behaviour of that paragraph just change the number of hash characters.

Rule 3

You can use any punctuation characters you wish within the text you sculpt, except for the # hash character. You can use this character using the special character code 35.

Rule 4

You can include any normal html you wish, this will not be affected by the App processing the markdown, subject to Rule 1, but remember that this html may change how your page appears. For example inserting <> tags may change the appearance of the page.

Rule 5

You can include java scripts but we recommend that you plan to add them through your Settings which have specific fields which add code to the end of the header, the beginning of the body and the end of the body, the likely places for placing java script elements.

Rule 6

The App does something special to anything enclosed in double square brackets like these . These can create a hypertext link to another page or web site, links for emails, images, GoogleMaps, YouTube Videos, Forms and PayPal buttons as shown below:

Note

Please note that some errors will naturally appear in the display of this page where resources referred to do not exist. For example, if you have not added a GoogleMaps web key to your Settings then the example Google Map will not display.

Deskspace CMS Tag syntax

These tags are always in the form [[ label ] ( target ) ] ] where the label is a 4 character code and/or a label and the target, if more than 1 piece of data then separated with a | character, provide the necessary information for the resource to be displayed.
The Deskspace CMS Web Builder App will insert valid dCMS Tags for you, automatically, so this section is merely as a reference for the sake of completeness of our documentation.

A. "LLnk" or nothing

a normal Hypertext link does not require the use of a 4 character code, but you can use "LLnk" if you wish. You just need to put the text label to be clicked in the first part of the tag and the URL of the resource in the target section.
If the link commences with "http" the link is treated as external, if not it is treated as internal and the web domain of your site is added in front of the local page name. If you end the link in character hash (#) and an anchor or section number in the target page then the link will open that resource at that point.

B. "EMal"

creates a send mail action to the address specified, when clicked opening the email in your default email client ready to edit.

C. "Imge"

displays an image contained in the images folder at the home page level of your web site.

D. "GMap"

displays the appropriate Google map providing you have obtained a Google maps web key which you have inserted into your App Settings at the top of the fifth tab.

E. "YTube"

displays a Youtube video using the movies' unique YouTube identifier.

F: "Gcse"

adds a Google custom search to your page.

G: "FMxx"

adds the selected Form object to the page inc text fields, checkboxes and radio buttons.

H: "PBuy" etc.

adds the selected PayPal Button to the page.
There is more detail on how to link from your page into these resources further down this page.

1. CONTENT

You can copy and paste any existing content from a word processed document, pdf, web page or email straight into the content field and the App will automatically strip out all formatting, clean it up and display it as a coherent responsive web page. You can even copy and paste an entire WordPress archive into the Input field and the App will process and display your pages in a single page which you can then edit to remove all the unnecessary remaining navigation content and split the single page into the necessary separate pages.
For the more experienced user, if you have existing content in a MS Word document or a WordPress archive it is not too complex to pre-process it and convert it to your desired Markdown format in any good text editor, such as BBEdit, using the replace function before copy and pasting your cleaned up content it into Deskspace CMS.

2. Controlling float left and right

Your pages will automatically adapt to the width of the screen on which they are displayed.
When the width of the display is more than the small/medium break specified on the Page Behaviour tab of your theme the paragraphs will split into left and right float mode which creates two columns.
With some simple logic in the layout of your textual content you can control which paragraphs float left or right.
Your content will flow down the page following these behavioural rules.
BASIC BEHAVIOUR
After a Heading level 1 or 2 followed by a blank line the next block of paragraphs will always float left.
A block of paragraphs which do not include a blank line will float either left or right based on the behaviour of the first paragraph in the block.
When a blank line occurs the next paragraph floats the other way.
SPECIAL CASES
An h1 should either be the first paragraph on the page or be preceeded by a blank line.
An h2 which is not preceeded by a blank line will follow the behaviour of the preceeding paragraph.
You can add an empty "ghost" paragraph to force the next para to go the other way and the ghost paragraph will not be displayed
A paragraph that is not commenced with at least one hash character remains in your input source markdown but is not included in the displayed page, so these could be used as draft elements or comments.

3. Styles of paragraph

You can use up to six different paragraph styles as follows:
h1 is the page heading title or a major page heading. If you include an image reference as specified below within the h1 paragraph that image will automatically form the background to the h1 text, so you may need to change your text color to obtain the correct contrast for readability. If you specify a background color that will be rendered over the background image. If you control the opacity of the background color by using the rgba() form of control you can place a soft filter over the background image;
h2 is a full width section heading or divider, however, if it is not preceeded by an empty line it will take on the width of the preceeding paragraph;
h3 is content with styling options such as colored backgrounds and borders - it will float left or right;
h4 is content with styling options such as colored backgrounds and borders - it will float left or right;
h5 is content with styling options such as colored backgrounds and borders - it will float left or right; and
h6 is content with styling options such as colored backgrounds and borders - it will float left or right.

4. Adding squares and bullets

Here are some useful character codes you can insert to display:
A modern hollow square which scales correctly everywhere - character code 9634.
● A nice bullet point - character code 9679.
You can of course use any Unicode Hex character values you desire.
Please see our page documenting some useful ones here.

5. Adding emphasise

Here is how you can add emphasise to specific sections of your content:
These emphasises can all be used in conjunction with each other and with the different heading levels so here is by way of example...
...this is a bold italic monospaced third level heading
italic requires use of a single asterix
bold requires use of a double asterix
code monospaced text requires the grave accent character found below tilde on a Mac UK Keyboard
whilst strikethrough requires use of a triple tilde
and to enter a full dash use three hyphens like this "the rain —; not the reign —; fell in Spain"

6. Inserting hypertext links

Open and closed double square brackets are used to mark a http link to another url with the text label for the link followed by the resource URL in either of the following formats
Link label text
Link label text
Where you need to include a hash in the markdown content, for example a section reference on an html page, a FileMaker WebDirect url or a character code, you need to use the character code 35 #. If you enter a normal hash character within a paragraph, as opposed to being one of the first group of characters to control the heading level, that paragraph will not display correctly within your web page.
For your convenience you can enter a double tilde &# where you want the hash and ampersand characters to display in your page.

Images, Googlemaps and Youtube videos

These will all automatically scale within your page and display as full width if within an h1 or h2 paragraph or the appropriate percentage partial width when in two column format within heading levels 3,4,5 & 6.
So if you want something to display large put it on the wide side of the page or small then put it on the narrower side.

7. Including images - use [Imge]

The four character label "Imge" identifies the type of link for processing by Deskspace Web Builder.
Just insert the image file name in the link as shown, this assumes that the image is located in the folder named "images" in the top level of your httpdocs home folder on your webserver. Otherwise a valid path from that top folder will be required in front of the image file name.
meganisi.png
This App automatically upload your images, once you drag and drop them on the yellow image upload box in the centre of the bottom toolbar.
It is important for the best performance to resize and optimise your images - we talk more about this here.
Then drag and drop your image(s) into the images folder you have created in your web server root folder for your site. Then start creating your page.
You just need to insert the file name within the parenthesis in the link. Remember that filenames, like all urls, on the web are case sensitive.
If you get it right then the image will display in your new page as soon as you rebuild it.

8. Including Google Maps - use [GMap]

You can use Latitude and Longitude in either degrees, minutes, seconds or in decimal format to display an interactive Google Map. You need to include the "GMap" label. You can get the latitute and logitude of any location from Google Earth by Adding a Placemark, the information you need is shown in the Placemark data box.
The syntax is as follows, but remember that latitudes in the southern hemisphere are negative as are longitudes west of Greenwich:
use the degrees, minutes, seconds format like this
use the decimal format like this

9. Including YouTube Video Content - use [YTub]

You just need to label the link with "YTub" and then add the unique Youtube resource identifier as shown:

10. How to include comments in your Markdown text

Any paragraph which does not commence with or contain a hash character will not be included in the html output hence such text can be used to comment your markdown.

11. Email links

nick.lightbody@deskspace.com
Which will create a draft email to: nick.lightbody@deskspace.com

12. Google Custom Search

Loading
Merely adding this Deskspace CMS label will add a nice Google Custom Search box to search your site, suitably sytled to match the rest of your page. You will need to go to the Google Custom Search Engine site here to register and get the necessary ID code.

13. Forms

[requires details]

14. Paypal

Pxxx
[requires details]

TROUBLE-SHOOTING

There are a number of special characters that you can only add to your page by using the html code, because those characters have special uses within Deskspace Web Builder. Our page here documents what you need and much more. You will notice in the preview of the rendered page if you have used an illegal character, just look it up and insert &# and the number.
Do not put a plain ( or ) inside the label of a page link, use the ( and ) characters instead.