Index > User tutorials > Blogging with Typolight
Blogging with Typolight is a little bit more complicated than setting up the news module. The way I did it requires three pages, five modules, and three page layouts. These are the steps to follow:
1. Create a news archive
Content>News>New archive. Add articles. Do not create Jump To links yet.
2. Create five new modules
A Newsreader module (Module type: Newsreader, News Layout: news_full, Space After: 20-40px)
A Newslist module (Module Type: Newslist, News Layout: news_full, Number of News: 31),
A Recent Posts module (Module Type: Newslist, News Layout: news_simple, Headline: Recent Posts, Space After: 20-40px)
A News Archive Menu (Module Type: News archive menu, News Layout: news_short, Headline: Archive)
A News Archive module (Module Type: News archive, News Layout: news_full)
3. Create three page layouts
Create a Newslist layout: Two columns (Main + Right).
Place Newslist module in Main. (These will be your blog entries.)
Place Recent posts module in Right column. (This will be your Recent Posts list.)
Place News Archive Menu in the right column under Newslist Short. (This will be your Archive list.)
Create a Newsreader layout: Two columns (Main + Right).
Place Newsreader module in Main.
Place Recent posts module in Right column.
Place News Archive Menu in the right column under Recent posts.
Create a News Archive layout: Two columns (Main + Right).
Place News Archive module in Main.
Place Recent posts module in Right column.
Place News Archive Menu in the right column under Recent posts.
4. Create three new pages
Create a parent page and two child/subpages.
The parent page will take the Newslist layout. Mark it published. This is the blog
The subpages:
Subpage 1 will take the Newsreader layout. Mark it Published. Hide from Navigation. This subpage will be the page used to show single posts when someone clicks on "Read More."
Subpage 2 will take the News Archive layout. Mark it published. Hide from navigation. This subpage will show the entries for each month listed in the Archive Menu
5. Create Jump To links
Go back to the News module under Content.
Edit the news archive.
Edit the first item (this is the news archive entry, not an article). Make sure the Jump To page is the parent page you created earlier.
Edit the article items. For each, set the Jump To page to be the subpage created earlier (the one with the Newsreader).
Go to the Modules under Layout.
Edit the News Archive Menu module created earlier. Make sure the jump to page is the News Archive subpage created in step 4.
You now have a basic blog. This blog will show your latest posts (up to 31 of them or one per day for a month) and have a sidebar with links to your most recent posts (which will open in individual windows) and to your archived posts organized by month.
6. Change stylesheet and news template to your liking.
One change I recommend is to the format of ".clear" under the xBasics stylesheet. You want to have some space between entries in your Newslists. I suggest you add a 10px margin to top and bottom.
If anybody is using Typolight for blogging I'd be interested in how they set it up.
Screenshots:
A single post

The entries for one month

