Currently browsing: Tutorial

My own blizzard

Boy, such a flurry of events have been whirling around me and my kin lately!

An American Visit

Friday I chaperoned Jessie’s class field trip to American Village in Montevallo. Even with the bad weather coming through (tornadoes and rain galore, yuck!), we still had a very good time. And I tell ya, I really wish I had visited American Village when I was Jessie’s age … I think I would have looked at history a whole LOT differently!

I’ve suggested to Jim that we head down there one weekend for one of their events or sometime in the summer when the weather is a little more accommodating!

Despite the bad weather and dampened spirits (my Lord, I’ve never seen so many pouty faces in one place! LOL!), I did manage to snap off a few shots:

The Home Front

We had our first interested party view the house last week. Friday night, to be exact. Our realtor called this weekend to let us know that they liked the layout and wanted to come back and see it again. So this weekend we busted some tail and cleaned and painted the entire bottom level. Jessie hasn’t packed a whole lot because she’s with her mother more these days, so we’ll get around to finishing her room last.

I’m trying not to get TOO excited, but I can’t help but want to get my hopes up!

We still haven’t gotten an answer yet on whether or not we got the loan on the new house. More paperwork was needed and faxed off last week. I’m hoping we hear something this week.

OMG … snow? In the South?!

Yes, it snowed here. We received between 3 and 4 inches here. Some parts of Birmingham received up to 7 inches!!!

Jessie was at her mother’s, so I’m sure she had a good ole time in it. I did manage to get a few shots of the pretty white stuff before the other neighborhood kids ran amok and transformed it all to dirty snowballs and lumpy stick-wielding snowmen. :lol:

Pass the Halls!

Either it’s the irritants in the cleaners, the paint fumes, or being out in the rain all day Friday (or a combination of all three), but I have been sick all weekend and feel generally like death warmed over today. I traipsed in to work to discover that my machine was hosed, so I couldn’t have done much of anything productive even if I wanted to.

Everyone kept telling me I should’ve stayed home because I sounded terrible — I think I’ll take their advice and stay in tomorrow. *ugh*

And last but not least …

One of my themes has recently been featured in a WordPress tutorial over on YouTube:

A big thanks to Kristie for letting me know about it, and to ktinboulder for selecting my theme!

WP Themes How to: Revolving Images in the Header

I was contacted a while back by Barbara Weibel, a very nice lady with a question about a WordPress theme modification. She wanted to know the best way to add a set of rotating images into the header — not like the rotating images php scripts that have been making the rounds for the last few years. She needed something dynamic, similar to the “cover flow” effect used by iTunes.

Boy, that one stumped me. I’m not a Flash or Ajax guru, and Jim was tied up in his own projects. I gave her what little helpful advice I had and hoped for the best.

Barbara emailed me again last week to let me know she had found a solution. She’s used my Translucent Dreams theme as a base for her blog’s design (which, by the way, is a VERY good read if you’re looking for new bloggers to add to your blogroll!) and has found that using the NextGEN Gallery in the header accomplished the effect she was wanting.

Take a look at her blog, Hole in the Donut, and you’ll see what I’m talking about.

Barbara was nice enough to allow me to publish her notes detailing the steps she took to implement this into her blog. I took the liberty of adding some screenshots from my own test blog to help make it easier to follow along.

Note: You may need to play with the settings once you have it set up to adjust to your liking …

First, I installed and activated the WordPress NextGEN Gallery plugin. This adds a settings panel to the Dashboard that is titled “Gallery”

Second, I installed and activated the NextGEN ImageFlow add-on for the NextGEN Gallery. This shows up as an added option at the bottom of the “Gallery” settings panel on the Dashboard.

**IMPORTANT:** Be sure to upload reflect2.php and reflect3.php to your Wordpress root folder!!

Next, I created and uploaded a gallery of the photos I wanted to show up in the header using the “Add Gallery/Images options in the NextGEN Gallery settings panel. I made sure they were all the same size (500 x 333) and although the documentation says you can use vertical format photos, I limited mine to horizontal, simply because I knew they would work better in the header.

