XF1 [TUT] How to create a Page node

Compatible XF Versions
1.0, 1.1, 1.2, 1.3, 1.4, 1.5
This resource is not affiliated with XenForo Ltd.

To create a new page go to ACP -> Applications -> Create New Page

Select the various tabs and configure the fields.

• Enter a URL (e.g. myfirstpage) – this will be the URL of the page, for example: http://www.myforum.com/pages/myfirstpage/
• Enter the title, e.g. Welcome To My Forum
• Enter a description – this is optional and will appear as muted text below the title (see the screenshots below)
• Select the Parent Node – this can be the root, a category, forum or another page
• Set the display order
• Check the checkbox if you want the page to be visible in the list
• Enter your markup (HTML/CSS code) in the Template HTML field – see the notes below
• Select whether you want the published date and number of visits to be displayed in the bottom right hand corner of the page
• Select whether links to sibling and child nodes are to be displayed within the page
• Finally you have the option of forcing the page to display in a particular style, no matter what style a member is using.

If you want page content to look exactly like post content then you must wrap it in this div:

Code:
<div class="messageText ugc baseHtml">

your content here

</div>
Those 3 CSS classes are responsible for:

• defining the font settings (messageText)
• styling URL links (ugc)
• resetting the html back to “normal” (baseHtml)

All content must be wrapped in these default classes to enable pages to use the same CSS as forum posts and automatically update with each style

The image below shows a comparison between a forum post and a page with baseHtml & messageText CSS, baseHtml only, messageText only and no CSS classes.




As you can see the appearance is quite different in each case.

To make embedded images resize and zoom when clicked, see this thread: Make embedded images in Pages automatically resize and zoom when clicked

To remove the page title, add this at the top of the template html field: <xen:h1></xen:h1>