The Holiday 2010 project of cleaning all my hard drives and syncing my iTunes library across three computers and two iOS devices has come to a close – or as much of a close as any tech project reaches.
Learn More
Just received a “What’s Brewing” this month type email from Tim Hortons. In the end, it was a pretty weak email because with images turned off, almost nothing came through. If we ignore this and turn the images on, it’s a great single column email template
Learn MoreI’m reading an article by Andrew Careaga called “Why researchers should blog” and thought I would note some of the best points for you.
Andrew’s blog starts with the case of Peter Janiszewski, a health sciences researcher, who released one of his publications as a five part blog series and went from unknown to being read by 12,000 people and covered by MSNBC.
Learn More
Just got this email from Bootlegger – it caught my eye for two reasons. First, it uses a Custom FBML tab that displays differently depending on whether or not the visitor is a fan. Second, I really like the way that the display images uses white spacing.
Above: The Bootlegger Fan Page if you aren’t a fan …
Take a look at the display picture. It is very simple, but the spacing between the photo of the models, and the brand creative below the photo, makes it seem like Bootlegger has managed to earn themselves two display images instead of one. Because Facebook has a white background – all you’ve got to do is throw in some white spacing and fake it.
Below: The Bootlegger Fan Page if you are a fan …
Here’s what’s going on: Facebook is checking to see whether each visitor is a Facebook Fan of Bootlegger. If they are a fan, then they are shown specific content. If they are not a fan, they are shown completely different content.
I think this is really effective! What could be more clear than the giant LIKE with a big blue arrow. It is also very easy to do …
A few more screenshots:
Above: The contest landing page for Bootlegger’s become a fan and win a $500 shopping spree contest.
Below: The email campaign sent out to Bootlegger’s customer database, promoting the shopping spree contest.
Today I replaced two static links with a custom WordPress menu in a site that I am working on.
Here is where I am starting with, in static XHTML and CSS:
And here is the code:
[code]<div id="siteindex"><a href="sitemap.html">Site Index</a></div><br /><br />
<div id="quicklinks"><a href="quicklinks.html">Ivey Quicklinks</a></div>[/code]
Below is the process for converting the above into an identical end result, built with a WordPress custom menu instead of static XHTML.
Creating the actual custom menu in WordPress
- In your WordPress dashboard, under Appearance, go to Menus.
- Enter a new menu name (I recommend one word) and hit Create Menu.
- Add the pages you would like to include and drag/drop into the desired order.
- Go to Screen Options and check the CSS Classes box.
- Expand each page in your menu and add the desired class.
Note: For me, I added the same class to each of my items (“whitelinks”). - Save Menu.
Pulling in my custom menu
- First, I need the wp nav menu code
[code]<?php wp_nav_menu($args); ?>[/code] - Then you tell your site which of your custom menus that you want to display – mine is called Sitemap.
[code]’menu’ => ‘Sitemap'[/code] - Then I define what class the div surrounding my menu is.
[code] ‘container_class’ => ‘siteindex'[/code] - Finally, I define the ID of the div.
[code]’container_id’ => ‘navmenu’ [/code] - And I end up with:
[code]<?php wp_nav_menu( array(‘menu’ => ‘sitemap’, ‘container_class’ => ‘siteindex’, ‘container_id’ => ‘navmenu’ )); ?>[/code]Note: the $args got replaced with array(), and each detail (argument) that I added is separated by a comma and a space.
Formatting my custom menu
Originally, my menu items were formatted by a class on the <a> tag. When we use PHP to pull a dynamic menu into WordPress, the menu is pulled in as a list (ul) – each item is a new list item (li). While WordPress does allow me to define a CSS class for each item of my custom menu, it applies this class to the <li> tag for that menu item, rather than the <a> tag.
So, what I have to do is tell WordPress to format a link within a specific class:
[css]a.whitelink {font-size: 11px; color: #FFFFFF; text-decoration: none;}<br /><br />
a.whitelink:hover {text-decoration: underline;}[/css]
My last step is adding the code to take my bulleted list and turn it into a horizontal menu (items all on one line/side by side):
[code]#navmenu ul {margin: 0; padding: 0; list-style-type: none; list-style-image: none; }<br /><br />
#navmenu ul {margin: 0; padding: 0; list-style-type: none; list-style-image: none; }<br /><br />
#navmenu li {display: inline; }<br /><br />
#navmenu ul {margin: 0; padding: 0; list-style-type: none; list-style-image: none; }<br /><br />
#navmenu li {display: inline; padding: 5px 10px 5px 10px}[/code]
Done!
Sources:
Learn More