Some changes were needed in the stylesheet in order to get the design to align correctly. Add this to the style.css file:

#gallery {
height:259px;
width:800px;
position:absolute;
top:-100px;
left:40px;
}

Then I modified the header.php to be:

<body>
<div id="wrap">
<div id="header">
<div id="gallery">
<?php
echo nggShowImageFlow(2);
?>
<h1><a href="<?php echo get_option('home'); ?>/"><?php bloginfo('name');
?></a></h1>
<h4><?php bloginfo('description'); ?></h4>
</div>
</div>
<div id="sidemagic">


NOTE: The (2) in the above php echo code refers to the number of the gallery I created — your number may be different!

Then I went back to the style.css and made the h1 and h4 position absolute and tinkered with the height for the headline and sub-headline to get them to lay where I wanted them. It now looks like this:

#header {
margin:0 auto;
padding:0;
height:259px;
width:900px;
background-image:url(images/header.jpg);
background-repeat:no-repeat;
background-position:top center;
position:relative;
}

#header h1 {
font-family: Trebuchet MS, arial, sans-serif;
font-size:35px;
color:#ffffff;
line-height:normal;
position:absolute;
top:100px;
left:-30px;
}

#header h1 a, #header h1 a:hover, #header h1 a:link, #header h1 a:visited, #header h1 a:active {
color:#ffffff;
text-decoration:none;
}

#header h4 {
text-align: right;
line-height: 25px;
font-family: Trebuchet MS, arial, sans-serif;
width: 300px;
height: 80px;
overflow: hidden;
font-size: 16px;
font-weight: normal;
font-style: italic;
color: #5dc6cf;
position:absolute;
top:105px;
right:-30px;
}

Also, you’ll need to replace the header.jpg file in the images directory with this one.

You may need to tinker a bit to get everything in just the right place. The nice thing about the NextGEN Gallery plugin is that you can exclude photos with just a check mark, so I still have all 36 in the gallery and I can go back periodically and change which ones show up.

A note on gallery settings

These are suggested, but feel free to deviate to fit your theme:

Gallery, ImageFlow, General Settings:

For this one, set “Max. number of images” to zero: (Gallery, Options)

Barbara’s information

Barbara Ann Weibel, Writer/Photographer
Blog: http://holeinthedonut.com
Photo Library: http://easywebsite.net

In closing

A big thanks goes to Barbara for sharing this with me and allowing it to be posted here. Again, I hope this is helpful to some of y’all. Feel free to comment and ask questions via the comments form below!

Pre-load images with CSS

Most anyone who’s been messing around with webpages and HTML over the past few years I’m sure is familiar with the concept of pre-loading images. If you have a rollover effect (for instance, mouseover effects on a menu bar), it makes good sense to pre-load your images so that the effect shows up immediately when your visitor moves their cursor over the image/object. For a long time, the most popular way to accomplish this was by adding javascript to your HEAD section and an onload snippet to your BODY tag.

There is a much easier way to do this with CSS. I had ran across this a long time ago, but never bookmarked the link.

Bad designer, BAD!

Luckily, I ran across it again recently and thought I’d post it here in case anyone else was interested in how to do this.

In your stylesheet, add the following:

.hiddenpic {display:none;}

Then add your image that you want pre-loaded just following the </HEAD> tag. For example:

<img src="/images/navhover.gif" alt="" class="hiddenPic" />

OR, you could put several images inside a DIV:

<div class="hiddenPic"><img src="/images/hover1.gif" alt="" /> <img src="/images/hover2.gif" alt="" /> <img src="/images/hover3.gif" alt="" /></div>

Just keep in mind that these images will load before you page does, so don’t overdo it with HUGE images!

Blogger How-To: Add Sticky Content / Fake Front Page

Working on my most recent side project, I’ve had to brush up on my Blogger/Blogspot coding. One of the things requested of me was to find a way to have a static front page on a Blogger site.

WordPress has this feature built-in, but Blogger currently does not.

I know of two ways that this can be accomplished:

Solution #1

