E.Share

To those of you who don’t know, this past weekend I was at WordCamp Raleigh. It was my first WordCamp, and overall I found it to be a great experience. I met a bunch of people in the WordPress community, and everyone I encountered was very friendly and welcoming.

While I was there, I met Jeffro of WP Tavern and he pulled me aside to do a video interview. In the interview I talk about:

• My experiences at WordCamp so far, including the quality of the cookies
• Anything new I’ve learned from the sessions, including what I can apply to theming
• Whether or not I will attend future WordCamps wearing a lab coat
• Future plans for Theme Lab, including the Underground

I’ve embedded it after the jump, check it out.

Let me know what you think of the interview in the comments. And now that WordCamp Raleigh is over, as well as the Page.ly contest, I’ll get back to the regularly scheduled content including themes, tutorials, and CSS tips galore.

Related posts:

1. I Am Attending WordCamp Raleigh
2. I Was Interviewed At 1stwebdesigner
3. Interview with Jason Schuller on the ThemeGarden Marketplace

For the past week or so I’ve been running a contest to win a free hosting for life from Page.ly. I closed the comments last Friday but being busy with WordCamp Raleigh I didn’t have a good opportunity to pick the winner until I got back home.

And the lucky winner is…

The Screencast

As usual, here’s a screenshot of me picking the winner on Random.org.

So congrats to Marek Zee for winning the contest.

Update: New Winner

Turns out Marek decided to pass on the prize so we decided to do another drawing for a lucky Theme Lab reader.

So congratulations to @nelsonecom for winning the contest!

35% Off Coupon

For the next few days, you can get 35% off of Page.ly hosting with the coupon “THEMELAB” so if you’ve been thinking about signing up to try out their service, you can get a discounted rate with this coupon.

Conclusion

Okay, Page.ly sponsored just one winner. I made a typo in my original contest post that said there would be two winners which @pseudoxiah on Twitter noticed after I announced the winner there.

The reason why this happened is I copied the text from a previous contest post which happened to have had two winners and I forgot to edit the copy. Dumb mistake on my part.

Sorry for the confusion, and thanks everyone for playing. It was actually the most popular contest yet at Theme Lab, beating our first one here.

Related posts:

1. BackupBuddy Contest Winners Announced
2. WPShift Contest Winners Announced
3. We Have Four Contest Winners

Thanks to a bit of last second planning and a ride from Benjamin Bradley, I am going to be attending WordCamp Raleigh 2010. I realized a lot of you probably wouldn’t recognize me if you saw me there, so I made this quick video.

Apologies for the crappy web cam quality, but hopefully you got a good look at me. If you see me there, I’d really love to meet you. It should be a lot of fun and I’m definitely looking forward to my first WordCamp.

Related posts:

1. Video Interview at WordCamp Raleigh

В архиве: Шаблон + быстрый старт + графические исходники + компоненты и плагины

I’ve been asked a few times about which WordPress plugin I use to generate the “Twitter Feed” list in the footer of my site. I actually don’t use a plugin at all, it’s a snippet of Javascript from Twitter that displays a list of my recent tweets that I styled with CSS. In this tutorial, I’ll show you:

• The necessary HTML and Javascript code to pull the latest tweets
• An overview of the HTML markup and associated CSS selectors
• Two examples of custom-styled Twitter widgets I’ve used myself

Read on to see the rest of the tutorial…

The HTML and Javascript

Twitter used to provide this code on their site but for some reason they removed it in favor of these much less flexible widgets. You’ll need two pieces of code.

First, place the following code where you want the list to show up:

<ul id="twitter_update_list"><li>Twitter feed loading</li></ul>

Note: The <li>Twitter feed loading</li> is not a part of the original code Twitter provided, but it’s required to make the HTML validate. It can also provide a useful message while the feed is loading, as it could take a few seconds on a slow day.

Second, you’ll need to place the following lines of Javascript as close to the </body> tag as possible.

<script type="text/javascript" src="http://twitter.com/javascripts/blogger.js"></script>
<script type="text/javascript" src="http://twitter.com/statuses/user_timeline/USERNAME.json?callback=twitterCallback2&count=3"></script>

