Main Navigation

Styles Tester

---- Additional functionality ---------------------------
Done -Product search form
Done - Product search results
Done - Details on homepage Flash content
??? - Images for homepage Flash content
Product search info from George
- Content for search results page
- Content for product details page
----
Done - Excel Import
Content - George to add
Jag - product search / database for both sites
Copy of SQL database
Details on homepage Flash content
New imagery

Tasks

Setup George with Punch access
Create mock-up of product list/category page
- This will use the lightbox script to show larger images including the technical image
Powerpoint from GB
Remove second dropdown for medical (category will simply show the selected option)

Disposable Gallipot (AVM0338)

2 litre polypropylene bowl used for ligula eu cursus tincidunt, urna massa feugiat mauris, vel tempor elit erat et massa.

Product Code	AVM0338
Material	Polypropylene
Description	2 litre polypropylene bowl used for ligula eu cursus tincidunt, urna massa feugiat mauris.
Size or Capacity	2000ml 200mm diameter x 95mm
Carton Quantity	100
Carton Dimensions	2000ml 200mm diameter x 95mm
Carton Weight	2000ml 200mm diameter x 95mm
Pallet Quantity	40

Disposable Gallipot (AVM0338)

Description	2 litre polypropylene bowl used for ligula eu cursus tincidunt, urna massa feugiat mauris.
Material	Polypropylene
Size or Capacity	2000ml 200mm diameter x 95mm
Carton Quantity	100
Carton Dimensions	2000ml 200mm diameter x 95mm
Carton Weight	2000ml 200mm diameter x 95mm
Pallet Quantity	40

Disposable Gallipot (AVM0338)

Description	Testing a paragraph inside a product table. Paragraphs should not really be used is this situation.
Definately no paragraphs here please	Just text, no paragraph
Size or Capacity	Just text, no paragraph
Carton Quantity	Just text, no paragraph
Carton Dimensions	Just text, no paragraph
Carton Weight	Just text, no paragraph
Pallet Quantity	Just text, no paragraph

This copy is for demonstration purposes only. We offer hands-on, instructor lead, IT software training and soft skills training for the creative, media and design industry. All courses are delivered by certified instructors either in our classrooms or on-site and may be tailored to your requirements. Our solutions are inspired by the innovative application of design and technology. Our courses cover Adobe, Macromedia, Quark, soft skills, Apple training and much more on Mac or PC.

Working Examples of Content Elements

Fonts

The font used across the website is defined by the CSS as Arial.

Examples of various font styles

This test paragraph is inside a font tag, it has a face, a size and a background colour but the CSS is ovverriding it. This text is not inside a font tag.

This text is marked up as being underlined but the CSS is overriding (only links should be underlined on the Web).

The following paragraph is cut and pasted from a website and contains links - this is to test the CSS is overriding any pasted styles:

All of our courses are delivered by certified instructors either in our classrooms or on-site and may be tailored to your requirements.

Address Tag

In Punch you can mark up addresses in your content using the address tag from the style drop down menu.

Harlequin Solutions
2 Exmoor St
London
W10 6BD

Override Punch Editor Styles

text set in italics using EM text set in italics using i - em and i tags tested
bold text here using strong, and some more here using bold - bold and strong tags tested
Underlined text - the underline is switched off by CSS - only links should ever be underlined on the web
Some text that has a font tag applied - font size, font colour, font face and background colour are all overridden by CSS.

A normal paragraph an unvisited link, and a visited link (www.solutions.co.uk) italic text, bold text here A normal paragraph of text, A normal paragraph of text, A normal paragraph of text, A normal paragraph of text, A normal paragraph of text, A normal paragraph of text, A normal paragraph of text, A normal paragraph of text.

Link & Font Tag Tests

Here is an example of a regular link. We also test for potential HTML combinations to ensure consistency:

Font tag inside an A HREF

Font tag outside an A HREF

A normal paragraph of text - lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.

Horizonal Rules

Creating Quotes

This is an example of indented text added in Punch (otherwise known as an HTML blockquote) Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

These coloured blocks are created by clicking the text indent button in the Punch editor. This creates a blockquote HTML tag. The intended method for creating these blocks is to use a paragraph tag inside a blockquote (text indent). The double quote marks are added automatically. When using blockquotes, to create full line breaks within these blocks, two BR tags should be used (soft returns), rather the P tags.

