Modifying The VodPod Widget

Update: This post is aging, I believe VodPod might have changed their code a little bit, so if you read this and have any problems PLEASE let me know so I can update the content. 🙂

VodPod is a social video tracking service. If you come accross a video while surfing the web, you can post that video to VodPod and share it with others. One of the coolest things about VodPod is the VodPod widget, which displays a queue of your most recent videos, most popular videos, top rated videos, or videos from a certain category.

WordPress.com offers a VodPod widget that you can add to the sidebar of any given theme. Even though you can customize your VodPod widget to an extent from your Pod widget page, the default layout of the horizontal widget tends to look really nasty on some themes on WordPress.com. So, I decided to customize my VodPod widget.

In order to do this, I’m assuming that you either have your own WordPress blog hosted, or you have purchased the CSS Editing upgrade from WordPress.com (it’s only $15 a year, and if you’re crafty enough, it’s worth every darn penny).

First you need to setup your VodPod widget. If you’re using WordPress.com, login to your VodPod account and create a widget for your Pod, choosing “WordPress.com” in the “Blog or Website” drop down menu. Once you’ve gotten the long, strange, cryptic line from VodPod, place it in the “Pod URL” portion of your VodPod widget on WordPress.com.

If you’re hosting your own WordPress blog, place the code in a text widget or incorperate the code directly into the theme files. To do so, download the theme files and edit them in a text editor like WordPad or Notepad. Alternatively you can use the built-in theme editor that comes with WordPress, which is located on your “Presentation” tab in your dashboard.

Now that you’ve gotten the basic widget installed, all you need to do is edit the CSS. This next portion is for WordPress.com users, if you’re hosting your own WordPress blog you can use the next steps as general guide lines or just skip to the example CSS file.

CSS Customization: WordPress.com

When I was first trying to edit the CSS for my VodPod widget on WordPress.com, I couldn’t seem to get anything to work correctly. I figured out, in the end, that the CSS for the VodPod widget is actually loaded after the CSS for your overall blog. So anything that I was putting into the “Edit CSS” field on WordPress.com was being overridden by the VodPod CSS file. To counter this, you must place “!important” after every property & value in the portion of the style sheet for the VodPod widget.

Meaning, if you want the titles of the videos to be blue:

.vodpod_videos_widget .vodpod_video .vodpod_video_title {
color: #0000FF;
}

This will not work, because the VodPod style sheet is inline, it has priority. To give our CSS priority we need to use !important

.vodpod_videos_widget .vodpod_video .vodpod_video_title {
color: #0000FF !important;
}

Okay, now that that is taken care of, here’s a list of CSS selectors and what they will define in the VodPod widget:

.vodpod_videos_widget
Defines overall widget space. Use to define width of the widget, background color, etc.

.vodpod_videos_widget .vodpod_header
Widget Header Overall

.vodpod_videos_widget .vodpod_video
Define video thumbnail/description overall container.

.vodpod_videos_widget .vodpod_video .vodpod_video_thumbnail
.vodpod_videos_widget .vodpod_video .vodpod_video_thumbnail img

The video thumbnail. First is class for overall thumbnail area, second is the thumbnail itself.

.vodpod_videos_widget .vodpod_video .vodpod_video_placeholder1
In the default widget the video title has a grey background, this is that background.

.vodpod_videos_widget .vodpod_video .vodpod_video_title
Video title.

.vodpod_videos_widget .vodpod_video .vodpod_video_views
Number of Views

.vodpod_videos_widget .vodpod_video .vodpod_video_created_at
Date video was added to Pod. (This is hidden by default)

.vodpod_videos_widget .vodpod_footer
Footer.

.vodpod_videos_widget .vodpod_footer .vodpod_see_all
The “See All” Link.

.vodpod_videos_widget .vodpod_footer .vodpod_powered_by
“Powered by” link.

The styles are pretty self explanatory. If you’re having trouble, make sure to use them with the preceding classes before the one you’d like to change. The reason I listed them that way was because without the preceding classes, I couldn’t get anything to change with the target class.

Here’s a couple examples.

This first one is from my blog. I used the Unsleepable theme and placed the VodPod widget in the right sidebar, then moved it to it’s current position using CSS (also included). Click here to download the CSS File.

Here’s the default style sheet for the horizontal VodPod widget: Click Here to View the File

If You Host Your Own WordPress Blog
If you host your own WordPress blog, you need to place the CSS for the VodPod widget in the “style.css” file that is included with every theme. It’s easiest if you place it at the bottom so you’ll always know where it is if you need to edit the code later on.

I’ll add some more examples later on. I hope this helps some people!

Advertisements

4 thoughts on “Modifying The VodPod Widget

  1. Nice Tutorial Jeremy! We’re launching a slew of new widget stuff on Tuesday, so stay tuned.

    I think this is the first time I’ve seen anyone place the horizontal widget at the bottom of their blog. Obviously some display issues with this, since you had to create a ton of bottom padding so that there is room for the video to play. I’ll see if I can get a fix in place so that the widget will detect when it’s anchored at the end of a page, and play the video above the widget.

    Drop me a line if you ever have any questions about anything vodpod or widget related, spencer at vodpod.com.

  2. Hey Spencer!

    Thanks for the heads up! I’ll be sure to check out and dissect the new widgets as soon as I can! 😀

    I actually did try to fit it in at the top of the blog, but it posed a problem with the Unsleepable theme because the footer is only displayed on the main page. So, any padding that I used to displace the sidebar and content stuck when viewing a single post. Needless to say, it wasn’t pretty. I might switch to a different theme to allow me to place the horizontal widget in more viewable real estate on the page.

  3. Hey Jeremiah,

    That’s an awesome tutorial! Thanks a lot for doing it for us. I was wondering if you could tell me what I would need to change to make the videos appear at the bottom of the page? (Right about the footer).

    Thanks a lot,

    Ruhi

  4. Hey Ruhi!

    It should be pretty simple to do what you’re discribing. I had mine located at the bottom of the page before I moved them to the top.

    Find out how much vertical and horizontal space you’ll need for your widget, then use margns or padding to create the vertical space above your footer (usually designers use the #footer Id, but your theme may be different). Then adjust for the horizontal space using width properties.

    Once you get enough room for it, put your widget in the sidebar, and add the “position: static;” property to the sidebar your widget is located inside. This will allow you to absolutely position the widget anywhere in the page. Then just use absolute positioning to move the widget around the page to your desired location.

    Hope that helps!

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s