Create a new post with the content you want to show on the index of your Blogger site and save as normal. When you add more content to your site, re-open your “front page” post. Click Post Options. Change the Post date and time to values which chronologically fall after those of your last “regular” post.

Now go to Settings, Formatting. Set it to show only 1 post on the main page.

The idea is to always keep the “front page” post as the newest, so it is the top post (and therefore the only one shown on the main page). You’ll have to do this every time you add new posts to your Blogger site.

Or …

Solution #2

I like to call this one the “Sticky Content method.”

A while back someone had shown me that enabling the showaddelement attribute in a Blogger XML template allowed you to add widgets above your posts. Basically, changing a small bit of code in your template …

… gave you this ability:

I’ve seen plenty of people do this to display Google Ads or other PPC stuff above their posts.

To do this, you’ll need to first download a fresh copy of your template — go to Layout, Edit HTML, Download Full Template.

Open it in your text editor of choice (use Notepad if you’re not sure) and search for type='Blog' or “posts”. Either of those should show you the section code containing the Blogger function for calling blog posts. You’ll see a line that says something along the lines of:

<b:section class='main' id='main' showaddelement='no'>

When you change showaddelement from ‘no’ to ‘yes’, you are then able to add widgets above your blog posts. Save the changes to your XML and upload it to Blogger (go to Layout, Edit HTML) using their upload form. Once that’s done, go add a widget by going to Page Elements (in Layout).

Click Add a Gadget, and add the HTML/JavaScript widget and type in the content you want to show on your front page and save.

Keep in mind: that this would show up on EVERY page on your site unless you adjust a couple things!

Download an updated copy of your template and open it in your text editor of choice. Now that you’ve added a widget, you should see something like this:

Hint: Look for the title of your widget if you get lost!

Change the following:

<div class='widget-content'>
<data:content/>
</div>


to this:

<b:if cond='data:blog.url == data:blog.homepageUrl'>
<div class='widget-content'>
<data:content/>
</div>
</b:if>


Basically, you are telling Blogger to only display that widget if the page you’re on is the home page (main page).

Now, let’s fix the blog settings so that nothing shows up on the main page except this widget. Go to Settings, Formatting, and set it to show no posts on the main page.

Pretty cool, huh?

Closing Thoughts

Whichever method you choose, make sure that you have some way for your visitors to access your site’s content. I suggest adding Blog Archive and Labels widgets. You could also use the Feed widget and put in your RSS feed to show your blog’s latest posts.

I hope the solutions I’ve posted are clear, but if you need anything explained further please feel free to ask in the comments below!

My WordPress 2.7 comment fix

I spent pretty much every waking moment I had at home this weekend trying to wrap my head around the new comment loop in WordPress 2.7. Otto’s detailed explanation was helpful, but did not give me a way to “break down” the new wp_list_comments function.

Finally frustrated, I hit the WordPress forums and mailing lists. Several posts in the forums pointed to Justin Tadlock’s recent post about making themes backwards compatible. Basically, you save a copy of your current (2.6) comments.php file and name it legacy.comments.php. Then add a small bit of code to your theme’s functions.php file:

This IS very useful and I’ll be needing it to update my released themes, but not quite what I was looking for for updating this site. Checking WP-Hackers, I hit gold — a post by Ryan Boren a couple months back detailing how to separate pings from comments gave me the nudge in the right direction that I had been looking for.

Callbacks

I don’t know why it never occurred to me before now, but using a callback allows you to breakdown a function (similar to the foreach loop used for comments in previous versions of WordPress). Hitting the forums again, I found a reference to Jeremy Clark’s post on using the comment callback function. This gave me exactly what I needed.

I used Jeremy’s comment threading post as a starting point for my comments.php file (view code). I fixed the alignment of most of the coding to make it a little easier to follow (and muck about, LOL).

Here’s a close-up of my modified the wp_list_comments reference:

Here I am changing the avatar size to 70 and will be using a callback function called “custom_comment” to format the results of the loop. Also, notice that the type is set to ‘comment’. For the time being, I am showing only comments (no trackbacks/pingbacks) until I figure out how I want them styled.