However, care must be taken with this formatting as users may add mutliple paragraph tags which produce unwanted results.

Testing Quote Blocks

Single paragraph with 2 soft returns:

The correct way for these quotes is to use a paragraph tag inside a blockquote (text indent).

Use 2 BR tags to create breaks, rather the P tags

A single paragraph inside a regular blockquote:

Paragraph tag inside a blockquote (text indent).

Two paragraphs inside a regular blockquote:

1st paragraph tag inside a blockquote (text indent).

2nd paragraph tag inside a blockquote (text indent).

Incorrect use of a blockquote - does not contain a paragraph:

Just text inside a blockquote - no paragraph tag

Paragraph following a blockquote ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.

Headings

Examples of headings displayed one after another and separated with paragraphs to display the intended spacing:

Heading 1 Consect etuer adipisci ngon.

Heading 2 Consect etuer adipisci ngon.

Heading 3 Consect etuer adipisci ngon.

Heading 4 Consect etuer adipisci ngon.

Heading 5 Consect etuer adipisci ngon.

Heading 6 Consect etuer adipisci ngon.

Heading 1 Consect etuer adipisci ngon.

Veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.

Heading 2 Consect etuer adipisci ngon.

Heading 3 Consect etuer adipisci ngon.

Heading 4 Consect etuer adipisci ngon.

Heading 5 Consect etuer adipisci ngon.

Heading 6 Consect etuer adipisci ngon.

Lists

Examples of lists that can be added in Punch.

Unordered Lists (bulleted)

Annex A: Research techniques
- Charity size classification
- Charity activity classification
- Research findings
Annex B: Glossary of terms
Annex C: Resources for trustees
- Organisations
- Journals, magazines and newspapers
Annex D: Bibliography
Acknowledgements
Back to main report

A paragraph following an unordered list. A paragraph following an unordered list. A paragraph following an unordered list. A paragraph following an unordered list.

Single level ordered list
List item
List item

List Version 01

A paragraph following an unordered list. A paragraph following an unordered list. A paragraph following an unordered list. A paragraph following an unordered list.

Single level ordered list
List item
List item

List Version 02

A paragraph following an unordered list. A paragraph following an unordered list. A paragraph following an unordered list. A paragraph following an unordered list.

Single level ordered list
List item
List item

Ordered Lists (numbered)

Annex A: Research techniques
1. Charity size classification
2. Charity activity classification
3. Research findings
Annex B: Glossary of terms
Annex C: Resources for trustees
1. Organisations
2. Journals, magazines and newspapers
Annex D: Bibliography
Acknowledgements
Back to main report

A paragraph following an ordered list - lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

Single level ordered list facilisis at vero eros et accumsan
et iusto odio dignissim qui blandit praesent
luptatum zzril delenit augue duis dolore te feugait nulla
luptatum zzril delenit augue duis dolore te feugait nulla luptatum zzril delenit augue duis dolore te feugait nulla luptatum zzril delenit augue duis dolore te feugait nulla
facilisi.

H4 Heading Following a List

Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla.

Images

This image is to show the maximum width allowed in this template. The maximum width should not exceed 610 pixels.

A paragraph following an image.

A linked image:

Tables

This section of the page contains various tables for testing the CSS for tables created in Punch and also for hard-coded CC tables.

The Punch editor allows users to select their own colours, borders, widths, heights, padding and spacing. Below is an example with all of the above. Here we test our CSS to override these user defined preferences.

Here, I'm using the italics tag

Best Practice Table

Here, I'm using the italics tag	Height (mm)	Width (mm)	Depth (mm)
Small	25	50	5
Medium	50	75	10
Large	75	100	15
Extra Large	100	125	20

A normal paragraph of text, A normal paragraph of text, A normal paragraph of text, A normal paragraph of text, A normal paragraph of text, A normal paragraph of text, A normal paragraph of text, A normal paragraph of text.

Another Punch Table

Monday	5344
Tuesday	4245
Wednesday	4578
Thursday	2345
Friday	4561
Saturday	-
Sunday	-

Punch Table - all options applied

