I searched the web and couldn’t find an explanation. I seemed to have followed the markdown instructions properly. By trial and error I managed to come up with a solution – I needed a blank line both before and after the list.

My original markup that displayed incorrectly:

My new markup that worked:

You learn something new every day!

• WP_DBManager is a nice plug-in that will perform periodic backups of your database. This plugin requires Wordpress 2.8 or higher.
• But more importantly I really like the new dashboard layout. Everything is there and easy to find. The quick-edit feature for posts and pages is a real time saver. And so far all my plugins are still working!

Make sure you remember to save wp-config.php from your old version of Wordpress. This contains the database access info and must be copied into the new installation.

According to the Worpress Codex, any page can be set as the front page simply by editing the settings. First you must create two pages – the html page you want to use as the main landing page (call it “Home”) and a blank blog page (call it “Blog”).

In the Wordpress Admin interface select Settings > Reading. Look for the section titled “Front page displays” and select “A static page (select below)”. In the drop-down box for front page choose your “Home” page. In the drop-down list for Posts page choose your “Blog” page.

You will now have a new static front page and a blog page.

Finally, depending on your theme, you might have 2 navigation links to the home page. You can remove the duplicate easily by first determining the page number used for the static front page.

(From Wordpress.com: You can determine the page number by going to Pages->Edit and hovering over the title of the page. The status bar of your browser will display a URL with a numeric ID at the end. This is the page ID.)

Determine the file where the navigation is displayed (it may be header.php) and find the wp_list_pages statement. Exclude the static front page:

wp_list_pages('exclude=7');

Now, if you want your home page to be more dynamic you can create a custom page template for the home page. To learn more about using page templates, visit the Codex here.

This should be all you need to do to create a static front page and a secondary blog page. This change allows the Wordpress platform to be used on most websites, with the blogging secondary to the main website content.

Step 1 – Create a custom artistic media brush

Create a small circle, 100px by 100px, with black fill and no outline. (Hint – hold the CTRL key and use the ellipse tool to create a perfect circle).

Select the artistic media tool and select the sprayer. Select “New Spraylist” from the drop-down list. Click on your black circle then select “Add to spraylist”. The sprayer should be set to “sequentially” and the spacing should be slightly larger than the circle diameter – we will set it to .4″ for this example.

You now have the spraylist needed to create the halftone circles.

Step 2 – Create the object to be filled

We will leave our original black dot as the center of our illustration (select the dot and hit “p” to center to the page). Stretch it larger to to 315px by 315px. We now create a large square that will define the outside boundary of the halftone object. Create this large square with no fill and with a hairline black outline, sized 2400px by 2400px, and centered on the page.

Step 3 – Apply the artistic media to the outer square

Select the square with the pick tool, then select the Artistic Media tool. Re-select the spraylist we created in step one. You should now see a square of circles.

From the object manager select the square with the artistic media and break it apart. You will now have a group of individual circles. Delete the original square to get rid of the outline.

You should now colour the outer circles 10% black. Select and ungroup the outer dots.

Step 4 – Blend

We start by making a horizontal blend line from the center dot to the two outsides. Drag a horizontal guideline down from the top ruler and center it on the middle of the center dot. Make sure the left and right small dots are lined up on the guideline (enable “snap to guideline” , hold the ctrl key, and drag the outer dots up or down to the the guideline).

Now select the interactive blend tool, click the center black dot and drag the cursor to the left gray dot. When you release the cursor you are left with this:

It’s pretty but not what we’re after! To get the halftone effect we must adjust the blend settings. Reduce the numer of steps down to 3:

Select the blend group with the pick tool, break it apart and ungroup the dots. This will allow us to create vertical blends from each of these dots.

Next drag a vertical guideline from the left ruler and center it on the black center dot. Align the top and bottom gray dots on the guideline. Blend from the center dot to the top gray dot (using 3 steps), and then again from the center to the bottom gray dot. Your result should look like this:Move the vertical guideline to the left and center it on the large gray dot to the left. Snap the closest small gray dots to the guideline and blend to the top and bottom. (Delete any excess small gray dots that are in the way) Remember to set the number of steps to 3 each time.Repeat for the remaining 3 dots on the center horizontal line. Delete any excess outer gray dots when they get in your way. You will delete all of the vertical dots when you get to the smallest dot on the left side. Your final result should look like this:You can now delete all the outer dots on the right. Select all the rows and columns left of the center vertical row, copy, paste, and flip horizontally. You can now shift the pasted dots to the right to get the complete picture:If you want the resulting shape to be a circle, break apart the artisitic media, ungroup, and delete any dots from the outer edge of the image.

Step 6 – Play Around

This technique can be used with many different shapes to achieve a variety of effects. The blend tool has a lot of options – try cycling through colours, orient shapes in different directions, then blend.

Here are some more examples of what can be accomplished.

In this example  we will create 3 buttons. Two of the buttons will open a hidden div from which other navigation options are presented, the third button will be a direct link to a new page. You can view a demo here.

To begin, create the navigation menu. The first button has a hidden div with id ‘button1′ containing 3 sub-menu items and a link to close the box. The second button also has a hidden div but this one has a lot of entires requiring a scroll bar. The third button has no sub-menu and hence no hidden div. 

