From Wikinews, the free news source you can write!
Jump to navigation Jump to search
|1=Free text that may be specified as an addition following the template's two-paragraph welcome at the foot of the first tab. This need not be specified as "|1=" unless it is not used as the first parameter, or it contains the "=" symbol.
|name=Used to specify a name to be displayed, where appropriate, within the text of the template.
Example: {{Howdy|name=Eric A. Blair}} Will cause the text "Welcome, Eric A. Blair! Thank you for joining..." to be shown in the template.
This {{Howdy|If English is not your first language, you may wish to visit the [[Main Page]] and look down the left sidebar for an alternate language project.|name=Shi Tao}}
displays as:

Welcome to Wikinews

A nice cup of coffee for you while you get started

Getting started as a contributor
How to write an article
  1. Pick something current?
  2. Use two independent sources?
  3. Read your sources before writing the story in your own words?. Do choose a unique title? before you start.
  4. Follow Wikinews' structure? for articles, answering as many of who what when where why and how? as you can; summarised in a short, two- or three-sentence opening paragraph. Once complete, your article must be three or more paragraphs.
  5. If you need help, you can add {{helpme}} to your talkpage, along with a question, or alternatively, just ask?

  • Use this tab to enter your title and get a basic article template.
    [RECOMMENDED. Starts your article through the semi-automated {{develop}}—>{{review}}—>{{publish}} collaboration process.]

 Welcome, Shi Tao! Thank you for joining Wikinews; we'd love for you to stick around and get more involved. To help you get started we have an essay that will guide you through the process of writing your first full article. There are many other things you can do on the project, but its lifeblood is new, current, stories written neutrally.
As you get more involved, you will need to look into key project policies and other discussions you can participate in; so, keep this message on this page and refer to the other links in it when you want to learn more, or have any problems. If English is not your first language, you may wish to visit the Main Page and look down the left sidebar for an alternate language project.

Wikipedia's puzzle-globe logo, © Wikimedia Foundation
Wikipedia's puzzle-globe logo, © Wikimedia Foundation
  Used to contributing to Wikipedia? See here.
All Wikimedia projects have rules. Here are ours.

Listed here are the official policies of the project, you may be referred to some of them if your early attempts at writing articles don't follow them. Don't let this discourage you, we all had to start somewhere.

The rules and guides laid out here are intended to keep content to high standards and meet certain rules the Wikimedia Foundation applies to all projects. It may seem like a lot to read, but you do not have to go through it all in one sitting, or know them all before you can start contributing.

Remember, you should enjoy contributing to the project. If you're really stuck come chat with the regulars. There's usually someone in chat who will be happy to help, but they may not respond instantly.

The core policies
Places to go, people to meet

Wiki projects work because a sense of community forms around the project. Although writing news is far more individualistic than contributing to Wikipedia, the free encyclopedia, people often need minor help with things like spelling and copyediting. If a story isn't too old you might be able to expand it, or if it is disputed you may be able to find some more sources and rescue it before it is listed for deletion.

There are always discussions going on about how the site could be improved, and your input is of value. Check the links here to see where you can give input to the running of the Wikinews project.

Find help and get involved
Write your first article for Wikinews!

Use the following box to help you create your first article. Simply type in a title to your story and press "Create page". Then start typing text to your story into the new box that will come up. When you're done, press "save page". That's all there is to it!

It is recommended you read the article guide before starting. Also make sure to check the list of recently created articles to see if your story hasn't already been reported upon.