This is a table caption created in main editor
This text is inside a P tag inside TD. The remaining table cells do not contain P tags. All text is vertically aligned top.	502	Y	5446
Table details: borderColor=#0000ff height=100 cellSpacing=5 cellPadding=5 width="100%" bgColor=#ff0000 border=5	245	Y	243,256
This text is not inside a P tag	245	Y	243,256
Unordered List inside table Charity size classification Charity activity classification Research findings Unordered List inside table Charity size classification Unordered List inside table Unordered List inside table Charity size classification Charity activity classification Research findings Charity size classification Charity activity classification Research findings Charity activity classification Research findings	245	Y	243,256
Ordered List inside table Charity size classification Charity activity classification Research findings Ordered List inside table Charity size classification Ordered List inside table Ordered List inside table Charity size classification Charity activity classification Research findings Charity size classification Charity activity classification Research findings Charity activity classification Research findings	245	Y	243,256
Test all headings inside a table: Heading 1 Consect etuer adipisci ngon. Heading 2 Consect etuer adipisci ngon. Heading 3 Consect etuer adipisci ngon. Heading 4 Consect etuer adipisci ngon. Heading 5 Consect etuer adipisci ngon. Heading 6 Consect etuer adipisci ngon.	6	N	656,3454
Testing Blockquotes: This is paragraph tag inside a blockquote (text indent).	56	Y	20

Punch Table inside inside a paragraph

Here, I'm using a font tag.	text	text
normal text	normal text	normal text
paragraph text	paragraph text	paragraph text

Another Punch Table

Monday	5344
Tuesday	4245
Wednesday	4578
Thursday	2345
Friday	4561
Saturday	-
Sunday	-

TH Test
Test TH added in SRC view	Jan	Feb	Mar
-	502	5632	9446

Table width 100% border 0

This is a caption - table created in main editor
Element (TH) - added in SRC view	Number	Valid	Demo
PARAGRAPH inside TD - Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.	502	Y	5446
Ordered List	502	Y	5446
Unordered List	245	Y	243,256
Table	6	N	656,3454
Testing	56	Y	20
Accumsan et iusto	54	-	5654
Facilisis at vero eros et accumsan et iusto odio dignissim	3	-	235
Odio dignissim	123,458	-	478
Eros et accumsan table link, visited link	-	-	2
Aaccumsan odio dignissim	-	-	-

A demonstration paragraph following a table... Eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.

Results 1 - 10 of about 45 for test

< Prev
1
2
3
4
Next >

Sort articles by: Rank | Date

Results 1 - 10 of about 45 for test

< Prev
1
2
3
4
Next >

Browse Our Products

Discover the products that we offer, their purposes and detailed dimensions below.

Search criteria message appears here. Users should select criteria before submitting the search.

Main Navigation

Styles Tester

Tasks

Disposable Gallipot (AVM0338)

Disposable Gallipot (AVM0338)

Disposable Gallipot (AVM0338)

Working Examples of Content Elements

Fonts

Examples of various font styles

Address Tag

Override Punch Editor Styles

Link & Font Tag Tests

Horizonal Rules

Creating Quotes

Heading 1 Consect etuer adipisci ngon.

Heading 2 Consect etuer adipisci ngon.

Heading 3 Consect etuer adipisci ngon.

Heading 4 Consect etuer adipisci ngon.

Heading 5 Consect etuer adipisci ngon.

Heading 6 Consect etuer adipisci ngon.

Heading 1 Consect etuer adipisci ngon.

Heading 2 Consect etuer adipisci ngon.

Heading 3 Consect etuer adipisci ngon.

Heading 4 Consect etuer adipisci ngon.

Heading 5 Consect etuer adipisci ngon.

Heading 6 Consect etuer adipisci ngon.

List Version 01

List Version 02

H4 Heading Following a List

Images

Tables

Best Practice Table

Another Punch Table

Punch Table - all options applied

Heading 1 Consect etuer adipisci ngon.

Heading 2 Consect etuer adipisci ngon.

Heading 3 Consect etuer adipisci ngon.

Heading 4 Consect etuer adipisci ngon.

Heading 5 Consect etuer adipisci ngon.

Heading 6 Consect etuer adipisci ngon.

Punch Table inside inside a paragraph

Another Punch Table

Table width 100% border 0

Browse Our Products

Contact Details