Now on to the functions.php file to show you how I formatted and corralled everything (view code).

Taking this route seems a bit overwhelming at first but IMO is the best way to go if you want your comments to look and/or behave a certain way.

Last but not least

If you haven’t already, don’t forget to add this snippet to your theme’s header.php file:

As shown in my example, make sure you add it before the wp_head() call.

Everything clear?

I hope this all makes some kind of sense. Please feel free to ask me to elaborate on anything I’ve posted here and I’ll try my best to explain!

Palin/Biden button

Several people have asked about the Palin/Biden button in my sidebar. The original layout was courtesy of my Cotillion sister, CalTech Girl. I smoothed out the fonts a bit and played with the layout. A couple of y’all have asked me to do some customizations and I thought, “Sure … Why not let everyone have one?”

Well … more like a “Why not let everyone have the ability to make their own!”

I’ve upload the PSD file here. I made this in Adobe Photoshop CS3 but previous versions should be able to open it. It should be pretty self-evident as to what to change for the button background and page background colors:

Screenshot:

Click to enlarge

The layer labeled “rounded” is the button itself. Simply select the layer and set to the color you want (hit Alt+Delete to fill).

The “Pg Background Color” layer colors the parts under the rounded corners to match your site. If desired, you could simply delete this layer and save as a transparent GIF or PNG.

Enjoy!

WordPress How-To: Temporary iMP-Links fix

Well after working on it for a few hours this morning (and re-writing my template about 5 or 6 times, LOL!), I was finally able to re-do my Links page. I’ve disabled the iMP-Links plugin and am using a template that I wrote earlier today in its place. Perhaps if/when a newer version is released, I may use it — or just write my own. *shrugs* Anyways, for anyone who’s interested, this is what I did…

I’m sure there’s a more elegant solution to this, but I haven’t had time to sit down and decipher and update the old code. If you were using this plugin (or wanting a layout like on my links page), this will get you by until a newer version is available.

I acquired the original collapsible javascript code from About.com. I was able to implement it into iMP-Links pretty easily, so I’m sure once the plugin has been updated, adding these back in shouldn’t be too much of a hassle.

First, you’ll need to copy the following code into a new text file and name it something like clmenu.js:

// Source: http://javascript.about.com/library/blclmenu.htm

function toggleMenu(objID) {
     if (!document.getElementById) return;
     var ob = document.getElementById(objID).style;
     ob.display = (ob.display == 'block')?'none': 'block';
}

Call it from your theme’s header.php file:

<script src="clmenu.js" type="text/javascript"></script>

Be sure to adjust the path in the code above to match the file’s path on your server!

Add the following to the end of your theme’s stylesheet.css:

