Last night, my good friend Matt opened up his new Mad Men Season 2 Blu-Ray. We were looking through the contents and came across this clever little ad. Simple, elegant design with a witty, tongue-in-cheek message. I feel like the copy is a little unnecessary, that the ad could have been just as successful and even more thought-provoking if it were simply the lipstick-on-collar and the bottle of Clorox. If you’re not familiar with Mad Men, I highly recommend checking it out. The new season starts soon, but you still have some time to catch up.
]]>Recently, I was giving a bit of help to a friend of mine with a site redesign he was implementing. He came to me with a problem he was having with the dropdown navigation. The design required the dropdown to have two columns of links, but the back-end was spitting them out in a single list.
My first thought was just to float the list items next to each other, but since some list items would be two lines long, it caused some nasty vertical spacing issues. The solution was to turn the one list into two.
Before you continue reading, check out the demo so you can see what it actually does.
How to Fix It
Step 1: The Library
If you don’t already have jQuery running on the site, download it here and drop it on your server. Or if you’d like you can use the version from jQuery’s Google Code project (Which is what we’ll be doing for this demo).
To include jQuery, insert the following code somewhere between the <head> tags of your document:
<script type="text/javascript" charset="utf-8" src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js"></script>or if you’re using a version from your own server:
<script type="text/javascript" charset="utf-8" src="http://[Your Domain]/jquery-1.3.2.min.js"></script>Step 2a: The Markup
Since we don’t necessarily want to split every list on the site, we’re going to use classes as a special marker for which lists we’ll be splitting. We’ll use the class “splitcol”.
Example:
<ul class="splitcol">
<li>One</li>
<li>Two</li>
<li>Three</li>
<li>Four</li>
</ul>Step 2b: The Styling
This step is optional. If we’d like the two lists to appear next to one another, we’re going to have to use a bit of CSS. Add the following to your stylesheet:
.splitcol {
float: left;
}Step 3: The Script
Finally, we’ll need to add the keystone. Either in the <head> of the document, or in a separate external JS file, drop in the following code:
$(document).ready(function() {
$('.splitcol').each(function() {
if($(this).is("ol")) { var ordered = true; }
var colsize = Math.round($(this).find("li").size() / 2);
$(this).find("li").each(function(i) {
if (i>=colsize) {
$(this).addClass('right_col');
}
});
if(ordered) {
$(this).find('.right_col').insertAfter(this).wrapAll("<ol class='splitcol' start='" + (colsize+1) + "'></ol>").removeClass("right_col");
} else {
$(this).find('.right_col').insertAfter(this).wrapAll("<ul class='splitcol'></ul>").removeClass("right_col");
}
});
});Problem Solved
And that’s it! For an explanation of the code, check out the next page.
]]>
The Icons
“Dots” is a bubbly, round-y, free icon set which contains 42 PNG-format icons in 16, 32, 48, 64, 128, and 256 pixel sizes. More icons will be definitely be added in future releases. Even until then, I’m sure you’ll be able to find plenty of use for this set.
Download:
Dots - 2.38 MBThe License
This work is licensed under a Creative Commons Attribution 2.5 License. This means that you can use my set however you’d like. And even modify it any way you see fit. My only request is a small link back included in your credits.
Extra Stuff
If you’re using this set, I’d love to see it! Send me an email (with a link) or just contact me, to let me know what you think.
If you’d like to buy me a beer, or some sushi, click the “Donate” button below. If you do, I love you.
]]>Thanks to this book
Description
WP Specific Comment provides a template tag for use anywhere in your theme, inside or outside The Loop. This template tag will return a comment as an object, from which you can retrieve any standard comment data. To initiate the plugin, place <?php wp_specific_comment($ID); ?> into your theme, where $ID will be the ID number for the comment you want returned.
Example:
<?php wp_specific_comment(44); ?> will return the comment with the ID of 44. Pretty simple, right?
Note: This template tag will not actually display anything. It only sets up a comment to be displayed. You’ll have to add in some other standard WordPress Template Tags to get anything to show up on your blog. List of available Comment Tags can be found here.
Example Usage:
<?php wp_specific_comment(1); ?>
<h5 class="comment_author"><?php comment_author_link(); ?></h5>
<div class="comment_text"><?php comment_text(); ?></div>
The above code would retrieve comment with ID of 1, and then display its author (linked to the author’s URL, if provided) in a <h5> followed by a <div> containing the comment’s text content. Still pretty simple!
Installation
Installation of WP Specific Comment is quick and easy.
- Upload
wp-specific-comment.phpto the/wp-content/plugins/directory - Activate the plugin through the ‘Plugins’ menu in WordPress
- Place
<?php wp_specific_comment($ID); ?>in your templates, where $ID is will be the numerical ID for the comment you want returned. - Add additional WordPress Comment Tags to display the desired data.
Download
]]>Tweetie has a beautifully smooth interface overlaid on some really great features. Features like the inline conversations view to show the full conversational history leading up to a particular tweet allow you to never lose track of your conversations. Compose tweets how you want with independent composition windows. They stay out of your way until you need them, and you can even have multiple tweet compositions open at a time.
It has some other cool features too:
- Search Trends
- Threaded DMs
- User Details
- Follow/Unfollow
- Tear-away Search
- Link-sharing Bookmarklet
- Customizable Preferences
Tweetie is free to download and try for as long as you want. While it’s still full-featured, it does have some ads. But today could be your lucky day because I’m giving away a fully-registered copy of Tweetie for Mac ($19.95).
How to win
There’s only a few things you have to do to win:
- Follow me on Twitter
- Subscribe to The Upsider RSS feed
- Leave a comment on this article that contains your Twitter name
And that’s it! A winner will be chosen on Friday, April 24th.
Update: A winner has been chosen at random. Congratulations to Mindy Reznik!
I’d like to personally thank Loren Brichter from atebits for all his hard work. If you would like to give the free version a spin, download it here.
]]>Grandma’s got a blog.
With each release, WordPress is progressively lowering the bar for entry to the blogging arena closer and closer to zero. Literally anyone can have a blog up and running on WordPress.com in a matter of minutes. Or a self-hosted WordPress.org site in not much more time. This means that the market for themes is going to continue to grow. Many of these new users take their writing very seriously, and see their blog designs as their online business cards. These beginners are going to be on the lookout for themes that are not only eye-catching, but easy to use and well-documented & supported.
Activity Streaming
Recently we’ve seen a huge shift of emphasis from longform writing to shortform content publishing on the web. Naturally, people are going to want their blogs to serve as a funnel for all this content they’re creating. Microblogging like Twitter, and other media like Vimeo and Flickr are obvious additions. However I think things like Asides and Miniblogs (See Below) are going to becoming more and more commonplace as well.
WordPress = CMS
Even if WordPress wasn’t meant for it, it already has the ability to serve as a viable Content Management System. As time goes on, and as features are added and refined, I think we’ll start to see it fill that role even more often. What’s this mean? It means that corporations are going to stop spending thousands and thousands of dollars on custom CMSs and start downloading WordPress for free. For us designers, it means we’ll have a whole new market of WordPress users looking for unique themes solutions for their corporate sites. Since they’ll now have a CMS that cost them $0, their budgets should be wide open for some great design.
WordPress in 2009 is going to be huge. More to come.
]]>- #1A487F
- #666666
- #990000
- #070707
- #FFCC00
- #6799CC
- #FF7722
- #362665
- #990000
- #DDDDDD
- #293A58
- #078CE0
- #FFFFFF
- #232323
- #006633
- #000DFF
- #B82025
- #750000
- #990001
- #ACAB9C
- #EF4135
- #9A9A9A
- #FFFF00
- #A2D600
- #0E1819
- #99CC00
- #003399
- #572E1B
- #003300
- #414E72
- #E94710
- #121C25
- #336699
- #6600CC
- #48595B
- #B55332
- #008080
- #000DFF
- #666665
- #333333
- #99CC00
- #004899
- #EC008C
- #ff0000
- #000000
- #FFFF00
- #662d91
- #C75B12
- #FF8800
- #333333
- #3B4A73
- #F2FF86
- #111111
- #B1A7CA
- #B8B8A0
- #646464
- #5B4168
- #9966FF
- #1EE1D6
- #9ED2F1
- #162C75
- #67099A
- #FF0066
- #144E7C
- #B5FA01
- #6666FF
- #3465A4
- #4AA1FF
- #FF6600
- #E02B6B
- #7A00A6
- #050B4D
- #D31F2E