I currently have it right above my Google Analytics code. You should keep these lines of Javascript as low as possible on the page because in the event that Twitter doesn’t load, everything below that code will hang (which isn’t a big deal if it’s already at the bottom).

Overview of HTML Markup and CSS Selectors

Now you can’t see the HTML markup the Twitter widget generates without using something like Web Developer Toolbar. Lucky for you, I’ve done it for you. Here’s a sample list with just one tweet as an example.

<ul id="twitter_update_list">
<li><span>RT @<a href="http://twitter.com/Screenr">Screenr</a>: Cool Screenr update: Now your screencasts publish twice as fast. <a href="http://screenr.com/aDp">http://screenr.com/aDp</a></span> <a style="font-size: 85%;" href="http://twitter.com/themelab/statuses/14229492866">46 minutes ago</a></li>
</ul>

• #twitter_update_list – Selects the entire list
• #twitter_update_list li – Select individual list items
• #twitter_update_list li span – Selects the “tweet” part of the list item, not the time ago link
• #twitter_update_list li span a – Selects the link within the “tweet” part of the list item
• #twitter_update_list a[style="font-size: 85%;"] – Selects the “time ago” link, in a somewhat hacky way (see note below).

Note: Since there is an inline style in the time ago link which sets the font size at 85%, it makes it somewhat difficult to override without a hacky piece of code. I’ve used this before to reset the font size to the same as the rest of the list:

#twitter_update_list a[style="font-size: 85%;"] { font-size: 1em !important; }

That probably doesn’t work in early versions IE because of the “!important” part. You can also use display: block; to move that link to the next line.

Live Example

For a live example, check out the footer of Theme Lab. Or if you’re reading this in your feed reader or an unauthorized scraper site, check out the screenshot below.

Here’s the code I use for the list:

#twitter_update_list {
	font-size: 13px;
	line-height: 21px;
	list-style: none;
	}
#twitter_update_list li {
	background: url('images/twitter-divider.gif') bottom left repeat-x;
	padding-bottom: 7px;
	margin-bottom: 9px;
	}
#twitter_update_list span, #twitter_update_list span a {
	color: #ababab;
	text-decoration: none;
	}
#twitter_update_list a {
	color: #6f7276;
	}

• The first line selects the entire list. It sets the font size, line height, and makes sure no bullet points show up.
• The second line makes a small 2×1 image repeat below each list item as a sort of divider. The padding sets the space between the tweet and the top edge of the divider. The margin sets the space between the bottom edge of the divider and the next tweet.
• The third line sets the color of the tweet, including links, and makes sure no lines show up below links.
• The last line sets the color of the “time ago” link.

And that’s it! If I had to change one thing, I’d differentiate the the in-tweet links somehow, and maybe add hover effects on links as well.

This Can Be Used On Any Site

Unlike all the other how to do XYZ without a plugin posts out there, there is no actual WordPress code used in this tutorial.

Since this uses no WordPress code, it’s not filed under the WordPress Tutorials collection. It can be used on pretty much any kind of site, assuming you can edit HTML source and CSS.

If you want to use it within WordPress, I would suggest manually editing your theme files to insert the two lines of Javascript in the footer of your site, or even hooking it into your wp_footer() hook.

As for the widget itself, you can either paste the code inside a text widget or manually code it into your sidebar (or wherever).

Conclusion

Hope you all liked the tutorial, I’d love to hear your thoughts in the comments. If you have any requests for quick WordPress or CSS tips, feel free to let me know. It may be featured in a future Tutorial Tuesday post at Theme Lab!

Related posts:

1. Guide to Styling the WP-PageNavi WordPress Plugin
2. What exactly is a widget-ready WordPress theme?
3. BackupBuddy WordPress Plugin – Video Review + Giveaway!

Quick info jQuery Powered Inbuilt Admin Panel Automatic Thumbnails Preview Download (468 Kb) Add to Del.icio.us Add to digg Add to FURL Add to reddit Add to Technorati Add to Yahoo My Web Add to Ma.gnolia Add to Stumble Upon Add to Google Bookmarks Add to Squidoo Add to BlinkBits Add to Blogmarks Add to Bloglines Add to Netscape Add to Ask Add to Live-MSN Add to Sphinn Add to FaceBook