.mC {width:100px; margin:5px; float:right;}
.mH {color:#60c; cursor:pointer;  font-weight:bold; border-top:1px solid #300;}
.mL {display:none; margin-bottom:10px;}
.mO {margin-left:10px; display:block;}

Now add the iMP-Links specific code (copied directly from the old plugin files) to the end your theme’s stylesheet.css:

#imp-links {}
#imp-links:after { clear: both; content: ""; display: block; height: 0; }
#imp-links .clearfloat { clear: both; height: 0; overflow: hidden; }
.switchcontent{display:none;}
/* Clearing the list style from kubrick theme */
html>body #imp-links ul { text-indent: 0; padding: 0; }
html>body #imp-links li { margin: 0; }
#imp-links ul li:before { content: ""; }
/* Clearing the list style from kubrick theme finished */
#imp-links ul.cat_list { list-style: none; text-align: center; padding: 0; margin: 0 0 20px 0; }
#imp-links ul.cat_list li { display: inline; margin: 0 10px; }
#imp-links ul.cat_list li a, #imp-links ul.cat_list li a:visited { padding: 3px 0; }
#imp-links ul.cat_list li a:hover { text-decoration: underline; }
#imp-links .imp-links-list { width: 45%; margin: 0; }
#imp-links .imp-links-list-left { float: left; }
#imp-links .imp-links-list-right { float: right; }
#imp-links .imp-links-list h3 { font-size: 1.1em; font-weight: bold; text-transform: uppercase; color: #555555; }
#imp-links .imp-links-list ul { list-style: none; border-top: 1px solid #dddddd; margin: 5px 0 0 0; }
#imp-links .imp-links-list ul li { border-bottom: 1px solid #dddddd; }
#imp-links .imp-links-list ul li a, #imp-links .imp-links-list ul li a:visited { display: inline-block; }
#imp-links .imp-links-list ul li a, #imp-links .imp-links-list ul li a:visited { display: block; padding: 4px 10px; }
#imp-links .imp-links-list ul li a:hover { background: #f5f5f5; }

You may need to adjust some of the values above based on your personal tastes and/or your theme’s layout and design.

If your theme has a links.php template pre-made, open it and add the red code below. If not, you can make a copy of your index.php and modify to something along the lines of the following code (don’t forget to delete the_loop!):

<?php
  /*
  Template Name: Links
  */
?>

<?php get_header(); ?>

<?php get_sidebar(); ?> 

<div id="content">

	<h2><?php the_title(); ?></h2>

	<div id="imp-links">
	  <div class="mC">

		<div class="imp-links-list mH imp-links-list-left"><?php $params = array( 'category' => '79',
		  'title_before'  => '<h3><a href="javascript:void(0)" onclick="toggleMenu(\'c79\')">',
		  'title_after' => '</a></h3><div id="c79" class="mL"><div class="mO">',
		  'category_before' => '',
		  'category_after' => '</div></div>',
		  'between' => '&nbsp;-&nbsp;',
		  'show_images' => 0,
		  'show_description' => 0 );
		  wp_list_bookmarks($params); ?></div>

		<div class="imp-links-list mH imp-links-list-left"><?php $params = array( 'category' => '80',
		  'title_before'  => '<h3><a href="javascript:void(0)" onclick="toggleMenu(\'c80\')">',
		  'title_after' => '</a></h3><div id="c80" class="mL"><div class="mO">',
		  'category_before' => '',
		  'category_after' => '</div></div>',
		  'between' => '&nbsp;-&nbsp;',
		  'show_images' => 0,
		  'show_description' => 0 );
		  wp_list_bookmarks($params); ?></div>

    </div>
  </div>

</div>
<?php get_footer(); ?>

Now that’s a small snippet of what I used on my Links page template. If you’ll notice, in the first link code snippet I’ve highlighted the two instances of c79 and 79. ‘79′ is the first link category that I wanted displayed, ‘c79′ is a reference id so the script knows which one to show/hide.

I had to use ‘c79′ instead of ‘79′ because ID attributes have to start with a letter, so use whatever you want, just make sure to keep them labeled the same for each instance, as it makes for easier troubleshooting should you have a problem.

If you’ll also notice, I did the same with the next category, whose category id number happened to be 80.

You’ll need to do this for each of the link categories you want displayed on your Links page. Like I said before, I’m sure there’s a more elegant solution out there, I’m just looking for a quick fix until either a newer version of the iMP-Links plugin is released — or I get time to sit down and debug the old one (no telling when THAT will be). To find your category id numbers, go to Blogroll, Categories in your WP-Admin.

If something’s unclear or needs further explanation, please let me know via the comments form below and I’ll try my best to answer any questions.

* TIP: If you did not previously have a links.php and created one using this tutorial as a guide, don’t forget to go into WP Admin and edit your Links page (Manage, Pages). Under Page Template, choose Links (or whatever you named the template in the ‘Template Name’ bit) from the dropdown list. If you do not see your template there, make sure you have named it (’Template Name’) in the file as shown above and have uploaded it to your theme’s directory on your server.

Gmail IMAP on the Helio Ocean

I’ve been browsing the Heliocity forums, trying to catch up on everything I’ve missed — and it seems there’s a LOT! LOL I ran across some great articles: Video Ringtone Tutorial, Tips for syncing your calendar, … and a lot more.

One that I ran across I found particularly helpful, discussing Gmail. Now that Google has so graciously opened up IMAP, we can now use it on the Ocean. How cool is that?

Because between you and me, the current/default Gmail app on the Ocean sucks ass.

So, without further ado (and a world of thanks to peetre001 for posting his settings), here’s what I am currently using to snag my Gmail:

Firstly, check your Gmail account and make sure that IMAP is enabled. To do this, go to Settings, Forwarding and POP/IMAP, and under IMAP Access make sure Enable IMAP is checked. Save your changes and now go to your Helio Ocean.

Go to the main menu and choose Message to access your email accounts. To set up a new account, go to Menu, 2/Setup Email Accounts. Once inside Email Accounts, go to Menu, 1/New Mailbox.

My settings are as follows, but feel free to deviate from the directions where appropriate:

• Set as Default — I left this unchecked, as I want my MyHelio account to stay the default account.
• Mailbox Name — I named mine Gmail IMAP to distinguish it from the other.
• Username – This is your Gmail username (email address): name@gmail.com
• Password – Put your Gmail password here.
• Display Name — Put whatever you want set as your “from” name here.
• Email Address — This is your Gmail address: name@gmail.com
• Use Signature — Check this if you want to specify a signature for your emails.
• Signature – If Use Signature is checked, your signature can be edited here.
• Incoming Mail Server Type — Set to IMAP.
• Incoming Mail Server — Set to imap.gmail.com
• Incoming Mail Server Port — Set to 993.
• Incoming Mail Server Secure — Make sure this is checked!
• Outgoing Mail Server — Set to smtp.gmail.com
• Outgoing Mail Server Port – Set to 465.
• Outgoing Mail Server Secure — Make sure this is checked!
• Outgoing Username — This is the same as your Username: name@gmail.com
• Outgoing Password — Put your Gmail password here.
• Date sort order — Set to your preference. I set mine to Descending.

Be sure to click SAVE! That’s it. You’re all set!

Again, I’d like to thank peetre001 and all the participants in the Heliocity forums for their tireless efforts in sharing Helio and Ocean related knowledge and tips to make our proverbial mobile lives easier!

How to: Track packages on your Helio Ocean

By request, this is a short ‘n sweet tutorial on how to get updates on your package’s delivery status on your mobile device. I had actually covered part of this concept in a previous post, but I’ll bet that some haven’t thought to apply this to tracking things.

Note:

Actually, this should work for pretty much ANY mobile device, but since I have the Helio Ocean, these directions are specific to it.

Credits:

• Special thanks goes to: Thox and the countless others at the Heliocity forums who’ve posted helpful information for the Helio Ocean (and countless other topics!)
• Link Love: The FAQ — if you know nothing, start here!

Tools you will need:

• Hardware: Helio Ocean
• Websites: ISnoop Universal Package Tracking, ZapTXT

Getting started:

This works for most major shipping methods (UPS, FedEx, USPS, or DHL/AirBorne). You’ll need your package tracking number. Open the ISnoop Universal Package Tracking site in your browser. Put in your tracking number and click the Track it! button. If any data has been entered in the system, you’ll see some kind of results, and a link will appear that says “Track this package via RSS”

Note: If no data is currently available, it will say “There is no data available yet for this tracking number. Please check back later.” It may need a few hours for the carrier’s system to be updated … simply try again in a few hours.

Now open the ZapTXT website. If you haven’t already setup an account, you’ll need to do so now.

Login to your ZapTXT account. Once logged in, you should be taken to your My ZapTasks page, under Custom Zaptask, put your RSS URL in the Website/feed to monitor field. Leave the keywords blank. For Send via, check Mobile (uncheck any others). Click Next step.

Note: If you have more than one tracking number/URL, you can click Add more sites to monitor and fill in those URLs there.

Here’s where it gets a little tricky:

ZapTxt will come back with the following message: “We found the following feed(s) that match the URL(s) you entered. Which of the following would you like us to monitor?”

Uncheck isnoop.net blog and check the box by your tracking number/link. Then, under Name this Zaptask name it as you’d like. (Suggestion: if tracking more than one package, you may want to label these by the sender, or the package’s contents.)

You can leave headlines and tags empty. Under What delivery method do you prefer?, make sure Mobile is checked. Then choose your preferred update frequency under How often would you like to receive updates? — I use As soon as possible to get real time updates (or as the carrier’s system is updated with a new status).

Finally, click Create ZapTask. When prompted with a popup asking if you’re sure you don’t want to assign any keyworks, click ok.

Note:

If you only wanted to be notified upon delivery, then you could add “Delivered” as a keyword. However, I wouldn’t recommend this unless you are tracking a LOT of packages. (Most of us like to know where our stuff is!)

In closing:

I hope you’ve found this helpful. I appreciate constructive feedback and comments. If a step is not clear enough or if something is confusing, please feel free to ask for clarification in the comments form below!

Thanks! :cool:

How to: Video for the Helio Ocean

Notes:

• Your PC’s configuration will differ from mine, so you may need to alter the process. I’m posting what worked for me and hopefully it will work for you!
• I have only tried this with YouTube so far, but hope to try out on other popular online video formats. Please feel free to comment below with your findings, thoughts, etc. — Please don’t ask me if I know if this will work with www.whatever.com … I don’t know. ;P — Rest assured that I will try to come back and post any and all findings. Take from that what you will. ;P
• Please note that this is NOT a tutorial on video rings!

Credits:

• Special thanks goes to: Thox, Anthonyrn, and the countless others at the Heliocity forums who’ve posted helpful information for the Helio Ocean (and countless other topics!)
• Link Love: The FAQ that started it all — if you know nothing, start here!

Tools you will need:

• Software: Firefox, Internet Explorer, Pantech Sync Software for Helio Ocean (if not already installed)
• Hardware: Helio Ocean, Helio USB cable
• Website: Convert Direct

Getting started:

The first thing you’re going to need is the URL to your video. I chose YouTube because they use FLV (Flash Video) format and there are many sites which can convert that to various other media formats for free. I’ve tried several sites which didn’t work out for one reason or another: would not play on the Ocean, the video playback was slow or crappy, or a combination of other reasons. Convert Direct happened to be the first one which worked quickly AND the video playback was smooth AND is free AND (for the most part) has a decent online/uptime percentage. (be aware: that may change in the future!)

So, here is an example video: http://youtube.com/watch?v=ewGk7aKjk7k — Copy the link, you’ll need that for the next step.

Go to http://www.convertdirect.com/ in Internet Explorer. For some reason, I couldn’t perform this process in Firefox (maybe a plugin incompatibility or an anti-Firefox site?). I haven’t had time to look into this, nor do I have an IE tab plugin installed at this time. It’s easier for me with two browsers open anyways so I can switch between them.

Under “Convert online flv youtube to 3gp/mp3/avi/wmv/mp4/mov directly” enter the YouTube link. Next to “Converts to:”, select 3gp (mpeg4+aac). Click the Convert button. Depending on the size of the video, this could take a few seconds to a few minutes — the longer the video, the longer it takes. When it’s done, you’ll see the Convert button grey out and a large yellow link show up below that says “Click the link to download the converted video“. The URL will look something like this: http://www.convertdirect.com/13826162151.3gp_1

Note:

For whatever reason, this link is an incorrect link. I don’t know if this is on purpose or even if the site owner is aware of it.

At this point, I copy the link and paste into Firefox. (Otherwise IE will open it and refuse to let you save it, or rather I couldn’t.) Trim off the “_1″ part following the 3gp extension and save somewhere on your pc. Once the file is done saving/downloading. Transfer to your Helio Ocean using the USB cable. Save to your external memory in the Helio Video folder.

In closing:

I hope you’ve found this helpful. I appreciate constructive feedback and comments. Any requests for videos, movies, video rings, etc. will be REMOVED and the poster’s IP banned from this domain. (there, you’ve been warned)

If a step is not clear enough or if something is confusing, please feel free to ask for clarification in the comments form below!

Thanks! :cool:

Next Page »