Adding an infobox to your wiki

As you may or may not know, I’m maintaining not one, but two wikis. One of these is my personal website. In both I’ve added an infobox on the right to make some articles stick out. Here’s how it looks:
 

 
How have I done this you ask? It is really boxes within a box. Let’s go through it line by line. I start with a comment:

<!–Recently added articles–>

 
The comment is followed by the actual code that creates the outside box:
 

{|style=”width:33%; border-spacing:15px; margin:0px;” align=right

 
The above code states that the box width should be 33% of the total window, the spacing around the border should be 15 pixels, it should have no margin and be aligned to the right. We close it at the bottom of the code like this:
 

|}

 
This is only part of the solution though, we need another line to make the box look right. Here it is:
 

|style=”border:1px solid #cedff2;”|

 
This line creates a solid border of one pixel, and colors it a specific blue. These two lines of code gives us the border like so:
 

 
Now that we have the border, or framework, up and running, let’s add some content:
 

{| width=”100%” “

 
This creates a new box. We need a little bit more though:
 

! <h2 style=”margin:0; background:#cedff2; font-size:120%; font-weight:bold; border:1px solid #a3b0bf; text-align:left; padding:0.2em 0.4em;”>Recently added articles</h2>

 
We add some text, “Recently added articles”, a background color for this box. We set the font size to 120%, make it bold, and add a solid border. We align the text to the left, and make sure the text aligns correctly. Once more we close the code as above.
 
Now we’re starting to make things happen. Here’s how it looks now:
 

 
Now we need to start adding some text and links. We do this inside the second box, and here’s what we type:
 

|-
|
*[[Home Entertainment system/Sound system | Sound system (5.1)]] (April 18th, 2008)
*[[Taking Screenshots of DVD’s]] (April 16th, 2008)
*[[Home Entertainment system/Flat-panel TV | Flat-panel TV]] (April 11th, 2008)
*[[My favorite Firefox extensions]] (March 31st, 2008)
*[[Second day stew]] (March 24th, 2008)

The first two lines place the text correctly into the box, as a table. The subsequent lines start out with a star, which creates a bullet point, and then a link to the article. Once that is done we add the date it’s been added (In this case, but other information could be entered at need or will).
 
What we have now looks like this:
 

 
We then go on to add another box like the one above, for an end result that, codewise, looks like this:
 

<!–Recently added articles–>
{|style=”width:33%; border-spacing:15px; margin:0px;” align=right
|style=”border:1px solid #cedff2;”|
{| width=”100%” background:#f5faff;”
! <h2 style=”margin:0; background:#cedff2; font-size:120%; font-weight:bold; border:1px solid #a3b0bf; text-align:left; padding:0.2em 0.4em;”>Recently added articles</h2>
|-
|
*[[Home Entertainment system/Sound system | Sound system (5.1)]] (April 18th, 2008)
*[[Taking Screenshots of DVD’s]] (April 16th, 2008)
*[[Home Entertainment system/Flat-panel TV | Flat-panel TV]] (April 11th, 2008)
*[[My favorite Firefox extensions]] (March 31st, 2008)
*[[Second day stew]] (March 24th, 2008)
|}
<!–Recently edited articles–>
{| width=”100%” background:#f5faff;”
! <h2 style=”margin:0; background:#cedff2; font-size:120%; font-weight:bold; border:1px solid #a3b0bf; text-align:left; padding:0.2em 0.4em;”>Recently edited articles</h2>
|-
|
*[[My on-site troubleshooting kit]] (April 22nd, 2008)
*[[Reading List]] (April 19th, 2008)
*[[Customizing MediaWiki]] (April 16th, 2008)
|}
|}
<!–Recently added and edited articles info box ends–>

Here’s how the finished result looks like: