How to position text in the web page

Be careful using line breaks within other HTML tags.

One peculiarity of Pure SEO CMS is that it adds the (/p)(p) tags every time you start a new line. This is fine and easy but must be remembered if you try to be clever. You must not add line breaks in the middle of code but should use the line break (br /) character instead.

View the page source to see whats happening if you get any problems.

You can change what it adds by changing the parastart.txt and paraend.txt files in the default directory. As standard these contain the (p) and (/p) but can be changed to anything or left empty.

Place the above Title tag anywhere on the template page and the Title text for that page will be placed there. Any tag can also be repeated in the META tag, hidden or alternate text areas as well as displayed within the site.

The above summary text tag can also be place anywhere in the template and is also useful for the page META description, as reference by many search engines.

The above author tag is also useful if you want to place a picture or note on a page.

The above reference tag can also be placed anywhere on the page and was thought that it might be useful for a date or product code.

(!--RefOrTitle.value--)

The Ref or Title tag will place the reference or Title text if no ref text is available. This is for lazy SEO people. Use the ref text box to add a unique hidden page title but if you don't put anything in it will use the page title.

The "Begin" and "End Records Section" defines the start and finish of where the main text paragraphs, headings and pictures will be repeated throughout the page.

You can use any html between these tags control the way the content is displayed. The html code for the picture is held in a picture.txt file in the default directory. Every part of the code can be modified to your own requirements.

Basic paragraph example

The following shows what extra features can be used.

Paragraph example with more features

This example shows a style toggle, anchor tag and image in the heading bar, a spacer div to overcome some browser differences.

The table wrapper is sometimes used to overcome an IE6 bug. You can remove it if you include the IE6 hack page included in this site. Common issues are using transparent backgrounds that IE6 does not like or not using position: relative for pageframe and articlepicture layouts.

The standard pictures, movie or script is located with the following tag.

The program recognises whether you ask for a picture, Flash, video or text file and then add the necessary code. You can change the code that controls the way each file type is displayed via the picture.txt, flash.txt or video.txt files in the default directory. Lot in the setup screen to see where the default directory is located and select a new directory if you change these files. There are various examples showing how to control the picture location and borders.

CSS grids are increasingly popular for laying out complex web pages.

Version 3.6 on has a grid system that can call different widths or styles for each paragraph. This requires the following, or similar, tags in the template and stylesheet. All the program does is replace the gridname tag with the drop down list line number.

Basic CSS Grid Layout Example

If the new row drop down is selected the program places the contents of the newrow.txt file from the default directory at the end of the repeated paragraph section.

You can also change the words in the drop down list by editing the gridnames.txt file in the program files text0 folder.

Turn the grid off if you don't have the grid tag in your template and this message will not keep appearing.

You may feel this repeating paragraph layouts is a bit limiting as every page looks the same, however, keeping a common format helps the user find information and is therefore a good thing. You can also apply a separate template or use some of the page or box tag identifiers to switch different stylesheets based on page, group, paragraph number or toggles etc. adding a style1 or style2 etc. in the style sheet list.

With some knowledge of CSS it's easy to make text flow around images or just make pretty shapes in the article text area.

This example uses the code below.

We've split this into code for the stylesheets and code to place in the page but you should organise this as required. It may be better to place everything in the template or custom scripts folder.

Place this code where the gaps will be

Place this code in the style sheet

You can also load a *.txt file via the 'Add Extras' button and then place this code at the point where this tag is placed.

This is very powerful because it will allow you to include custom codes at any point within the website. Our demo site includes an example of a feedback form although any .html or JavaScript code can be added by simply saving it as a *.txt file and then calling it back at the point you need it displayed.

When writing JavaScript utilities you should know that often you have to add scripts to the head, body or main text regions of a page. If you look at our example you will see we have added some special tags that allow Pure SEO-CMS to recognise which part of the script goes where. This layout should be simple to follow and will allow you to load any JavaScript code whenever you require.

Of course with more advanced websites this facility can also be extended by using the server side include commands and VB scripts etc.