I thought it might be helpful to take notes while I create a new custom template. We'll assume this is starting with a fresh installation, but without importing the example website. The template we're 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'll create the basic Site structure and add some content to the pages.

=========================================
====> See this tutorial as a narrated screencast <====
=========================================

Create the basic modules
1. Go to Layout > Modules
2. Create the header module
----> a.Click ' Add module' from the top navigation
----> b. Name the module 'header'
----> c. Select the Module type of 'Custom HTML code'
----> d. Enter '<h1>Website Title</h1>' in the HTML code textarea
----> e. Click the 'Save and close' button
3. Create the horizontal navigation module
----> a. Click ' Add module' from the top navigation
----> b. Name the module 'navigation'
----> c. Select the Module type of 'Navigation main menu items'
----> d. Click the 'Save and close' button
4. Create the page footer
----> a.Click ' Add module' from the top navigation
----> b. Name the module 'footer'
----> c. Select the Module type of 'Custom HTML code'
----> d. Enter '<hr>&copy 2007 Website Name. All rights reserved.' in the HTML code textarea
----> e. 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
----> a. Select 'header' from the Module dropdown list
----> b. Select 'header' from the Column dropdown list
----> c. Click the icon to add a new row
11. Add the 'navigation' module
----> a. Select 'navigation' from the Module dropdown list
----> b. Select 'header' from the Column dropdown list
----> c. Click the icon to add a new row
12. Add the 'Articles' module
----> a. Select 'Articles' from the Module dropdown list
----> b. Select 'main' from the Column dropdown list
----> c. Click the icon to add a new row
13. Add the 'footer' module
----> a. Select 'footer' from the Module dropdown list
----> b. 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. 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.


Hopefully this tutorial will help people get started with creating their own custom Page layouts. I just realized how long this tutorial ended up being, although it shouldn't be overly difficult. Please feel free to offer any changes, corrections and additions.

Have fun!

Thanks Ben, yet another distraction

Cheers

Mark

I'll add this tutorial to the wiki as soon as I am able.

I have moved (or added, actually) this tutorial to the wiki, and it can be found here - http://www.typolight.org/wiki/tutorials:creating_custom_templates

I hope to do a screencast of this tutorial as soon as I have the time.

Hi Ben,

very nice work. Thanks a lot!

Regards
Leo

I have created a screencast of this tutorial, which can be seen at www.typolight.org/screencast/templates

Enjoy!

Hi Ben,

I'm new to Typolight and I'm testing it on a website I'm working on. I'm reading all the documentation, support, forum, etc. But I still didn't understand very well how to make my website look exactly how I want it to look. Through this tutorial I understood that if I'm not happy with the original modules then I should choose 'Custom HTML code'. For example, in case I want to make a main menu with a different code from the module 'navigation main menu items'. Am I right?
Regards,
Cátia

hey ben,

i just wanted to thank you for your great tutorial. i'm already curious about your next one

@Cátia - You should experiment with the various modules to see what they do. You are correct about using Custom HTML code when the built in modules don't do what you need. Most visual customization to layouts is realized through Custom HTML and CSS.

@gromok - Thank you for your kind words ... I'm glad it helped you. I just got in from two weeks of travel in Germany and Italy, so I'm catching up on everything. That said, I'm not sure when I'll get to the second screencast. Hopefully in the next week or so.

Hi,

This is really helpful, but I have a problem what I can't solve using the forum so far.

In most of the page I get on top of the horizontal menu a bar that is empty, has the same color as the menu and is clickable.

When I click on it I get this in the addressbar:

index.php/home.html#skipNavigation_2

Is there a way to remove this bar ? I have tried to check it in the code, but I was not able to find a solution.

Thanks !

Thijs

Hi Thijs

If I understand you correctly it seems your skip nav is showing.

Leo has added a class 'invisible' to this and styled it so that it should not be showing (it can be found in typolight.css). Have you used the class invisible elsewhere that might be overriding it?

What version of TL are you using? I seem to remember having a similar problem on an earlier version of TL, I simply styled the class invisible to hide.

Is there a link so we can have a look?

@Ben, if you read this I wonder if this post belongs somewhere else with a problem specific title?

cheers

Mark

Hi Mark,

Adding the invisible class to my style sheets solved this, thanks !

Is this a "hack" or can't this be fixed in another way ?

Thanks again,

Thijs

Hi

Seems like it's a bit of a hack really as it shouldn't be showing anyway. What version of TL are you using? Is there a link to the site?

Hi,

Latest version. I'm running a local copy at the moment, but I solved it using CSS.

Thijs

Mark - thanks for the 'heads-up', although PunBB doesn't allow us to split threads. My options are to either leave it or delete the off-topicness. I think I'll come back in a few days and delete the last few posts.

Thijs, please help us keep the forum organized by starting new threads for new questions. Thanks, and welcome to the community.