<ul class="maintabs clearfix">
  <li><a id='button1' href='#'>First Button</a>
      <div id='button1div' class='popup clearfix' style='position:absolute; top:100px; left:65px; height: 180px; display:none; overflow: auto'>
        <ul>
           <li><a href="# onclick="Animation(document.getElementById('button1div')).to('height', '0px').to('opacity', 0).hide().go(); return false;">Close this window</a>
           <li><a href='page1a.php'>Option A</a></li>
           <li><a href='page1b.php'>Option B</a></li>
           <li><a href='page1c.php'>Option C</a></li>
        </ul>
      </div>
  </li>
  <li><a id='button2' href='#'>Second Button</a>
      <div id='button2div' class='popup clearfix' style='position:absolute; top:100px; left:150px; height: 180px; display:none; overflow: auto'>
        <ul>
           <li><a href="#" onclick="Animation(document.getElementById('button1div')).to('height', '0px').to('opacity', 0).hide().go(); return false;">Close this window</a>
           <li><a href='page1a.php'>Option A</a></li>
           <li><a href='page1b.php'>Option B</a></li>
           <li><a href='page1c.php'>Option C</a></li>
           <li><a href='page1d.php'>Option D</a></li>
           <li><a href='page1e.php'>Option E</a></li>
           <li><a href='page1f.php'>Option F</a></li>
           <li><a href='page1g.php'>Option G</a></li>
           <li><a href='page1h.php'>Option H</a></li>
           <li><a href='page1i.php'>Option I</a></li>
           <li><a href='page1j.php'>Option J</a></li>
           <li><a href='page1k.php'>Option K</a></li>
           <li><a href='page1l.php'>Option L</a></li>
        </ul>
     </div>
  </li>
  <li><a id='button3' href='anotherpage.php'>Third Button</a></li>
</ul>

Next we need some FBJS to detect when the mouse moves over the navigation links. In this example I have made each hidden div the same size so they can share the code. It would be simple to change this to use a different size/shape/fade for each div if required. The script first determines which object fired the event. It then closes all other hidden divs and fades up the required new div. 

<script>
function mouseaction(evt) {
eventFiredBy_ObjectId = evt.target.getId();
if (eventFiredBy_ObjectId == 'button1') targetId = document.getElementById('button1div');
else if (eventFiredBy_ObjectId == 'button2') targetId = document.getElementById('button2div');
 
//First hide all other divs
if (eventFiredBy_ObjectId != 'button1') document.getElementById('button1div').setStyle({display: 'none'});
if (eventFiredBy_ObjectId != 'button2') document.getElementById('button2div').setStyle({display: 'none'});
 
// then make the new div visible:
if (eventFiredBy_ObjectId != 'button3') {
Animation(targetId).to('height', 'auto').from('0px').to('width', '150px').from('0px').to('opacity', 1).from(0).show().go();
}
}
 
//add event listener to divs (mouseover & mouseout)
document.getElementById('button1').addEventListener('mouseover',mouseaction);
document.getElementById('button2').addEventListener('mouseover',mouseaction);
document.getElementById('button3').addEventListener('mouseover',mouseaction);
 
</script>


Facebook provides a “blind” effect which would prevent the text rolling in the box as it opens. We choose not to use it here since we need the scrollbar on the second hidden div.
 
Below the navigation list you need a div that has enough height to exceed the largest hidden div. This will ensure the entire hidden div will be revealed on the mouseover.

To navigate through the menu, the user will mouse over the tabs to open the sub-menu, if any. The sub-menu will remain displayed until the user mouses over another tab or until they select a link from the sub-menu.

The complete example source code is available for download in a text file here.

There are currently 29 bugs reported against the Facebook image caching mechanism. Some of these problems have been around for over a year, so there is valid reason to be concerned.

Fortunately there is a method you can use that forces Facebook to re-cache your image when calling setFBML.

By appending the current time to the image name, Facebook believes the image to be new and saves it as a new image.

<img src="http://www.mysite.com/images/image.jpg?refresh=<? echo time(); ?>" />

Use this on all your profile box images to ensure you always have valid content displayed.

However, for those application developers who want to go one step further, here is a description of how to support the profile box on the user’s Wall tab using the PHP library.

1. Client Library

First, make sure you have the latest client library. Visit the the Facebook client library wiki page for more information and a link to the download. Note that this library drops support for some old functions such as require_add, so if you haven’t kept your application up-to-date now is the time to do so. The PHP 5 version of the library contains the call you need. If you are using PHP 4 then you need to manually update the library call to look like this:

function profile_setFBML($markup, $uid = null, $profile=”, $profile_action=”, $mobile_profile=”, $profile_main=”) {
return $this->call_method(’facebook.profile.setFBML’, array(’markup’ => $markup,
‘uid’ => $uid,
‘profile’ => $profile,
‘profile_action’ => $profile_action,
‘mobile_profile’ => $mobile_profile,
‘profile_main’ => $profile_main));

2. Reset FBML

For the profile box to appear on the Wall tab you must load the FBML that will appear there. This is done using the same function that was used to load the old-style profile, only now there is a new parameter “profile_main”. In PHP, use the following code to load the profile boxes:

$fbml = "<fb:wide>This is a wide profile box on the Boxes tab.</fb:wide>";
$fbml .= "<fb:narrow>This is a narrow profile box on the Boxes tab.</fb:narrow>";
$fbml_main = "This is the Wall tab profile data";
$result = $facebook->api_client->profile_setFBML(NULL, $user_id, $fbml, NULL, NULL, $fbml_main);
echo "set FBML: result = ".var_export($result,true);


If your return code is NULL, all is well. If not, check the return codes documented on the wiki page.

3. Add to Profile Button

If you want to make it really easy for the user, program an “Add to Profile” button to appear on a canvas page. If the user has not yet added a profile box (on the Boxes or Wall tabs) and the FBML for profile_main was successfully loaded in step 2 then the button will appear. If there is already a profile box displayed, then the button will not appear. The code for the button is simple:

<fb:add-section-button section="profile" />


Note this cannot appear within the dashboard.

That’s it! You should now have the ability to display a profile box on either the Wall tab or the Boxes tab.