Tutorials
RSSEmailHow to create an icon for your website that works on the homescreen of an iOS device
Safari on iOS includes a feature that allows you to add a website to your device's homescreen for easy access. Obviously, just as any other thing on the homescreen, the link to the website includes an icon. By default, iOS will take a small preview...
How to create an icon for your website that works on the homescreen of an iOS device
Safari on iOS includes a feature that allows you to add a website to your device's homescreen for easy access. Obviously, just as any other thing on the homescreen, the link to the website includes an icon. By default, iOS will take a small preview of the website and use that as the icon on the homescreen. However, you can easily change that by adding some code to your header. Here's how to do that:
First, you're going to need to pick the image you'd like to use. Resize the image to have a resolution of 72 x 72 and save it (being sure to keep the original, un-resized image also). Then, resize the same image to have a 114 x 114 resolution and save that as well. Next, upload the images (all three of them) to where you're going to be hosting them (image uploading service, server, etc.)
After you do that, head over to your HTML code and find the <head></head> section. Add the following code into that section:
<link rel="apple-touch-icon" href="LINK TO ORIGINAL IMAGE" /> <link rel="apple-touch-icon" sizes="72x72" href="LINK TO 72 x 72 IMAGE" /> <link rel="apple-touch-icon" sizes="114x114" href="LINK TO 114 x 114 IMAGE" />
Note: Remember to change the capitalized text in the code above to links to your images.
The original image will be used as a backup case. The 72 x 72 image will be used for the iPad and the 114 x 114 image will be used for devices with a Retina display (like the iPhone 4).
Other notes
- By default, iOS automatically adds a gloss and rounded edges effect to your image when it's on the homescreen. To make sure this works correctly, be sure that the original image you're going to use is perfectly square and doesn't have any pre-gloss effect added.
HTML/JavaScript/CSS Tip: Creating a modal window
Modal windows are great - they're not popup windows, but they grab the users attention by filling up either a portion or entire screen. For those of you who don't know what modal windows are - they are boxes that appear when clicking or hovering...
HTML/JavaScript/CSS Tip: Creating a modal window
Modal windows are great - they're not popup windows, but they grab the users attention by filling up either a portion or entire screen. For those of you who don't know what modal windows are - they are boxes that appear when clicking or hovering over something on a website. They usually appear alongside a dark background. You can see a couple examples of modal windows by scrolling to the top of this page and clicking on the "Got News? Let Us Know..." link.
However, modal windows can be somewhat difficult to code. Here's how to create one:
Download Source Code (right click and save as) | Demo
HTML Code
Before you begin the dirty work, you're going to want to get your basic HTML structure down for the modal window. Use the code below and modify it if needed. We recommend placing the following code directly after your <body> tag to ensure it loads correctly.
<!-- Begin modal window -->
<div class="boxes"> <!-- Container Div -->
<div style="height:auto !important;padding-bottom:50px;margin-top:125px" id="test"
class="window">
<p>CONTENT OF YOUR MODAL WINDOW GOES HERE</p>
<!-- Button that can close the window -->
<img alt="Close this window" style="cursor:pointer;float:right;position:absolute;
top:-13px;left:-15px" class="close" src="FILL WITH LINK TO IMAGE"/>
<!-- End button that can close the window -->
</div>
</div>
<!-- Container that fills the screen: do not remove! -->
<div class="mask"></div>
<!-- End container that fills the screen: do not remove! -->
<!-- End modal window -->
JavaScript Code
Next, we need to create the JavaScript code that will allow for the modal window to appear when clicking on a link. We recommend placing this code directly above the closing </body> tag as, if for some reason there is an issue, the rest of the page will continue to load without issue.
<script type="text/javascript">
$(document).ready(function() {
$('a[name=modal]').click(function(e) {
e.preventDefault();
var id = $(this).attr('href');
var maskHeight = $(document).height();
var maskWidth = $(window).width();
$('.mask').css({'width':maskWidth,'height':maskHeight});
$('.mask').fadeIn(100);
$('.mask').fadeTo("fast",0.8);
var winH = $(window).height();
var winW = $(window).width();
$(id).css('top', winH/2-$(id).height()/2);
$(id).css('left', winW/2-$(id).width()/2);
$(id).fadeIn('slow');
});
$('.window .close').click(function (e) {
e.preventDefault();
$('.mask, .window').hide();
});
$('.mask').click(function () {
$('.mask').hide();
$('.window').hide();
});
});
</script>
CSS Code
Finally, we need to style the modal window. Here's the basic CSS to do that. To change the color used as the background when the modal window is active, simply change background-color:#000 in .mask to your liking.
.mask {
position:absolute;
z-index:9000;
background-color:#000;
display:none;
opacity:0.3 !important;
filter:alpha(opacity=30)!important;
}
.boxes .window {
position:absolute;
width:600px;
background:#FFF;
height:300px;
display:none;
z-index:9999;
padding:10px;
box-shadow:12px -5px 27px #333;
border-radius:3px;
}
#boxes #dialog {
width:375px;
height:203px;
}
Other Notes
- Make sure that you have the following code inside your <head></head> tags
<script type="text/javascript"
src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
<script type="text/javascript"
src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.11/jquery-ui.min.js"></script>
<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.js"></script>
- To display the link that, when clicked, opens the modal window, use the code below:
<a name="modal" href="#test">This displays a modal window when clicked</a>
Download Source Code (right click and save as) | Demo
How to fix “Do you want the application ‘iTunes.app’ to accept incoming network connections?” error
Many users of iTunes on Mac OS X have probably seen the "Do you want the application 'iTunes.app' to accept incoming network connections?" error pop up once or twice. Despite the fact that you click "Allow," the message may continue to pop up every single time...
How to fix “Do you want the application ‘iTunes.app’ to accept incoming network connections?” error
Many users of iTunes on Mac OS X have probably seen the "Do you want the application 'iTunes.app' to accept incoming network connections?" error pop up once or twice. Despite the fact that you click "Allow," the message may continue to pop up every single time you open iTunes. This not only gets annoying, but it likely means that something is wrong on Mac OS X's side with the Firewall.
There are many different ways to fix the issue and not every single one will work for everyone. Try the two solutions below, in order, and hopefully the issue will be resolved.
Solution 1: Reinstall iTunes
This is probably the most simple solution. First, go to the Applications folder and drag iTunes to the Trash. Empty the Trash and restart the computer. Once the computer starts back up, head over to Apple's download page for the latest version of iTunes here: http://www.apple.com/itunes/download/. Download and install the latest version of iTunes. Your library (songs, movies, audiobooks, podcasts, etc.) will remain intact.
Re-launch the app and check if the error continues to pop up. If it does, continue to the next solution. If not, congratulations!
Solution 2: Trash Security Preference File
The next solution is what fixed the error from showing up for us. First, launch Terminal (Applications>Utilities>Terminal) and copy + paste the following exactly as it appears: sudo chmod 640 /private/var/log/secure.log. You're going to be prompted to enter a password - type in your password (you won't actually see it being typed, however). Once you do that, quit Terminal.
Next, launch Finder and navigate to the following path: /Library/Preferences. Find the file that is named com.apple.alf.plist and drag it to the Trash. If there is a file named com.apple.alf.plist~orig, drag that file to the Trash as well. Empty the Trash and restart the computer.
Once the computer restarts, open iTunes and check if the error still pops up.
One of these two solutions should fix the issue for you. Be sure to let us know how it goes in the comments!
How to change the wallpaper of Mission Control in Mac OS X Lion
Mac OS X Lion, Apple's eighth major release of Mac OS X, included a new feature called Mission Control. Mission Control combines Dashboard, Expose, Spaces, and Full-Screen apps into one, easy-to-view screen. In general, Mission Control has received mixed opinions from upgraders - some say...
How to change the wallpaper of Mission Control in Mac OS X Lion
Mac OS X Lion, Apple's eighth major release of Mac OS X, included a new feature called Mission Control. Mission Control combines Dashboard, Expose, Spaces, and Full-Screen apps into one, easy-to-view screen. In general, Mission Control has received mixed opinions from upgraders - some say that it's great, while others say that it's too cluttered.
One complaint that users have of OS X Lion is its use of linen-based wallpapers (like the one found when entering Mission Control). Many would like to change this background to something more unique and elegant. Luckily, with a little modding, you can change the wallpaper of Mission Control. Here's how to do just that:
Step 1: Find the resolution of your display. To do this, open System Preferences (Applications>System Preferences or Apple menu>System Preferences). Click on the "Displays" preference pane and look at which resolution is currently applied to your display.
Step 2: Find the background that you'd like to use. It can be anything - a nice wood wallpaper or the same one you're using for your regular desktop(s) on Lion. Open the image up in a photo editor (for example, Photoshop) and resize it to match the resolution of your display. It may be easier for some of you to find an image that is the exact resolution of your display from the beginning, as you may not have access to a photo editor with resizing capabilities. Save the resized image to your desktop, making sure that it is in .PNG format and named defaultdesktop.
Step 3: Navigate to the following directory via Finder: /System/Library/CoreServices/Dock.app. Right-click on Dock.app and click "Show Package Contents." Then, navigate to: Contents>Resources. Find the image called "defaultdesktop.png" and re-name it to "defaultdesktop-old.png."
Step 4: Drag-and-drop the image that you saved to your desktop into this folder. You may be asked to enter your password - make sure you do so correctly.
Step 5: Once the image copied into the folder, open Terminal (Applications>Utilities>Terminal) and type in the following command exactly as it appears: killall Dock. You should notice your Dock disappear and the background of your desktop go gray for a few seconds.
That should be it! Enter Mission Control and you should have a new background for it!
Today's Trending Stories
How to change the wallpaper of Dashboard in Mac OS X Lion
Mac OS X Lion, Apple's eighth major release of Mac OS X, included a revamped Dashboard application that acts as a separate space (or "desktop," if you prefer) to the left of all of the rest of your spaces (or desktops). We've already shown you how...
How to change the wallpaper of Dashboard in Mac OS X Lion
Mac OS X Lion, Apple's eighth major release of Mac OS X, included a revamped Dashboard application that acts as a separate space (or "desktop," if you prefer) to the left of all of the rest of your spaces (or desktops). We've already shown you how to switch back to the old Dashboard from OS X Snow Leopard if you absolutely hate the new version.
However, one complaint many upgraders to Lion have been mentioning is the background/wallpaper that Apple chose for use in Dashboard (that dark, dotted wallpaper). Many don't like it, but luckily, with a little modding, you can easily change the background to whatever you would like. Here's how to do just that:
Step 1: Find the resolution of your display. To do this, open System Preferences (Applications>System Preferences or Apple menu>System Preferences). Click on the "Displays" preference pane and look at which resolution is currently applied to your display.
Step 2: Find the background that you'd like to use. It can be anything - a nice wood wallpaper or the same one you're using for your regular desktop(s) on Lion. Open the image up in a photo editor (for example, Photoshop) and resize it to match the resolution of your display. It may be easier for some of you to find an image that is the exact resolution of your display from the beginning, as you may not have access to a photo editor with resizing capabilities. Save the resized image to your desktop, making sure that it is in .PNG format and named pirelli. Save another copy of the same, resized image in .PNG format, titled mini_pirelli.
Step 3: Navigate to the following directory via Finder: /System/Library/CoreServices/Dock.app. Right-click on Dock.app and click "Show Package Contents." Then, navigate to: Contents>Resources. Find the image called "pirelli.png" and re-name it to "pirelli-old.png." Next, find the image called "mini_pirelli.png" and re-name it to "mini_pirelli-old.png."
Step 4: Drag-and-drop the images that you saved to your desktop (both of them) into this folder. You may be asked to enter your password - make sure you do so correctly.
Step 5: Once the images copied into the folder, open Terminal (Applications>Utilities>Terminal) and type in the following command exactly as it appears: killall Dock. You should notice your Dock disappear and the background of your desktop go gray for a few seconds.
That should be it! Check Dashboard and you should have a new background for it!
How to switch back to the old Dashboard in Mac OS X Lion
Mac OS X Lion included a completely redesigned Dashboard application that, by default, acts as a separate space (or "desktop," if you prefer) to the left of all of your other spaces (or desktops). Many OS X Lion users enjoyed this simple, but much needed refresh to...
How to switch back to the old Dashboard in Mac OS X Lion
Mac OS X Lion included a completely redesigned Dashboard application that, by default, acts as a separate space (or "desktop," if you prefer) to the left of all of your other spaces (or desktops). Many OS X Lion users enjoyed this simple, but much needed refresh to Dashboard. However, there are some upgraders to the new OS from Apple that absolutely hate the new Dashboard and would like it to go back to the way it looked and acted in Mac OS X Snow Leopard (by flying in above all of your open windows).
Luckily, Apple included a very simple way to change the Dashboard back to the way it was in Snow Leopard, even if you're running OS X Lion. Here's how to do just that:
Step 1: Launch System Preferences (Applications>System Preferences or Apple menu>System Preferences)
Step 2: Find the preference pane that is titled "Mission Control"
Step 3: Uncheck the check box next to the option that reads "Show Dashboard as a space"
That's it! Now, if you hit the Dashboard icon on your keyboard or go to the Dashboard app, it will fly in above all of your windows, just like in Snow Leopard.
How to switch back to the old Mail in Mac OS X Lion
One of the most touted features in Apple's new Mac OS X Lion release was a completely redesigned Mail application, dubbed "Mail 5." Mail 5 takes the design of the email app on the iPad and brings it the Mac, basically mirroring it. Many early...
How to switch back to the old Mail in Mac OS X Lion
One of the most touted features in Apple's new Mac OS X Lion release was a completely redesigned Mail application, dubbed "Mail 5." Mail 5 takes the design of the email app on the iPad and brings it the Mac, basically mirroring it. Many early upgraders to Lion have been impressed by the new Mail app, but some users don't like the "iPadification" of it.
Luckily, Apple has included a simple and easy way to switch back to the old design of the Mail app, even when running in OS X Lion. Here's how to do just that:
Step 1: Launch Mail in OS X Lion
Step 2: Enter the preference pane for Mail by clicking the Command key, along with the comma (,) key. Or, you can go to the menu bar and click Mail>Preferences
Step 3: Click on the "Viewing" tab in the preferences pane window that pops up
Step 4: Under the Viewing tab, you should notice a check box titled "Use classic layout." Simply click on that check box and close out of preferences.
That's it! Mail should now look just as it did in Mac OS X Snow Leopard.
How to search Google from Safari’s address bar
When Google first released Chrome in 2008, it had a feature that many, including me, loved - the "Omnibar." The Omnibar is Google's fancy name for the address bar in Chrome, but, it includes one feature that other web browsers don't - the ability to...
How to search Google from Safari’s address bar
When Google first released Chrome in 2008, it had a feature that many, including me, loved - the "Omnibar." The Omnibar is Google's fancy name for the address bar in Chrome, but, it includes one feature that other web browsers don't - the ability to search Google directly. In many browsers, you have two bars in the toolbar - the first being the traditional address bar and the second is the search bar, which allows you to not go to Google.com, for example, to search for something. Firefox also has the ability to search Google directly from the address bar.
One web browser that has lacked this feature is Apple's Safari, until now. One developer has created an extension for Safari users that allows them to easily search Google directly from the address bar, just like in Chrome. The extension, cleverly dubbed "SafariOmnibar," is available for download from GitHub here: https://github.com/downloads/rs/SafariOmnibar/Safari%20Omnibar-1.1.pkg. SafariOmnibar will work for Safari 5.0 (Snow Leopard users) and Safari 5.1 (Lion users).
All you have to do is download the extension, run the package, and restart Safari. If you see that the search bar on the right side of the toolbar in Safari has disappeared, you know that the extension has successfully installed. You should now see just one, giant address bar in Safari.
Go ahead - you know you want to!
How to add Front Row back into Mac OS X Lion
With all rumors pointing to a release of Mac OS X Lion as soon as tomorrow, we felt that this would be the appropriate time to break it to all the Front Row users in Mac OS X that the media app will not be...
How to add Front Row back into Mac OS X Lion
With all rumors pointing to a release of Mac OS X Lion as soon as tomorrow, we felt that this would be the appropriate time to break it to all the Front Row users in Mac OS X that the media app will not be making its way to Lion. For those of you who don't know, Front Row is an app that nearly mirrors the Apple TV interface and is a one-stop shop to all the media on your Mac, including: music, movies, TV shows, etc. Front Row was first introduced in Mac OS X 10.4, which is also known as "Tiger."
One developer found out about the lack of Front Row in Mac OS X Lion and took it upon himself to build a small package that users can run to install Front Row in Lion. In case you were wondering, the package installs the following files, which are apparently the only ones needed to run the media app:
- /System/Library/CoreServices/Front Row.app
- /System/Library/PrivateFrameworks/BackRow.framework
- /System/Library/PrivateFrameworks/iPhotoAccess.framework
- /System/Library/LaunchAgents/com.apple.RemoteUI.plist
- /Applications/Front Row.app
To install Front Row, all you have to do is run the package found here: http://www.mac-hatter.com/blog/frontrowenablerforlion/FrontRowEnablerforLion.pkg.
Be sure to let us know in the comments if this worked for you.
How to use Spotify without an invite
Yesterday, Spotify officially launched in the United States after a long wait. Spotify is a service that allows its users to stream music and it has three tiers, described below: Free tier: ad-supported, limited streaming per month $4.99/month tier: ad-free, unlimited streaming $9.99/month tier: ad-free,...
How to use Spotify without an invite
Yesterday, Spotify officially launched in the United States after a long wait. Spotify is a service that allows its users to stream music and it has three tiers, described below:
- Free tier: ad-supported, limited streaming per month
- $4.99/month tier: ad-free, unlimited streaming
- $9.99/month tier: ad-free, unlimited streaming, mobile support, offline support
Normally, to get access to the free tier of Spotify, you have to be invited by someone who is using one of the paid plans. However, a workaround has been found that allows anyone in the U.S. to have access to the free plan from Spotify, without the need of an invite.
Here's how to get going:
Step 1: The biggest thing to remember in this tutorial is that you have to appear to be located in the United Kingdom. To do that, you're going to have to run through a proxy (like the one here: http://daveproxy.co.uk/). If you use DaveProxy, you're going to notice quite a few pop-ups appear - just close them as needed (don't worry - no viruses).
Step 2: Go to http://daveproxy.co.uk/ and in the URL field, type in: http://spotify.com. Basically what this steps does is, it makes Spotify.com think you're visiting the website from the UK, not from the U.S.
Step 3: Once on the Spotify website through the proxy, signup for an account by going to the top right-hand corner of the webpage and clicking on the "Log in" button. From there, click on "Sign up." As part of the signup process, you're going to need a zip code from the UK - just Google for one (here's one for McDonald's: SW1A 2BX).
Step 4: Once you're all signed up, head over to http://spotify.com/login as you normally would (no proxy, just type it directly into your web browser's address bar). Login using the credentials you chose earlier.
Step 5: Once you're logged in, head over to http://spotify.com. You're going to notice a black box at the top of the page that reads "Continue to Spotify.com." Click on it. You should now be logged into your account and on the Spotify webpage, but your account is still based in the UK.
Step 6: To change that, click on your username in the top right-hand corner of the webpage and click on "Edit Profile." Change your country to the United States, type in your real zipcode, and save the changes.
Step 7: That's it! Just download the Spotify app onto your computer from here and begin using it!
Let us know in the comments if this works for you, or if you have any questions.
Tip of the Day: Accessing the Library folder in Mac OS X Lion
In Mac OS X Lion, Apple decided to make the Library folder in the home folder a hidden directory, likely because the home folder stores all of a users files and the Library folder houses system files. Many new users to Mac OS X won't...
Tip of the Day: Accessing the Library folder in Mac OS X Lion
In Mac OS X Lion, Apple decided to make the Library folder in the home folder a hidden directory, likely because the home folder stores all of a users files and the Library folder houses system files. Many new users to Mac OS X won't care much for the change, nor will they likely notice that it's gone. However, advanced users sometimes need access to the Library folder, whether it be for modifications of system files or something else.
Here's a quick tip on how to access the Library folder that used to be non-hidden in the home folder:
Step 1: Open a new Finder window.
Step 2: Hold down the following key shortcut: Command-Shift-G. You should notice a window popup over the Finder that asks for a directory.
Step 3: In the window, copy+paste or type the following directory: ~/Library.
Step 4: Hit the "Go" button and if you did everything correctly, you should be inside the Library folder.
How to prepare your Mac for the Mac OS X Lion upgrade
With all rumors pointing to a release of Apple's next Mac operating system, Mac OS X Lion, sometime this week, we thought it's appropriate to take you through all the steps to prepare your Mac for the upgrade. Mac OS X Lion will be available...
How to prepare your Mac for the Mac OS X Lion upgrade
With all rumors pointing to a release of Apple's next Mac operating system, Mac OS X Lion, sometime this week, we thought it's appropriate to take you through all the steps to prepare your Mac for the upgrade. Mac OS X Lion will be available via the Mac App Store only and will cost $29.99 to download.
Follow all these steps and your Mac will definitely be ready for the next big cat from Apple!
Step 1: Make sure your Mac can upgrade to Mac OS X Lion
Apple has stepped up the system requirements for its newest OS; so even if you upgraded to Mac OS X Snow Leopard, the current release of Mac OS X, you may not be able to upgrade to Lion. According to Apple, your Mac must be equipped with an Intel Core 2 Duo, Core i3, Core i5, Core i7, or Xeon processor to run Lion. With that being said, some people have claimed to install Lion on Core Duo processors, but it will require some work. In addition, Apple recommends at least 2 GB of RAM.
To check what processor your Mac has, simply click the Apple logo in the menu bar and select "About this Mac." Your processor is listed on the window that opens up.
Step 2: Update to the latest version of Mac OS X Snow Leopard
Apple recently released Mac OS X 10.6.8, a maintenance update to Snow Leopard that gets your Mac ready for the Lion upgrade. You're probably going to want to update to 10.6.8, along with any other updates available, before upgrading to Lion to ensure proper installation.
To update your software, click on the Apple logo in the menu bar and select "Software Update..."
Step 3: Uninstall any apps that you no longer use
If you're not using some of the apps that your currently have installed on your Mac, it may be a good idea to remove them. It's a good idea to remove them because it may speed up installation and it's the perfect time to do some "spring cleaning" on your Mac.
To remove apps (the simple way), open up the Applications folder and drag the apps you would like to uninstall to the Trash. The more complex way involves using a third-party app (such as AppCleaner) to remove all remnants of the apps you uninstall.
Step 4: Check your hard drive for any errors
As with any major software upgrade, you want to make sure your hard drive is in good "health." You don't want to waste your time installing an OS on an already failed (or failing) hard drive, which may cause errors during installation. To check and repair any issues with your hard drive on Mac OS X, simply launch the Disk Utility app (Applications>Utilities>Disk Utility).
From there, click on "Macintosh HD" (or whatever your main hard drive is named) in the sidebar on the left. Make sure the "First Aid" tab is selected and click on the "Repair Disk Permissions" button. When that process is complete, click on the button that says "Verify Disk." Hopefully everything will come back clean, but if not, pop in your Mac OS X Snow Leopard Install DVD and repair the disk.
Step 5: Backup all of your files
Congratulations! The dirty work is done. Now, you're going to want to backup all of your important files using a method of your choice. While the chance of something happening during the upgrade to Lion is very slim, it's never bad backup your files. There are many different options you have to backup your files, listed below:
- Use Time Machine (built-in to Mac OS X Snow Leopard)
- Backup manually to a USB drive
- Backup manually to an external drive
- Clone your entire hard drive using a tool like SuperDuper
Step 6: Check for incompatible apps
The last part of the upgrade process is to check for incompatible apps. While there likely isn't anything you can do to fix apps that won't work on Lion, you can at least be prepared - look for alternatives if there is an app that doesn't work yet. A growing list of apps that work and don't work on Lion can be found here: http://roaringapps.com/apps:table.
In addition, we recommend you contact the developer(s) of the app that doesn't work to see if an update is in the works or will be available soon.
That's just about it! Your Mac is ready for the Mac OS X Lion upgrade!
How to forward your Yahoo! Mail messages to Gmail without paying for Yahoo! Mail Plus
If you want to forward all incoming messages to your Yahoo! Mail account to another email, such as a Gmail, you probably now know that Yahoo forces you to purchase Yahoo! Mail Plus, which costs $19.99 per year. That's a pretty steep investment just to...
How to forward your Yahoo! Mail messages to Gmail without paying for Yahoo! Mail Plus
If you want to forward all incoming messages to your Yahoo! Mail account to another email, such as a Gmail, you probably now know that Yahoo forces you to purchase Yahoo! Mail Plus, which costs $19.99 per year. That's a pretty steep investment just to forward your emails to another account!
However, there is a very easy solution to forward all your emails from your Yahoo! Mail account to another service, such as Gmail. Here's how to do it:
Step 1: Login to your Yahoo! account. Go to http://yahoo.com and click on your name in the top right-hand corner of the page. You should notice a drop down menu show up - click on the "Account Info" link.
Step 2: If prompted, type in your account's password and sign in.
Step 3: Scroll down on the page until you notice a link on the left-hand side of the page that is titled "Set language, site, and time zone." Click on it.
Step 4: In the drop down menu next to the text that reads "Regional Site and Language," find "Yahoo! United Kingdom" and click on it.
Step 5: Save your settings and close this page.
Step 6: Login to your Yahoo! Mail account and enter the settings (it's different for every design you're on, so look somewhere near the top of the page). In the menu on the left, find the section that reads "POP & Forwarding." Click on it.
Step 7: You should now notice the option to forward your messages from Yahoo! Mail to another email address is enabled. Type in the email address you'd like to forward the messages to in the text box on the page.
That's it!
How to bypass Google’s block on inviting people to Google+; ten free invitations
You may remember that yesterday, Google decided to block its test users of the Google+ social network from inviting people to the service. The search giant imposed this block because of "insane demand" for invitations to Google+. However, just minutes ago, It's All Tech found...
How to bypass Google’s block on inviting people to Google+; ten free invitations
You may remember that yesterday, Google decided to block its test users of the Google+ social network from inviting people to the service. The search giant imposed this block because of "insane demand" for invitations to Google+. However, just minutes ago, It's All Tech found a way to bypass this block.
All you have to do is get someone to share a post from their stream on Google+ with you (sent to your email address). From there, you can click a link in the footer of the email and you're brought up with the signup page for Google+.
To "celebrate" the finding, we're giving away ten invites to Google+ for the first ten people that email brian [at] itsalltech [dot] com.
[Thanks, Ben]
UPDATE: Turns out 9to5Google figured this out earlier. But, the invitations are still up for grabs!
CSS Tip: Padding vs. Margin
CSS includes two great ways to space elements between each other - they're called "margin" and "padding." Many people just starting out at CSS will likely mix up the purpose of the two because they do the exact same thing. However, there is still a...
CSS Tip: Padding vs. Margin
CSS includes two great ways to space elements between each other - they're called "margin" and "padding." Many people just starting out at CSS will likely mix up the purpose of the two because they do the exact same thing. However, there is still a difference and it's a pretty important one: margin is used for spacing between the edge of one element and the element(s) next to it, while padding is used for defining space between the content of the element and the edge of the same element. We've included a handy graphic above that explains the concept.
Now, let's do some examples:
Example #1: Let's use padding to give some text a little space in a box. We gave the text 5 pixels of space in this example.
This is some text that needs space!
Example #2: Let's use a margin to space out two boxes from each other.
See this box on the left? It has spaced itself 20 pixels from the box to the right of it.
See this box on the right? It has been spaced 20 pixels away from the box to the left of it.
How to use padding and margin
Padding
#element_name {padding-top: 10px;padding-right:10px;padding-left:10px;padding-bottom:10px}
The above can be shortened down to:
#element_name {padding:10px}
Margin
#element_name {margin-top: 10px;margin-right:10px;margin-left:10px;margin-bottom:10px}
The above can be shortened down to:
#element_name {margin:10px}
Some quick notes:
- Keep in mind that adding the margin and/or padding elements will increase the width of the element they are associated with
- You can combine the margin and padding elements to add both space for content and space between elements (as seen in example #2 above)
Tip of the Day: Getting Mac OS X Lion to not use the new Resume feature temporarily
A new feature in Apple's upcoming eighth major release of Mac OS X, dubbed "Lion," is called Resume. In short, Resume allows users to quit an application as they normally would and when they re-launch the app, have the exact state of what they were...
Tip of the Day: Getting Mac OS X Lion to not use the new Resume feature temporarily
A new feature in Apple's upcoming eighth major release of Mac OS X, dubbed "Lion," is called Resume. In short, Resume allows users to quit an application as they normally would and when they re-launch the app, have the exact state of what they were doing before quitting, appear. For example, you're performing a search on Google in Safari, quit Safari, and re-launch it. Instead of displaying the homepage as in Mac OS X Snow Leopard, you're going to see the same Google search that you were performing earlier.
While this feature can be very useful in some cases, in others it is not. And for those cases, Apple built-in a different keyboard shortcut that allows users to not use the Resume feature when quitting an app for that specific time. All you have to do is click Command-Option-Q and that will quit the app you're currently using. Re-launch it and you'll notice that the Resume feature didn't work and you'll be on your way with a fresh start. Keep in mind that, every time you do not want to use the Resume feature, you're going to have to use this keyboard shortcut.
How to add the Google “+1″ button to your WordPress site
Earlier this month, Google announced the "+1" button for websites, allowing content publishers to place the button on their website. When a reader clicks the +1 button, that link is then shared on Google search results for everyone to see. The button is very simple...
How to add the Google “+1″ button to your WordPress site
Earlier this month, Google announced the "+1" button for websites, allowing content publishers to place the button on their website. When a reader clicks the +1 button, that link is then shared on Google search results for everyone to see. The button is very simple to integrate if you'd like readers to only +1 the current URL, but is a little more complicated if you'd like to embed it on a content management system like WordPress where you have multiple posts on a webpage.
Here's how to do just that:
Step 1: First, you're going to want to launch up your favorite FTP client (something like CyberDuck on Mac OS X or FileZilla for Windows).
Step 2: Navigate to the following directory: /wp-content/themes/your_current_theme. Of course, replace your_current_theme with the directory of the theme that's currently active on your WordPress-based site.
Step 3: Find the file that contains the WordPress "loop." It's different for every theme, but common names are template.php, index.php, and home.php. Look for the piece of code that looks similar to: <?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
Step 4: Set this aside for now. Next, you have to get the code for the Google +1 button from here: http://www.google.com/webmasters/+1/button/. Follow the steps on the webpage to get the code you'd like. Copy the code that looks similar to this: <g:plusone></g:plusone>
Step 5: Go back to the file you had open with the WordPress loop. Paste the +1 button code into this file, making sure it's INSIDE the loop. You're likely going to have to play around with the location of the code to change where the button is rendered on your site. Once you get the best location for the button, save the file.
Step 6: Next, open up the file in the same theme directory that's called footer.php. Copy and paste the following code into this file, right BEFORE the closing </body> tag: <script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script>. Save this file.
Step 7: If you reload your website, you should see the +1 button rendering in the spot you'd like it to. However, right now, the button is only "+1-ing" the current URL, not the URL of the post. To change this, once again open the file that contains your loop. Find the +1 button code and change it to: <g:plusone href="<?php the_permalink();?>"></g:plusone>. Make sure that, if you made any modifications to the +1 button when you first got the code (like the size), make sure you don't loose that. Save the file.
That should be it! You should have the Google +1 button all set and running on your WordPress-based site.
How to display random images using PHP
There are a bunch of cool effects that you can add to a website to make it stand out. Some involve CSS and interesting features, but others are the back-end work of a website. One thing that you may want to add to your website...
How to display random images using PHP
There are a bunch of cool effects that you can add to a website to make it stand out. Some involve CSS and interesting features, but others are the back-end work of a website. One thing that you may want to add to your website is the ability to display random images. Whether it just be random images that you took or made, or ones that you find on the Web, the following tutorial will show you how to accomplish this.
The code that you're going to have to use is below. Please look at the comments (identified by a // at the beginning of a line) to see what needs to be modified to fit to your website.
<?php
// Change this number to the total number of images that you'll be using
$total = "5";// Change to the type of files to use. Examples include: .jpg or .png
$file_type = ".png";// Change to the location of the folder containing the images
$image_folder = "/random";$start = "1";
$random = mt_rand($start, $total);
$image_name = $random . $file_type;
?>
If you would like to have each image link to a website when a user clicks on the image, use the following code:
<?php
if($image_name==1){echo "<a target=\"_blank\" href=\"#\"><img src=\"$image_folder/$image_name\" alt=\"$image_name\" /></a>"; }
if($image_name==2){echo "<a target=\"_blank\" href=\"#\"><img src=\"$image_folder/$image_name\" alt=\"$image_name\" /></a>"; }
if($image_name==3){echo "<a target=\"_blank\" href=\"#\"><img src=\"$image_folder/$image_name\" alt=\"$image_name\" /></a>"; }
if($image_name==4){echo "<a target=\"_blank\" href=\"#\"><img src=\"$image_folder/$image_name\" alt=\"$image_name\" /></a>"; }
?>
Use the format above if you have more than four images. Change the # symbol in the <a href> of each if statement to the link that you'd like to use.
If you have any questions, please leave a comment below and we'll try to assist you.
CSS3 How To: rounded box corners, box shadows, and text shadows
Continuing with our CSS3 tutorial series, today we take a look at rounded box edges, box shadows, and text shadows - all using CSS3. Rounded box corners Many websites nowadays are making some of their more boxy elements have rounded edges to add elegance. Before...
CSS3 How To: rounded box corners, box shadows, and text shadows
Continuing with our CSS3 tutorial series, today we take a look at rounded box edges, box shadows, and text shadows - all using CSS3.
Rounded box corners
Many websites nowadays are making some of their more boxy elements have rounded edges to add elegance. Before CSS3 was around, this would have to be done via an image. But, here's how to do it via CSS3:
Let's break this down: the #rounded-edges part is the name of the element. Feel free to change the name, just keep the # in there at all times. The border-radius part is what actually makes the magic happen - don't change this. And last, but not least, the 5px part is how rounded the edges of the box should be. The bigger the number, the more rounded the edges and vice versa.
Keep in mind that you may have to make some modifications to this code to make the border-radius work in all modern Web browsers. For example, for Firefox, you're going to want to use -moz-border-radius in place of border-radius.
Box shadows
To add some depth to their boxy elements, websites are now adding shadows to the mix. They're extremely customizable, and easy to integrate. Here's how:
Let's break this one down as well: the #box-shadow part is the name of the element. Feel free to change this, just be sure to keep the # part. The box-shadow is what makes the magic happen - don't change this. The first 10px is the horizontal offset of the shadow. If the number here is position, the shadow will be on the right. If the number here is negative, the shadow will be on the left of the box. The next 10px is the vertical offset. If the number here is negative, the shadow will be above the box. If the number here is positive, the shadow will be below the box. The 5px is the blur of the shadow, or in easier terms - how sharp the shadow is. If the number here is 0px, then the shadow will be sharp. The bigger the number, the smoother the shadow. The #000 part is the color of the shadow. In this example, the shadow color is black.
Again, you may have to change the box-shadow part inside the {} to make the styling work in all Web browsers: for Safari and Chrome, change it to -webkit-box-shadow. For Firefox, change it to -moz-box-shadow and for Opera, change it to -o-box-shadow. You can have multiple box-shadows (each separated by a ; ) in the same element to make the effect work in all browsers.
Text Shadows
To add some cool effects to text, some web designers may add a shadow to the text to give it some depth. This wasn't new in CSS3, but is beginning to become more widely used as support for text shadows is improving. Here's how to make text have shadows:
And of course, let's break this down: the #text-shadow part is the name of the element. Feel free to change this, but be sure to keep the # part. The text-shadow part is what makes the magic happen - don't change this. The #000 is the color of the shadow. In this example, the color of the shadow is black. The 20px part is the x-coordinate of the shadow, while the -10px part is the y-coordinate. Finally, the 5px part of the blur of the shadow - in other words, how sharp it is.
That's it! Now you can make boxes that have rounded edges, have a shadow, and have text inside them with shadows to add a cool small effect.
How to encrypt your iOS device backups in iTunes
With the report coming out earlier today that the iPhone and iPad track users' locations without them knowing it, many users have begun worrying that there location information may be available to anyone who has access to their device or device backups. One tip that...
How to encrypt your iOS device backups in iTunes
With the report coming out earlier today that the iPhone and iPad track users' locations without them knowing it, many users have begun worrying that there location information may be available to anyone who has access to their device or device backups. One tip that many have begun giving is to encrypt your iOS device backups in iTunes so anyone who wants to access the file that stores location information needs a password to do so.
Here's how to setup backup encryption for iOS devices in iTunes:
Step 1: Plug your device into your computer via a USB cable. If iTunes does not automatically open, manually open it.
Step 2: If your device automatically begins to sync, allow it to do so. If it doesn't, continue to the next step.
Step 3: Click on your iOS device in the sidebar on the left in iTunes. Make sure you are on the "Summary" section.
Step 4: Scroll down to the bottom until you see a section titled "Options." From there, find an option that says "Encrypt iPhone backup." This may be somewhat different from device to device, but the general text is the same.
Step 5: Click the check box next to Encrypt iPhone backup and enter a password you'd like to use. DO NOT FORGET THIS PASSWORD!
Step 6: Click the "Set Password" button and let iTunes and your device do its thing. Once it's done, your backups will be encrypted and if someone wants to use them, they'll need that password you entered in step 5.
That's it!
Loading ...