The main content, and all the complexity, for this template can be found at {{Howdy/content}}
Used templates
The following templates are used to construct the complete displayed Howdy message.
Required CSS
May not be as-current compared to the live stylesheet.
As-found in MediaWiki:Common.css
##Tabber stuff. See code in mediawiki:common.js 
/*===Wikinews specific==== */
div.horizTabBox ul.tabbernav li a {
margin-left: 15px;
border-bottom: solid 1px #7ec9fd;
-moz-border-radius:1em 1em 0 0; /* this should be replaced with images for browsers that don't support it somehow*/
/*webkit doesn't like too big radii or having it in the shorthand form. Make sure radi < 1.7em */
border-radius:1em 1em 0 0;
div.horizTabBox ul.tabbernav li.tabberactive a
 background-color: #bce1ff;
 border-bottom: 3px solid #bce1ff;
div.horizTabBox .tabbertab 
border:solid 2px #7ec9fd;
div.horizTabBox ul.tabbernav li a:hover
 color: #000;
 background: #bce1ff;
 border-bottom: 3px solid #bce1ff;
div.horizTabBox ul.tabbernav li.tabberactive a:hover
 color: #000;
div.horizTabBox {
/* IMPORTANT: keep width:80% above or it will suck on IE*/
/* pict box */
div.pictChanger ul.tabbernav {line-height: 2.4;}
div.pictChanger ul.tabbernav li a {border: #CCC 1px solid}
div.pictChanger {width:400px;}
div.pictChanger div.tabbertab {text-align:left;}
div.tabberNoBorder div.tabbertab, 
div.tabberNoBorder ul.tabbernav {
    border: none;
===Generic defaults===
Copied from http://www.barelyfitz.com/projects/tabber/example.css used under mit license
see http://www.barelyfitz.com/projects/tabber/
/* $Id: example.css,v 1.5 2006/03/27 02:44:36 pat Exp $ */
  REQUIRED to hide the non-active tab content.
  But do not hide them in the print stylesheet!
.tabberlive .tabbertabhide {
  .tabber = before the tabber interface is set up
  .tabberlive = after the tabber interface is set up
.tabber {
.tabberlive {
  ul.tabbernav = the tab navigation list
  li.tabberactive = the active tab
 padding: 3px 0;
 border-bottom: 1px solid #CCC;
 font: bold 12px Verdana, sans-serif;
ul.tabbernav li
 list-style: none;
 margin: 0;
 display: inline;
ul.tabbernav li a
 padding: 3px 0.5em;
 margin-left: 3px;
 border: 1px solid #ccc;
 border-bottom: none;
 background: #f2f7ff;
 text-decoration: none;
ul.tabbernav li a:link { color: #448; }
ul.tabbernav li a:visited { color: #667; }
ul.tabbernav li a:hover
 color: #000;
 background: #fff9f2;
 border-color: #CCC;
ul.tabbernav li.tabberactive a
 background-color: #fff;
 border-bottom: 1px solid #fff;
ul.tabbernav li.tabberactive a:hover
 color: #000;
 background: white;
 border-bottom: 1px solid white;
  .tabbertab = the tab content
  Add style only after the tabber interface is set up (.tabberlive)
.tabberlive .tabbertab {
 border:1px solid #CCC;
 /* If you don't want the tab size changing whenever a tab is changed
    you can set a fixed height */
 /* height:200px; */
 /* If you set a fix height set overflow to auto and you will get a
    scrollbar when necessary */
 /* overflow:auto; */
/* If desired, hide the heading since a heading is provided by the tab */
.tabberlive .tabbertab h2 {
.tabberlive .tabbertab h3 {
/* Example of using an ID to set different styles for the tabs on the page */
.tabberlive#tab1 {
.tabberlive#tab2 {
.tabberlive#tab2 .tabbertab {
Required JavaScript
May not be as-current compated to the live code.
As-found in MediaWiki:Common.js
==Tabber code==
This was originally from http://www.barelyfitz.com/projects/tabber/
This has been modified very slightly for wikinews by [[user:Bawolff]] (you can use any of my modifications under the same license as the original author specified)
Please note, only the tabber code is under the MIT license. (the rest is probably either cc-by, GPL, or some combination thereof. its not really clear)
Note i'm slowly modifying to use hasClass() as it is supposedly more efficient
  $Id: tabber.js,v 1.9 2006/04/27 20:51:51 pat Exp $
  tabber.js by Patrick Fitzgerald pat@barelyfitz.com
  Documentation can be found at the following URL:
  License (http://www.opensource.org/licenses/mit-license.php)
  Copyright (c) 2006 Patrick Fitzgerald, modifed by Bawolff
  Permission is hereby granted, free of charge, to any person
  obtaining a copy of this software and associated documentation files
  (the "Software"), to deal in the Software without restriction,
  including without limitation the rights to use, copy, modify, merge,
  publish, distribute, sublicense, and/or sell copies of the Software,
  and to permit persons to whom the Software is furnished to do so,
  subject to the following conditions:
  The above copyright notice and this permission notice shall be
  included in all copies or substantial portions of the Software.
function tabberObj(argsObj)
  var arg; /* name of an argument to override */
  /* Element for the main tabber div. If you supply this in argsObj,
     then the init() method will be called.
  this.div = null;
  /* Class of the main tabber div */
  this.classMain = "tabber";
  /* Rename classMain to classMainLive after tabifying
     (so a different style can be applied)
  this.classMainLive = "tabberlive";
  /* Class of each DIV that contains a tab */
  this.classTab = "tabbertab";
  /* Class to indicate which tab should be active on startup */
  this.classTabDefault = "tabbertabdefault";
  /* Class for the navigation UL */
  this.classNav = "tabbernav";
  /* add space between tabs to force line break. use class UseTabBreaks*/
  this.spaceTabs = false;
  /* When a tab is to be hidden, instead of setting display='none', we
     set the class of the div to classTabHide. In your screen
     stylesheet you should set classTabHide to display:none.  In your
     print stylesheet you should set display:block to ensure that all
     the information is printed.
  this.classTabHide = "tabbertabhide";
  /* Class to set the navigation LI when the tab is active, so you can
     use a different style on the active tab.
  this.classNavActive = "tabberactive";
  /* Elements that might contain the title for the tab, only used if a
     title is not specified in the TITLE attribute of DIV classTab.
  this.titleElements = ['h2','h3','h4','h5','h6'];
  /* Should we strip out the HTML from the innerHTML of the title elements?
     This should usually be true.
  this.titleElementsStripHTML = true;
  /* If the user specified the tab names using a TITLE attribute on
     the DIV, then the browser will display a tooltip whenever the
     mouse is over the DIV. To prevent this tooltip, we can remove the
     TITLE attribute after getting the tab name.
  this.removeTitle = true;
  /* If you want to add an id to each link set this to true */
  this.addLinkId = false;
  /* If addIds==true, then you can set a format for the ids.
     <tabberid> will be replaced with the id of the main tabber div.
     <tabnumberzero> will be replaced with the tab number
       (tab numbers starting at zero)
     <tabnumberone> will be replaced with the tab number
       (tab numbers starting at one)
     <tabtitle> will be replaced by the tab title
       (with all non-alphanumeric characters removed)
  this.linkIdFormat = '<tabberid>nav<tabnumberone>';
  /* You can override the defaults listed above by passing in an object:
     var mytab = new tabber({property:value,property:value});
  for (arg in argsObj) { this[arg] = argsObj[arg]; }
  /* Create regular expressions for the class names; Note: if you
     change the class names after a new object is created you must
     also change these regular expressions.
  this.REclassMain = new RegExp('\\b' + this.classMain + '\\b', 'gi');
  this.REclassMainLive = new RegExp('\\b' + this.classMainLive + '\\b', 'gi');
  this.REclassTab = new RegExp('\\b' + this.classTab + '\\b', 'gi');
  this.REclassTabDefault = new RegExp('\\b' + this.classTabDefault + '\\b', 'gi');
  this.REclassTabHide = new RegExp('\\b' + this.classTabHide + '\\b', 'gi');
  /* Array of objects holding info about each tab */
  this.tabs = new Array();
  /* If the main tabber div was specified, call init() now */
  if (this.div) {
    /* We don't need the main div anymore, and to prevent a memory leak
       in IE, we must remove the circular reference between the div
       and the tabber object. */
    this.div = null;
  Methods for tabberObj
tabberObj.prototype.init = function(e)
  /* Set up the tabber interface.
     e = element (the main containing div)
  childNodes, /* child nodes of the tabber div */
  i, i2, /* loop indices */
  t, /* object to store info about a single tab */
  defaultTab=0, /* which tab to select by default */
  DOM_ul, /* tabbernav list */
  DOM_li, /* tabbernav list item */
  DOM_a, /* tabbernav link */
  aId, /* A unique id for DOM_a */
  headingElement; /* searching for text to use in the tab */
  /* Verify that the browser supports DOM scripting */
  if (!document.getElementsByTagName) { return false; }
  /* If the main DIV has an ID then save it. */
  if (e.id) {
    this.id = e.id;
  /* Clear the tabs array (but it should normally be empty) */
  this.tabs.length = 0;
  /* Loop through an array of all the child nodes within our tabber element. */
  childNodes = e.childNodes;
  for(i=0; i < childNodes.length; i++) {
    /* Find the nodes where class="tabbertab" */
    if(childNodes[i].className &&
       hasClass(childNodes[i], this.classTab)) {
      /* Create a new object to save info about this tab */
      t = new Object();
      /* Save a pointer to the div for this tab */
      t.div = childNodes[i];
      /* Add the new object to the array of tabs */
      this.tabs[this.tabs.length] = t;
      /* If the class name contains classTabDefault,
	 then select this tab by default.
      if (childNodes[i].className.match(this.REclassTabDefault)) {
	defaultTab = this.tabs.length-1;
  /* Create a new UL list to hold the tab headings */
  DOM_ul = document.createElement("ul");
  DOM_ul.className = this.classNav;
  /* Loop through each tab we found */
  for (i=0; i < this.tabs.length; i++) {
    t = this.tabs[i];
    /* Get the label to use for this tab:
       From the title attribute on the DIV,
       Or from one of the this.titleElements[] elements,
       Or use an automatically generated number.
    t.headingText = t.div.title;
    /* Remove the title attribute to prevent a tooltip from appearing */
    if (this.removeTitle) { t.div.title = ''; }
    if (!t.headingText) {
      /* Title was not defined in the title of the DIV,
	 So try to get the title from an element within the DIV.
	 Go through the list of elements in this.titleElements
	 (typically heading elements ['h2','h3','h4'])
      for (i2=0; i2<this.titleElements.length; i2++) {
	headingElement = t.div.getElementsByTagName(this.titleElements[i2])[0];
	if (headingElement) {
	  t.headingText = headingElement.innerHTML;
	  if (this.titleElementsStripHTML) {
	    t.headingText.replace(/<br>/gi," ");
	    t.headingText = t.headingText.replace(/<[^>]+>/g,"");
    if (!t.headingText) {
      /* Title was not found (or is blank) so automatically generate a
         number for the tab.
      t.headingText = i + 1;
    /* Create a list element for the tab */
    DOM_li = document.createElement("li");
    /* Save a reference to this list item so we can later change it to
       the "active" class */
    t.li = DOM_li;
    /* Create a link to activate the tab */
    DOM_a = document.createElement("a");
    DOM_a.href = "javascript:void(null);";
    DOM_a.title = t.headingText;
    DOM_a.onclick = this.navClick;
    /* Add some properties to the link so we can identify which tab
       was clicked. Later the navClick method will need this.
    DOM_a.tabber = this;
    DOM_a.tabberIndex = i;
    /* Do we need to add an id to DOM_a? */
    if (this.addLinkId && this.linkIdFormat) {
      /* Determine the id name */
      aId = this.linkIdFormat;
      aId = aId.replace(/<tabberid>/gi, this.id);
      aId = aId.replace(/<tabnumberzero>/gi, i);
      aId = aId.replace(/<tabnumberone>/gi, i+1);
      aId = aId.replace(/<tabtitle>/gi, t.headingText.replace(/[^a-zA-Z0-9\-]/gi, ''));
      DOM_a.id = aId;
    /* Add the link to the list element */
    /* Add the list element to the list */
     /* add a space to get line breaks */
    if (this.spaceTabs) {
    DOM_ul.appendChild(document.createTextNode(" "));
  /* Add the UL list to the beginning of the tabber div */
  e.insertBefore(DOM_ul, e.firstChild);
  /* Make the tabber div "live" so different CSS can be applied */
  e.className = e.className.replace(this.REclassMain, this.classMainLive);
  /* Activate the default tab, and do not call the onclick handler */
  /* If the user specified an onLoad function, call it now. */
  if (typeof this.onLoad == 'function') {
  return this;
tabberObj.prototype.navClick = function(event)
  /* This method should only be called by the onClick event of an <A>
     element, in which case we will determine which tab was clicked by
     examining a property that we previously attached to the <A>
     Since this was triggered from an onClick event, the variable
     "this" refers to the <A> element that triggered the onClick
     event (and not to the tabberObj).
     When tabberObj was initialized, we added some extra properties
     to the <A> element, for the purpose of retrieving them now. Get
     the tabberObj object, plus the tab number that was clicked.
  rVal, /* Return value from the user onclick function */
  a, /* element that triggered the onclick event */
  self, /* the tabber object */
  tabberIndex, /* index of the tab that triggered the event */
  onClickArgs; /* args to send the onclick function */
  a = this;
  if (!a.tabber) { return false; }
  self = a.tabber;
  tabberIndex = a.tabberIndex;
  /* Remove focus from the link because it looks ugly.
     I don't know if this is a good idea...
  /* If the user specified an onClick function, call it now.
     If the function returns false then do not continue.
  if (typeof self.onClick == 'function') {
    onClickArgs = {'tabber':self, 'index':tabberIndex, 'event':event};
    /* IE uses a different way to access the event object */
    if (!event) { onClickArgs.event = window.event; }
    rVal = self.onClick(onClickArgs);
    if (rVal === false) { return false; }
  return false;
tabberObj.prototype.tabHideAll = function()
  var i; /* counter */
  /* Hide all tabs and make all navigation links inactive */
  for (i = 0; i < this.tabs.length; i++) {
tabberObj.prototype.tabHide = function(tabberIndex)
  var div;
  if (!this.tabs[tabberIndex]) { return false; }
  /* Hide a single tab and make its navigation link inactive */
  div = this.tabs[tabberIndex].div;
  /* Hide the tab contents by adding classTabHide to the div */
  if (!div.className.match(this.REclassTabHide)) {
    div.className += ' ' + this.classTabHide;
  return this;
tabberObj.prototype.tabShow = function(tabberIndex)
  /* Show the tabberIndex tab and hide all the other tabs */
  var div;
  if (!this.tabs[tabberIndex]) { return false; }
  /* Hide all the tabs first */
  /* Get the div that holds this tab */
  div = this.tabs[tabberIndex].div;
  /* Remove classTabHide from the div */
  div.className = div.className.replace(this.REclassTabHide, '');
  /* Mark this tab navigation link as "active" */
  /* If the user specified an onTabDisplay function, call it now. */
  if (typeof this.onTabDisplay == 'function') {
    this.onTabDisplay({'tabber':this, 'index':tabberIndex});
  return this;
tabberObj.prototype.navSetActive = function(tabberIndex)
  /* Note: this method does *not* enforce the rule
     that only one nav item can be active at a time.
  /* Set classNavActive for the navigation list item */
  this.tabs[tabberIndex].li.className = this.classNavActive;
  return this;
tabberObj.prototype.navClearActive = function(tabberIndex)
  /* Note: this method does *not* enforce the rule
     that one nav should always be active.
  /* Remove classNavActive from the navigation list item */
  this.tabs[tabberIndex].li.className = '';
  return this;
function tabberAutomatic(tabberArgs)
  /* This function finds all DIV elements in the document where
     class=tabber.classMain, then converts them to use the tabber
     tabberArgs = an object to send to "new tabber()"
    tempObj, /* Temporary tabber object */
    divs, /* Array of all divs on the page */
    i; /* Loop index */
  if (!tabberArgs) { tabberArgs = {}; }
  /* Create a tabber object so we can get the value of classMain */
  tempObj = new tabberObj(tabberArgs);
  /* Find all DIV elements in the document that have class=tabber */
  /* First get an array of all DIV elements and loop through them */
  divs = document.getElementsByTagName("div");
  for (i=0; i < divs.length; i++) {
    /* Is this DIV the correct class? */
    if (divs[i].className &&
	hasClass(divs[i], tempObj.classMain)) {
    if (hasClass(divs[i], "UseTabBreaks")) {
        tabberArgs.spaceTabs =  true;
      /* Now tabify the DIV */
      tabberArgs.div = divs[i];
      divs[i].tabber = new tabberObj(tabberArgs);
Begin special case links for the howdy template.
This is kind of ugly, but as good a place as any to stick the code.
Creates magic links for certain ids, in certain tab boxes
  var howdy = document.getElementById('HowdyWelcomeTemplate');
  if (howdy) {
    var policy = document.getElementById('HowdyWelcomeTemplatePolicy');
    var talk = document.getElementById('HowdyWelcomeTemplateDiscussions');
    var write = document.getElementById('HowdyWelcomeTemplateWrite');
    var a;
    if (talk) {
      a = document.createElement('a');
      a.href = "#";
      a.onclick = function() {howdy.tabber.tabShow(2); return false;} //show tab 3
    if (policy) {
      a = document.createElement('a');
      a.href = "#";
      a.onclick = function() {howdy.tabber.tabShow(1); return false;} //show tab 2
    if (write)  {
      a = document.createElement('a');
      a.href = "#";
      a.onclick = function()  {howdy.tabber.tabShow(3); return false;} //show tab 4
End special case code for special links
  return this;
function tabberAutomaticOnLoad(tabberArgs)
  /* This function adds tabberAutomatic to the window.onload event,
     so it will run after the document has finished loading.
//  var oldOnLoad;
  if (!tabberArgs) { tabberArgs = {}; }
  /* Taken from: http://simon.incutio.com/archive/2004/05/26/addLoadEvent */
  /*oldOnLoad = window.onload;
  if (typeof window.onload != 'function') {
    window.onload = function() {
  } else {
    window.onload = function() {
//Use the wiki onload
addOnloadHook(function() {
/* Run tabberAutomaticOnload() unless the "manualStartup" option was specified */
if (typeof tabberOptions == 'undefined') {
} else {
  if (!tabberOptions['manualStartup']) {
End Tabber. Note, code after this line probably is not under the MIT license.