> For the complete documentation index, see [llms.txt](https://lewe.gitbook.io/html-and-aui-toolkit-for-confluence/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://lewe.gitbook.io/html-and-aui-toolkit-for-confluence/administrator-guide/sample-page-code.md). # Sample Page Code ## Introduction Having a sample page for an App, specifically when it provides page macros, is a very useful thing. It gives you a quick way to check on the App’s functionality when you get Incident reports about it from your users or after you upgraded your Confluence version. This page describes a quick and easy way to create such a page and provides the complete code for it. ## Requirement In order to us this code you need the free “Confluence Source Editor” plugin from Atlassian installed on your site. You can find it here: It will add a little button to the page editor menu bar (top right) that allows you to directly edit the page’s source code.

## Steps to create the sample page 1. Create a new page. Give it a title and save it (the Confluence Source Editor only works on existing/saved pages) 2. Add the sample image (see below) as an attachment to the page. 3. Edit the page again 4. Click the Confluence Source Editor button. A new editor window will open on top. 5. Paste the sample code (see below). Tip: Expand the code and double-click in it. That will select all the code to copy to your clipboard. 6. Apply the source code editor 7. Save the page ## Sample Images ![](https://support.lewe.com/wp-content/uploads/2019/12/mountain-2143877_640-300x200.jpg) ![](https://support.lewe.com/wp-content/uploads/2019/12/vendorLogo.png) ## Sample Code HTML Macros ```html

HTML Address

Written by: George Lewe
Visit us at: http://www.lewe.com
Street 123
12345 Town
Country

HTML Blockquote

I am true to my word. Or I try to be. That is why I cannot give you what you ask. I cannot serve two queens. And I have already pledged myself to Queen Daenerys of House Targaryen.

Blue

I am true to my word. Or I try to be. That is why I cannot give you what you ask. I cannot serve two queens. And I have already pledged myself to Queen Daenerys of House Targaryen.

Blue Rounded

I am true to my word. Or I try to be. That is why I cannot give you what you ask. I cannot serve two queens. And I have already pledged myself to Queen Daenerys of House Targaryen.

Dark

I am true to my word. Or I try to be. That is why I cannot give you what you ask. I cannot serve two queens. And I have already pledged myself to Queen Daenerys of House Targaryen.

HTML Custom

data-animal="cat" data-color="red" true

HTML Custom (Body)

true data-animal="cat" data-color="red" true

HTML Div

true data-animal="cat" data-color="red" true

This is a DIV element

HTML Embed

https://www.w3schools.com/tags/helloworld.swf Flash Movie 200 200

HTML Footer

my-footer

Footer

HTML Figure / HTML Figure Caption

margin:0px; A Figure... my-class my-figure

#myMountain true

font-style:italic;color:#000099;

Fig. 1 - This is a beautiful mountain.

HTML Img

left https://georgelewe.atlassian.net/wiki/download/attachments/98861059/BSV?version=1&modificationDate=1505247766867&cacheVersion=1&api=v2 #myMap Lewe.com Logo Lewe.com true Lorem ipsum is a pseudo-Latin text used in web design, typography, layout, and printing in place of English to emphasise design elements over content. It's also called placeholder (or filler) text. It's a convenient tool for mock-ups. It helps to outline the visual elements of a document or presentation, eg typography, font, or layout.

HTML Image Map

The HTMl Image Map here specifies a rectangle in the mountain image. From upper left corner, 100px width and height, link to Lewe.com.

myMountain

blank author http://www.lewe.com Lewe.com 0,0,100,100

HTML Srtikethrough

This is strikethrough text

HTML Progress Bar

100 34 padding:20px; 20px 200px

HTML Script

HTML Small

This small text.

HTML Spacer

HTML Span

true data-animal="cat" data-color="red" true

SPAN

HTML Style

``` ## Sample Code AIU Macros ```html

AUI Badge

true 32+

AUI Button

The buttons are available in several variations:

Sample	Button Style	Button Size	Icon	Comment
	Normal	Normal
compact	Normal	Compact
primary	Primary	Normal
compact primary	Primary	Compact
subtle	Subtle	Normal		The button shape shows on mouse-over
compact subtle	Subtle	Compact		The button shape shows on mouse-over
true primary	Primary	Normal	like	Any of the above can be combined with one of the AUI icons

AUI Dialog

This is a dialog footer Open normal dialog

Hello, this is a normal dialog

true true This is a dialog footer dialog-02 Open warning dialog

Hello, this is a warning dialog

AUI Dropdown Menu

Favorite Links

Atlassian http://www.atlassian.com

Lufthansa Systems http://www.lhsystems.com

AUI Flag

This macro shows a flag sliding in at the upper right and disappearing automatically.

auto

This is the message of the flag

AUI Icon

large color:#990000;

AUI Lozenge

Style	Complete	Current	Default	Error	Moved	Success
Normal	complete complete	current current	default	error error	moved moved	success success
Outlined	complete outline complete	current outline current	outline default	error outline error	moved outline moved	success outline success

AUI Message

My "info" Message

This is the message

true error My "error" Message

This is the message

success My "success" or "confirmation" Message

This is the message

warning My "warning" Message

This is the message

change My "change" Message

This is the message

confirmation true My "confirmation" Message

This is the message

AUI Progress Bar

76 20px 400px

AUI Progress Bar 2

52 true 20px 400px

```