Create Rollover Sidebar Icons

Posted on December 29, 2009 by Tyler Plack

Rollover sidebar icons are quickly becoming a trend. This is done with some simple jQuery that I helped make better. I begun this quest as just a “proof-of-concept”, but several people asked for a blog post about this.

Let’s begin with some basic jQuery. With this code, we are able to change the opacity of the image when a user hovers, and display a tooltip.

$(document).ready(function(){

$(“.twittertooltip a”).hover(function() {
$(this).next(“em”).stop(true, true).animate({opacity: “show”, top: “-60″}, “slow”);
}, function() {
$(this).next(“em”).animate({opacity: “hide”, top: “-70″}, “fast”);
});

});

Now that we have the jQuery section completed, we can now work on our CSS. I have changed the CSS for my blog so it would work in my sidebar, and you can feel free to do the same. Here is my CSS code:

.twittertooltip {
/*   margin: 115px auto; */
padding: 0;
width: 60px;
position: relative;
float:left;
}
.twittertooltip em {
background: url(../images/tooltipbg.png) no-repeat;
width: 109px;
height: 51px;
position: absolute;
top: -70px;
left: -3px;
text-align: center;
padding-top:10px;
font-family:Helvetica;
font-weight:normal;
font-style:normal; /* Necessary, Safari automatically makes the text italic */
font-size:10px;
display: none;
text-align:center;
color:#FFF;
}
#twitter-icon {
width:32px;
height:32px;
background: url(http://tplack.com/images/twitter_32.png) no-repeat 0 0; /* Change this to your server, no hotlinking! */
margin: 0 auto;
display: block;
opacity: 0.85;
}
#twitter-icon:hover {
opacity: 1.0;
}

Okay, now our CSS is done. Now to setup our HTML code:

<div class="twittertooltip">
<a href="http://twitter.com/tcslive" id="twitter-icon"></a>
<em>Twitter</em>

</div>

It is now clear that what goes inside of the <em> tag is what text is displayed as the tooltip. Feel free to ask for help in the comments, I will do what I can to help.

Posted in Uncategorized | Tagged , , , , , , | 1 Comment

Learn Web Design: How To

Posted on December 28, 2009 by Tyler Plack

We’re just beginning a new year, and there is no better time to learn or set goals then in a new year. I have begun to teach aspiring designers the ins and outs of web design. It is becoming a time consuming project, so therefore I decided to write about it.

Learning web design will take you about 2 months to begin to understand, and at least 6 months to have a good understanding. Here are some skills that will be important to learning web design: critical thinking, high attention to detail, and perseverance.

My recommendations are to do the following:

1. Learn and complete lessons from w3schools

2. Complete w3school’s quiz

3. Brush up on lessons you’re not great at

4. Retake w3school’s quiz

5. Start learning CSS via w3schools

6. After completing about half of the lessons, start a simple CSS project. Try replicating a basic theme.

7. Finish learning CSS, then move to learning the WordPress API.

8. Create your first WordPress Theme

That was how I learned, and I hope it helps you learn and become a great designer!

Posted in Uncategorized | 3 Comments

5 OS X Productivity Tips & Applications

Posted on December 19, 2009 by Tyler Plack

I, like everyone else loves to get things done. Over the years of using Mac OS X, I’ve learned several tricks and tips to being productive on my Mac. Here are some applications I use that help me with productivity and tips I have.

Applications

1. Mail Unread Menu (http://loganrockmore.com/MailUnreadMenu/)
Mail unread menu is an application that lists the unread mail in the menu bar, and allows you to bring the Mail application to the front, check for new mail, and various other things.

2. TinyGrab (http://tinygrab.com/)
Whenever you want to show someone something, you usually show a screenshot. TinyGrab is an application that automatically uploads your screenshots and adds them to your clipboard.

3. Billings (http://www.billingsapp.com/)
Billings is an all-around great application for billing clients. It creates professionally made templates that you can put charges on.

Tips

1. Keep a minimal amount of applications open. Having many applications open will much more easily distract you.

2. Use iCal to organize your life. Set reminders at reasonable times. Do not set reminders every 10 minutes, that will just distract you more.

Posted in Uncategorized | Tagged , , , , , , , | 1 Comment

WordPress Mystery Geek

Posted on December 12, 2009 by Tyler Plack

I recently learned of this tweak, and with just a few lines of code in your theme’s function.php file you can set a gravatar for just your theme, in the settings page of WordPress. The article is here for those of you who haven’t yet seen it.

My friend, Phil, asked that I create him a WordPress Mystery Geek. I got a little carried away, but I think it’s great!

If you have a blog, you should use this for your mystery man Gravatar image!

Posted in Uncategorized | Tagged , , , , | 2 Comments

5 WordPress Security Tips

Posted on December 5, 2009 by Tyler Plack

What’s a blog if it gets hacked every day? We all can agree that security should always be #1 on your list. Let’s examine some security. Here are my 5 security tips for WordPress.

1. Don’t use the Admin account. The Admin account gives hackers an exact account to target. Most all WordPress blogs have them. I suggest setting up users like “1qeufjfuew”. That is taking it to the extreme. Just don’t use the account called “Admin”

2. Don’t allow /wp-* to be indexed. If someone knows your plugins, they could find a weakness in a security plugin. (Just a good practice)

3.  Use a long password. The programs that hackers use are called “Brute Forcers”. These “Brute Forcers” will be unable to crack a password longer than 32 characters, because rainbow tables (the tables that these hackers use) do not exist for things longer than 32 characters.

4. Upgrade WordPress when an update is made. Don’t wait because there are almost always security changes made in these updates. Any time between patch updates is time for hackers to use their exploits.

5. Use a plugin called “Login Lockdown”. It locks users out after several logins, and logs all logins so you know what is going on. Vital security tool. I’m amazed WordPress hasn’t adopted this tool themselves.

No blog is unhackable, but making it harder for a hacker will keep them out. Also, keep in mind that larger blogs are the targets with a bullseye on them.

Posted in Uncategorized | Tagged , , , , , | 2 Comments

Holiday Wishlist 2009

Posted on November 28, 2009 by Tyler Plack

It’s that time of year again! I know everyone wants this brat to stop asking for more stuff, but what would I do on Christmas if I weren’t to get more stuff? Without further ado, there is my wishlist:

-Finder Pillow from Throwboy (http://throwboy.com/icons.php – This one looks like a happy face)

-DIY Neon Sign Kit with letters to spell “On Air” (http://www.thinkgeek.com/gadgets/lights/97fd/)

-iPhone Podium (http://www.podiumrevolution.com/Pearl-Podium-p/Pearl-3G.htm)

-MacBook Pro

-Faucet Light (http://www.thinkgeek.com/homeoffice/kitchen/8122/)

OK: Keep in mind that this is a WISH list. I WISH I had all of this stuff. Anyway, post a comment about what you’d like to have for Christmas/Hanukkah/Kwanzaa/New Year/Other Holidays.

Posted in Uncategorized | Tagged , , , , , , | 1 Comment