Quick info jQuery Tabbed Sidebar Automatic Thumbnails Ready For Adverts Preview Download (289 Kb) Add to Del.icio.us Add to digg Add to FURL Add to reddit Add to Technorati Add to Yahoo My Web Add to Ma.gnolia Add to Stumble Upon Add to Google Bookmarks Add to Squidoo Add to BlinkBits Add to Blogmarks Add to Bloglines Add to Netscape Add to Ask Add to Live-MSN Add to Sphinn Add to FaceBook

Quick info Magazine Style Widget Ready Community Theme Preview Download (268 Kb) Add to Del.icio.us Add to digg Add to FURL Add to reddit Add to Technorati Add to Yahoo My Web Add to Ma.gnolia Add to Stumble Upon Add to Google Bookmarks Add to Squidoo Add to BlinkBits Add to Blogmarks Add to Bloglines Add to Netscape Add to Ask Add to Live-MSN Add to Sphinn Add to FaceBook

This is just a quick post to let you know about an interview of myself over at 1stwebdesigner, a popular web design blog. The interview was conducted by Saad Bassi, who you may recognize as a frequent commenter here at Theme Lab, and also as the co-editor of 1stwebdesigner.

In the interview, I go over:

• A little bit about myself
• How I got started in web development
• My personal views on the WordPress GPL issue
• My thoughts on startup premium theme companies
• What I see as a “quality” WordPress theme (and what isn’t)
• My work over at Custom Theme
• How I concentrate when writing code
• My code pet peeves
• My future plans

It was a really great interview and Saad asked a lot of insightful questions. So be sure to check it out if you’re interested. It’s actually only my second interview like this, with the first being on WPTavern.

Related posts:

1. Just Interviewed on WPTavern
2. Video Interview at WordCamp Raleigh
3. Interview with Jason Schuller on the ThemeGarden Marketplace

Page.ly is a WordPress hosting service which describes itself as simply the fastest & easiest way to set-up a WordPress website. Some of its highlight features include automatic core updates and automatic nightly backups in a secure web hosting environment.

To get an idea of how simple it is to set up a WordPress site, take a look at the following “2 minute set up” video:

Joshua and Sally Strebel, the people behind the Page.ly service, have offered a giveaway of a free site for life for one lucky Theme Lab reader.

It’s really simple to sign up, just a simple comment + retweet. Read on for details.

Features

First, I want to go over some other features included in every Page.ly plan.

• Managed WordPress Hosting – As mentioned above, automatic core upgrades and nightly backups are taken care of for you.
• Premium WordPress Themes – Page.ly has partnered with commercial theme vendors like WooThemes and StudioPress to provide easy set up of their themes for an additional fee.
• 5 Gigabytes of Storage – Which is plenty of space, 20 email boxes, unlimited email forwards, and 8-Core Xeon Servers

How to Enter

The rules are pretty much identical to our previous giveaways.

Keep in mind Page.ly hosting normally costs $14.98/month, and the winner will be getting a free lifetime account. Of course, their terms of service still apply.

• Tweet a link back to this post saying you just entered the contest to win a free site from Page.ly, along with @themelab (my Twitter username) and @pagely (their Twitter account). If you need a short URL, use this: http://www.themelab.com/2024. For example: I just entered a contest at @themelab to win a free WordPress site from @pagely – http://www.themelab.com/2024
• Post a comment here with the permalink of the tweet you just made. It should be in a similar format to this: http://twitter.com/themelab/status/10079435298
• That’s it!

Please, only one entry per person. If I catch you trying to cheat, you’ll be disqualified.

On Friday, May 21, 2010 at 12:00 PM EST this content will be closed to new entries, and I’ll pick one winner at random.

You’ll be contacted through the e-mail address you leave in your comment, so please leave a valid email address, otherwise I’ll have to bother you on Twitter.

Conclusion

With all the hacks going around infecting WordPress sites with malware on certain hosts, it is very important you choose a host that takes security seriously. With Page.ly signing a deal with Firehost to maintain a secure server infrastructure, I’d say they do take security seriously.

So let’s start seeing those tweets + comments. Best of luck in the contest!

Related posts:

1. Page.ly Contest Winner Announced + Coupon
2. We Have Four Contest Winners
3. BackupBuddy WordPress Plugin – Video Review + Giveaway!