A step-by-step guide to making a pretty and useful microsite using Wikidot. Like this site. When you follow this guide, don't skip steps, or things won't work as you expect.
How this helps
We use a lot of emails but email is bad as a knowledge base - what you say gets lost for most people. Microsites are the best way we know to collect knowledge into easy to access packages.
Create the site
- Site name: ffii-mysite
- Web address: ffii-mysite
- Site content language: English
- Please confirm: Tick
Then click 'Get my free Wikidot site'.
When you get your new site, click on the 'Site manager' option in the left menu.
Make these changes, and click 'save changes' each time:
- General settings: site name = 'My site', Tagline = 'An example'.
- License: choose the license = 'Standard copyright'.
- Permissions: give site member all permissions, and unselect 'show page options' to anonymous and registered users.
- Forums: click 'activate forum now'.
- Members/Policy: check 'Enable membership by applying'
- Page ratings: enable page ratings for _default, accept proposed options.
We will use this security model:
- All site members can edit anything on the site.
- Site admins can change the configuration and invite new members.
- We do not use site moderators.
- Registered wikidot users can make certain contributions.
- Anonymous users cannot contribute anything but can read the site.
Look and feel
To customise the look and feel, you will upload an FFII logo and a custom stylesheet (CSS). Note that to use the FFII logo on a site you need permission from the FFII board.
- Download http://howto.ffii.org/local--files/start/logo.png to your hard drive.
- Go to your site welcome page (click on the top header text).
- Scroll down and click on the 'files' action in the bottom right menu.
- Click 'upload new file', and select the logo.png you downloaded.
- In the Site Manager, Appearance/Custom themes: click 'create a new theme'.
- Theme name = 'custom', Which theme to extend = 'Base', and CSS code is here: ffii-theme-21.css.
- Click 'save theme'.
- In Appearance/Themes, for _default, choose 'custom'.
- Click on 'My site' in the header and you should see your new front page look and feel.
We will fix the left and top navigation bars. By convention we put all navigation into the left menu.
- Enter the page URL 'nav:top' ('http://ffii-mysite.wikidot.com/nav:top').
- Edit the page (click 'edit'), select all text, delete it, and save the page (which is now empty).
- The top menu will disappear.
- Enter the page URL 'nav:side'.
- Edit the page and enter this text:
++ [http://www.ffii.org www.ffii.org] * [[[start|Front page]]] * [[[About]]] * [[[Whatever]]] [[div style="margin-top:1em"]] * [[[system:recent-changes | Recent changes]]] * [[[system:join | Become an editor]]] * [[[editors |Current editors]]] [[/div]] [[div style="margin-top:1em"]] * [[[admin:manage|Administer site]]] [[/div]] [[div style="margin-top:3em; margin-left:1em; font-size:80%"]] Copyright (c) the authors and FFII. Licensed under the Creative Commons Attribution Share Alike 3.0 License. [[/div]] [[=image http://i.creativecommons.org/l/by-sa/3.0/88x31.png link="http://creativecommons.org/licenses/by-sa/3.0/"]]
Note that you are going to change the 'whatever' item later when you start to build your web site.
Page templates are very useful, they ensure that new pages have a consistent look and feel. The most important, for most sites, is to create a readable two-column layout. A single fat column is hard to read. We will make a default template that applies to all new pages in our site.
- Go to the page 'template:default' and create a new page. Use this content:
[[div style="float:left; width: 66%; padding: 0 2% 0 2%"]] + Page title Do not enter text in the 'Title of page' field, otherwise this disturbs the shaded box in the right column. Write your text here. ++ Comments [[module Comments title=""]] [[/div]] [[div style="float:left; width: 28%; padding: 0 1% 0 1%; background-color: #c9d5e7;"]] ++ Links * [http://some-other-side] [[/div]] ~~~~~~
Note that this template allows comments on all pages. If you don't want this, remove the comments section. Now we have to activate the template:
- Go to Adminster site and click on 'Page templates'.
- Choose the Default template for the _default category and click 'save changes'.
Test it by entering a URL like 'nosuchpage' and click on 'create page'. You'll see the template appear. Click 'cancel' to not create the page.
Basic home page
Making a home page is delicate and most people get it wrong. On most sites you need to:
- Provide fresh information such as news in the central part of the page.
- Provide large, easy to find pointers off to main sections.
- Use the right-hand column for additional information.
Here is a simple generic home page you can use for many projects, obviously with changes. This page uses the standard two-column layout and adds three large buttons at the bottom of the page for 'big jumps'. Use these for the most common actions you expect people to do from that page.
[[div style="float:left; width: 66%; padding: 0 2% 0 2%"]] + News [!-- Put news items, an RSS feed, or a front-forum (see later) here --] [[div style="float:left; width: 27%; padding: 1%; border-style: solid; border-color: grey black black grey; margin: 1%; background-color: #FFC0C0"]] [[=]] + [[[Section 1]]] Some big jump [[/=]] [[/div]] [[div style="float:left; width: 27%; padding: 1%; border-style: solid; border-color: grey black black grey; margin: 1%; background-color: #C0FFC0"]] [[=]] + [[[Section 2]]] Another big jump [[/=]] [[/div]] [[div style="float:left; width: 27%; padding: 1%; border-style: solid; border-color: grey black black grey; margin: 1%; background-color: #C0C0FF"]] [[=]] + [[[Section 3]]] A final jump [[/=]] [[/div]] [[/div]] [[div style="float:left; width: 28%; padding: 0 1% 0 1%; background-color: #c9d5e7;"]] ++ Links * [http://some-other-site] [[/div]] ~~~~~~
Let's make a number of standard pages:
- One that shows the editors of the site.
- One that explains how the site works.
- One that lets people request to join the site.
This is the 'editors' page:
Editors of this site are: [[module Members]]
This is the 'about' page:
[[div style="float:left; width: 66%; padding: 0 2% 0 2%"]] + About this site This site is a demo. It is not real. In fact as soon as we've finished learning Wikidot we'll delete this site using the 'Extreme actions' section of the Administration menu. [[/div]] [[div style="float:left; width: 28%; padding: 0 1% 0 1%; background-color: #c9d5e7;"]] ++ Links * No real links to put here. [[/div]] ~~~~~~
This is the 'system:join' page:
[[div style="float:left; width: 66%; padding: 0 2% 0 2%"]] + Who can become an editor Any member who has demonstrated excellent writing skills and sufficient knowledge of the association can become an editor of this site. [[module MembershipApply]] [[/div]] [[div style="float:left; width: 28%; padding: 0 1% 0 1%; background-color: #c9d5e7;"]] ++ Current members [[module Members]] [[/div]] ~~~~~~
Forums are useful for some kinds of discussion. They usually only work on sites with regular traffic. People who are used to doing everything by email dislike forums. But forums have the advantage of easily collecting discussions in a stable form. You already enabled forums when you configured the site, now you need to do some more work to make them work properly.
- Go to Administer site, Forums/Structure.
- Create a new group.
- Group name = 'Example forum group', short description = 'An example just for starters'.
- Create a new category in that group.
- Category name = 'Complaints', short description = 'Registered users can post and comment here.'
- Save the forum structure.
- Goto Forums/Permissions.
- Choose 'Complaints', uncheck 'use default permissions', and give 'registered at wikidot' users the right to add new posts and create new threads.
- Give site members the right to edit posts, and save changes.
Now we can add links to the forum in the navigation side bar. Enter the page address 'forum:start' and then click on the Complaints category. Copy the URL, which will be something like http://ffii-test.wikidot.com/forum/c/18395.
Edit nav:side and add this block after the 'whatever' item:
[[div style="margin-top:1em"]] * [http://ffii-test.wikidot.com/forum/c/18395 Complaints] * [http://wiki.openamq.org/forum:recent-posts Recent posts] [[/div]]
Many microsites have a news/comments section on their main page - look at http://www.noooxml.org for an example. We'll explain how to make this.
- Go to Administer site, Forums/Structure.
- Create a new group called 'News' with the description 'Accepted stories'.
- Create a new category under News, called 'Front-page', with an empty description.
- Create a new group called 'Submissions' with the description 'Submitted stories'.
- Create a new category under Submissions called 'Submit your news' with the description 'Stories may be submitted anonymously. If the editors find these stories interesting they will copy them to the front page. You cannot comment on these stories. Please write a short description and a single paragraph of text. The editors may edit your story.'
- Create a new category under Submissions called 'Rejected stories' with the description 'Don't take it personally - it happens.'
- Save the forum structure.
- Goto Forums/Permissions.
- For the 'Front-page' category, allow registered users to add new posts, and members to do everything, and anonymous users to do nothing.
- For the 'Submit your news' category, allow registered users to add new posts and create new threads, site members everything, and anonymous users nothing.
- For the 'Rejected stories' category, allow site members everything, and registered and anonymous users nothing.
- Save your changes.
You now have a working forum structure. Go to the forum:start page and try out the forums a little.
We now need to make the news/comment forum work on the front page. We will make the following things:
- First, a link that takes the reader directly to the page for creating a new news story.
- Second, a link that takes the reader to all pending news stories (the queue).
- Third, a 'front page forum' list of selected news stories that readers can comment on.
Let's extend the basic home page. First, the news section:
+ News [[module FrontForum category="NNNN" feed="news" feedTitle="mysite" limit="20"]] [[div style="border-bottom: solid #c9d5e7 2px;"]] +++ %%linked_title%% [!--**%%date|%e %b %Y%%**--] %%description%% -- %%comments%% -- by %%author%% %%date|%O ago%% [[/div]] [[/module]]
Wikidot numbers its forum categories sequentially. The 'NNNN' is the category number. To know what this is, go to the 'forum:start' page, then click on the 'Front-page' category and look at the URL. It'll be something like 'http://ffii-test.wikidot.com/forum/c-18396/front-page', and 18396 is the magic number.
Now, let's add links in the right menu to submission. Go back to 'forum:start' and now click on 'Submit your
news' and then 'create a new thread'. The URL will be something like 'http://ffii-test.wikidot.com/forum:new-thread/c/18397'. Copy this.
In the main page, edit the right column to add links (fix the URLs to match your site's name):
[[div style="float:left; width: 28%; padding: 0 1% 0 1%; background-color: #c9d5e7;"]] ++ Links [[div style="font-size:120%"]] >> [http://ffii-test.wikidot.com/forum:new-thread/c/18397 Submit news] >> [http://ffii-test.wikidot.com/forum/c-13357/submit-your-news All stories] [[/div]] [[/div]] ~~~~~~
To make your microsite work on a nice domain, e.g. "mysite.ffii.org", you need to do these things:
- Ask the board for an OK to add a site to the ffii.org domain.
- Ask the system administrators (the polis-help list) to provide you with a DNS alias. Tell them you want it to point to wikidot.com.
- When that has been done, and you can ping the name, go to the 'Adminster site' option and choose 'Custom domain'.
- Set the Custom domain to the DNS alias and click 'save changes'.
If Wikidot accepted the new value, close the browser window, and open one with your new domai alias. You will see your site in all its glory.
- To track the traffic going to your site, register with Google Analytics and then follow the instructions in the '3rd party tools' section of the Administer site menu.
- To customise the stylesheet, e.g. to use red for more aggressive campaigns, consult a CSS specialist.