Quickstart guide - creating a layout & adding content¶

• Quickstart guide - creating a layout & adding content
• Create the basic modules
• Import style sheets
• Create the Page layout
• Create the Site structure
• Add content to the pages
• Preview the website and modify the template

I thought it might be helpful to take notes while I create a new page layout, set up the page structure, create articles and add content. We'll assume this is starting with a fresh installation, but without importing the example website. The page layout we are going to create will be very simple visually and will have a header, a horizontal navigation bar, a one-column body area and a footer. After taking the steps to create a new Page layout, we will create the basic Site structure and add some content to the pages.

Watch this tutorial as a narrated screencast

Create the basic modules¶

1. Go to Layout > Modules
2. Create the header module
   • Click Add module from the top navigation
   • Name the module 'header'
   • Select the Module type of 'Custom HTML code'
   • Enter '<h1>Website Title</h1>' in the HTML code textarea
   • Click the 'Save and close' button
3. Create the horizontal navigation module
   • Click Add module from the top navigation
   • Name the module 'navigation'
   • Select the Module type of 'Navigation main menu items'
   • Click the 'Save and close' button
4. Create the page footer
   • Click Add module from the top navigation
   • Name the module 'footer'
   • Select the Module type of 'Custom HTML code'
   • Enter '<hr>&copy 2007 Website Name. All rights reserved.' in the HTML code textarea
   • Click the 'Save and close' button

Import style sheets¶

1. Go to Layout > Style sheet
2. Click CSS import from the top navigation
3. Navigate to the folder named 'xBrowser_style_sheets'
4. Import the four style sheets

Create the Page layout¶

leave all fields with the default settings unless instructed otherwise

1. Go to Layout > Page layout
2. Click New layout from the top navigation
3. Name the layout 'main'
4. Check the box for 'Default layout'
5. Select all Style sheets - you won't need to select 'xForm' unless you plan to use a form with this layout
6. Select the first layout under 'Columns'
7. Set the Header and Footer heights to be 80 and 30, respectively
8. Set the 'Main column width' to be 760
9. Click the 'Save' button
10. Add the 'header' module
    • Select 'header' from the Module dropdown list
    • Select 'header' from the Column dropdown list
    • Click the icon to add a new row
11. Add the 'navigation' module
    • Select 'navigation' from the Module dropdown list
    • Select 'header' from the Column dropdown list
    • Click the icon to add a new row
12. Add the 'Articles' module
    • Select 'Articles' from the Module dropdown list
    • Select 'main' from the Column dropdown list
    • Click the icon to add a new row
13. Add the 'footer' module
    • Select 'footer' from the Module dropdown list
    • Select 'footer' from the Column dropdown list
14. Click the 'Save and close' button

Create the Site structure¶

leave all fields with the default settings unless instructed otherwise

1. Go to Layout > Site structure
2. Click New page from the top navigation
3. Click the icon for the 'TYPOlight webCMS' row
4. Assign a Page title of 'home'
5. Check the box for Assign a layout ... at least for the homepage
6. Check the box for 'Published'
7. Click the 'Save and close' button
8. Repeat steps 3 through 7 to create a few more pages, but step 3 changes to be 'Click the icon where you want to add a new page'

Add content to the pages¶

leave all fields with the default settings unless instructed otherwise

1. Go to Content > Articles
2. 2. Click New article from the top navigation
3. Select the icon for the page you wish to add an article
4. Add a Title to the page
5. Check the box for Published
6. Click the 'Save and edit' button
7. Click the icon to add a new Content element
8. Select an Element type of 'Text'
9. Enter a Headline and add content to the 'Text' textarea - I recommend www.lipsum.com for Latin filler
10. Click the 'Save and close' button
11. Repeat steps 2 through 10 to add content to the remaining pages

Preview the website and modify the template¶

1. Click Front end preview from the very top navigation near the upper-right
2. Add imagery to the 'header' module
3. Dive into the style sheets at Layout > Style sheet > xBasic to modify the overall look of the site
4. Send Leo an e-mail thanking him for creating such a great CSS editor!

---

After following this tutorial, you should end up with something like this, minus the excited puppy.

--- Tutorial and screencast created by Ben