1. Create a news archive
Content>News>New archive. Add articles. Do not create Jump To links yet.
2. Create five new modules
A Newsreader module (Module type: Newsreader, News Layout: news_full, Space After: 20-40px)
A Newslist module (Module Type: Newslist, News Layout: news_full, Number of News: 31),
A Recent Posts module (Module Type: Newslist, News Layout: news_simple, Headline: Recent Posts, Space After: 20-40px)
A News Archive Menu (Module Type: News archive menu, News Layout: news_short, Headline: Archive)
A News Archive module (Module Type: News archive, News Layout: news_full)
3. Create three page layouts
Create a Newslist layout: Two columns (Main + Right).
Place Newslist module in Main. (These will be your blog entries.)
Place Recent posts module in Right column. (This will be your Recent Posts list.)
Place News Archive Menu in the right column under Newslist Short. (This will be your Archive list.)
Create a Newsreader layout: Two columns (Main + Right).
Place Newsreader module in Main.
Place Recent posts module in Right column.
Place News Archive Menu in the right column under Recent posts.
Create a News Archive layout: Two columns (Main + Right).
Place News Archive module in Main.
Place Recent posts module in Right column.
Place News Archive Menu in the right column under Recent posts.
4. Create three new pages
Create a parent page and two child/subpages.
The parent page will take the Newslist layout. Mark it published. This is the blog
The subpages:
Subpage 1 will take the Newsreader layout. Mark it Published. Hide from Navigation. This subpage will be the page used to show single posts when someone clicks on "Read More."
Subpage 2 will take the News Archive layout. Mark it published. Hide from navigation. This subpage will show the entries for each month listed in the Archive Menu
5. Create Jump To links
Go back to the News module under Content.
Edit the news archive.
Edit the first item (this is the news archive entry, not an article). Make sure the Jump To page is the parent page you created earlier.
Edit the article items. For each, set the Jump To page to be the subpage created earlier (the one with the Newsreader).
Go to the Modules under Layout.
Edit the News Archive Menu module created earlier. Make sure the jump to page is the News Archive subpage created in step 4.
You now have a basic blog. This blog will show your latest posts (up to 31 of them or one per day for a month) and have a sidebar with links to your most recent posts (which will open in individual windows) and to your archived posts organized by month.
6. Change stylesheet and news template to your liking.
One change I recommend is to the format of ".clear" under the xBasics stylesheet. You want to have some space between entries in your Newslists. I suggest you add a 10px margin to top and bottom.
If anybody is using Typolight for blogging I'd be interested in how they set it up.
Screenshots:
A single post
The entries for one month
Last edited by Red Clown, 2007-05-06 09:44
2007-04-01 12:17
Hi Red Clown,
thank you for your contribution. I have moved it into the tutorial section. Can you provide a screenshot or a link to your installation as well?
Regards
Leo
thank you for your contribution. I have moved it into the tutorial section. Can you provide a screenshot or a link to your installation as well?
Regards
Leo
2007-04-01 13:18
Hi Red Clown,
yes a detailled screenshot addition would be nice to get it much more easier than only read and do the right thing :-)
yes a detailled screenshot addition would be nice to get it much more easier than only read and do the right thing :-)
all best / beste grüße
planepix
planepix
2007-06-18 18:37
Hi Red Clown,
until now i'm still trying to follow your tutorial above.but i can't get the result.maybe you can give more specific tutorial from beginning till the end (not just the blogging part).but the whole part. i hope you can help me coz i'm new with typolight and now i'm using it to finish my final.....i'm planning to finish it on December 08...
thanks
until now i'm still trying to follow your tutorial above.but i can't get the result.maybe you can give more specific tutorial from beginning till the end (not just the blogging part).but the whole part. i hope you can help me coz i'm new with typolight and now i'm using it to finish my final.....i'm planning to finish it on December 08...
thanks
2008-10-31 10:15
Implementing the Tags and Tag Cloud News modules really completes the functionality of a blog in TYPOlight. You will find these extensions here - http://www.typolight.org/extension-list/tags/Tag.html.
2009-02-06 20:10
Wonderful Tutorial!
I did, however, encounter 1 minor issue.
Per step 4 I created the sub-pages and hid them from navigation. Because of this when a sub-page is active (for example when viewing a specific post) the link to the parent page (in my case "Blog") in the navigation header is no longer functioning. The parent page is treated as active even though I'm on a sub-page and I'd like my users to be able to easily and intuitively navigate back to the main blog page if they wish.
I hope I simply overlooked some simple setting in the back end.
I will keep looking into it but I'm not one for re-inventing the wheel if someone has a simple solution.
I did, however, encounter 1 minor issue.
Per step 4 I created the sub-pages and hid them from navigation. Because of this when a sub-page is active (for example when viewing a specific post) the link to the parent page (in my case "Blog") in the navigation header is no longer functioning. The parent page is treated as active even though I'm on a sub-page and I'd like my users to be able to easily and intuitively navigate back to the main blog page if they wish.
I hope I simply overlooked some simple setting in the back end.
I will keep looking into it but I'm not one for re-inventing the wheel if someone has a simple solution.
2009-04-21 22:07
