Archive for 'Web Design'

MySpace Resources

Before I start, I don’t like MySpace. Most of the pages look ugly. Yes, I said it, UGLY and I’m not the first to say it. The majority of them have text you can’t read because the background image is too busy and they never changed the color of the text so you can actually read it. The backgrounds also repeat so that doesn’t help either.

The other problem is the amount of pages that have content that children should not be seeing (also known as pornography). Great, I’m sure I’ll receive plenty of visits on that word alone. MySpace doesn’t seem to do much about the problem; I’ve seen so many of these types of pages. And, of course, they can’t allow a mother breastfeeding on one. What’s wrong with people?

Now, on to the real topic of this entry. I get a lot of visits from people looking for MySpace, because my domain used to be www.myphotoalbumspace.com, but I had decided to change it because it didn’t reflect what my blog was really about. Since I still receive visits for it, I thought I would help by providing resources for MySpace, but also resources that help make a MySpace page look better, not ugly.

MySpace MP3 Player Generator

Music Player

If you’re going to have music available on your MySpace page, (or anywhere for that matter) please do not allow it to automatically play when the page is loaded. That is the most annoying feature. Let your visitors decide if they want to play music.

Here is an MP3 player generator that allows you to select the option of not playing the music when the page is loaded. Select the No radio button, by default Yes is selected.

Music Player Generator Option

Add the URLs to the MP3s that you want available in the playlist. Again, select the No radio button so the music is not played when the page is loaded. Then click Generate the Code. Copy and paste this code into your MySpace page.

Use the Flash MP3 Player Generator to generate a MP3 Player with the MP3s you choose.

Friend Space

Customize your Friend Space to look how you want it to. There is a Friend Space Generator that will allow you to customize it with many options. After you first change an option, the preview box automatically displays how your Friend Space will appear.

Use the Friend Space Generator to generate your own customized Friend Space code.

Profile

Customize how your Profile is displayed. The Profile Editor has so many options to make your Profile look better! Customize the background, sections, headings and the main text by choosing colors, border, opacity, transparency, size and more. Below is a preview of a customized one I created to show an example of what it can do.

MySpace Profile Generator

It is not very hard to achieve the example above. The options are all self-explanatory so it is easy to customize using the editor. Much easier than creating the code yourself unless you know CSS.

Use the Profile Editor to generate custom CSS code for your Profile.

Nav Bar

This next one is a Nav Bar Generator. It lets you customize the default MySpace Nav Bar. Change the color, link separator and the links.

Use the Nav Bar Generator to generate a customized Nav Bar.

Colors

Need help choosing the right colors for your page? There is a Color Code Picker that will help you find colors without having to guess which code is what color.

MySpace Color Code Picker

Use the Color Code Picker to get color codes.

Credits

You may notice the above resources are located at Mashable. They have a lot of resources for MySpace, but, obviously I didn’t include them all. I didn’t like the layouts or the images. Most of them are too flashy or ugly. There’s that word again. And, yes, it is just my opinion!

Manually Customizing Your MySpace Page

I found a blog entry by Mike Davidson about Hacking MySpace Layouts. I recommend reading this if you would like to customize the CSS for your MySpace page without the use of generators listed above. It really is very easy and he includes plenty of helpful tips. Check out what he did to his MySpace page.

Other Resources

Here is a list of other places that I did not mention above, but are available for you to browse through for more layouts and generators.

Please note that many of these websites may include the same things. But, you may find something different at each one.

Now go make beautiful MySpace pages!

Need inspiration? Check out Derek’s MySpace page, KG’s MySpace page, Andrew’s MySpace page and Ben’s MySpace page. Or, you could just Stop MySpacing altogether.

CSS: Multiple Lines or Single Lines?

Over at Ordered List, there’s an entry about writing CSS selectors on single lines, instead of on multiple lines. There’s also a lot of comments from others discussing what they like. I like the whole single line idea, but it looks really messy. I like having everything appear organized. I also add comments so I can see what everything does, without having to try to remember later.

Example of multiple lines:

.link-title {
    color: #777;
    line-height: 1.3em;
    margin-bottom: 8px;
    padding-left: 45px;
    }

Example of single lines:

.link-title {color: #777; line-height: 1.3em; margin-bottom: 8px; padding-left: 45px;}

Before anyone says anything, I did try it on single lines. I really don’t like it. Single lines can be great if you have a very large amount of selectors, (and I do) but it doesn’t have that organized appearance.

Another reason why I don’t want to use single lines is that I would have to go through over 2,000 lines in my CSS file just to change it over to single lines. That is more work than I want to do.

Simple Stars Images for WP-PostRatings Plugin

The WordPress plugin WP-PostRatings is an AJAX ratings system for WordPress and comes with three sets of images: bars, squares and stars. There isn’t anything fancy about these images and don’t really look that great on a dark background. The stars didn’t have transparency, so there was white around them, making them very ugly on a dark background.

I tried looking around to see if there was anything better that I liked, but no luck. So, I decided I would try to make my own. I’m not an expert with Photoshop, but I know my way around enough to create something. I created a set that is similar to the ones for Unobtrusive AJAX Star Rating Bar, because I like how they look.

I used a Photoshop brush to make a star and then made duplicate layers of that for the images. These images would become: ratings_off.gif, ratings_on.gif, ratings_over.gif and ratings_half.gif. So, I need four layers of this one star. I also made another layer to make the outline of the star appear darker. This was actually by accident, but once I saw how it looked, I decided to keep it.

I call them Simple Stars. Here are the results, blown up to show detail:

Simple Stars Sample

From left to right: over, on, half and off. The first one is displayed when the cursor moves over, the second one is displayed when there are votes, the third is displayed when there are vote(s) and a half, and the fourth is displayed when there are no votes or at the end.

Sizes available are: 16×16, 32×32 and 48×48. Until I make this available for download, please contact me if you would like it.

Instructions for WordPress WP-PostRatings plugin only. To install, just extract the simplestars directory into the WP-PostRatings plugin directory (directory should be named postratings) and then go into the Ratings options in WordPress and select simplestars. The plugin automatically detects new folders with GIFs as long as they are named correctly.

AJAX-Enabled Wordpress Themes

AJAX seems to be a very popular feature on websites. I was curious as to how many WordPress themes are AJAX-enabled. Here is a large enough list of themes that have AJAX built-in.

I am not including a preview with these themes, but there will be a link to the demo (if available) and the website for more information and to download the theme.

  1. BloxPress
    • Demo
    • Website
    • Feature(s): Customize layout by dragging blocks.
  2. Ubiquitous
    • Demo (Unavailable)
    • Website
    • Feature(s): AJAX-enabled search.
  3. Giraffe2
    • Demo (Unavailable)
    • Website
    • Feature(s): AJAX comments.
  4. Commodore, Splat, CLI2 and IAK
  5. Unnamed
    • Demo
    • Website
    • Feature(s): AJAX shelf, live comments and preview.
  6. AjaxBerlee
  7. Binary Blue
  8. Lush
  9. Lush Greenz
  10. Durable
  11. IntraBlog
  12. iScattered
    • Demo (Unavailable)
    • Website
    • Feature(s): AJAX style switcher.
  13. Simplus
  14. ajaxBosa
    • Demo (Unavailable)
    • Website
    • Feature(s): AJAX comments.
  15. ajaxEmire
    • Demo (Unavailable)
    • Website
    • Feature(s): AJAX comments.
  16. Balance
    • Demo (Unavailable)
    • Website
    • Feature(s): Unknown.
  17. ajaxQwilm
    • Demo (Unavailable)
    • Website
    • Feature(s): AJAX comments.
  18. ajaxSubtle
    • Demo (Unavailable)
    • Website
    • Feature(s): AJAX comments.
  19. Ernest
    • Demo (Unavailable)
    • Website
    • Feature(s): AJAX effects.
  20. Web 2.0
  21. Reflect

This list probably doesn’t include every AJAX enabled theme available, but it is all I could find right now. Also, the themes that begin with ‘ajax’ are modifications of the original themes.

The Best WordPress Themes

I know there are a lot of blogs that discuss the best WordPress themes, but sometimes I see themes in their lists that I don’t really think should be considered the best.

Here is a collection of the best, in my opinion, WordPress themes not in any particular order. Included for each theme is a preview of the theme along with a link to the theme’s demo (if available) and website, and a reason why I think it is the best.

Cleaker

This one is a beautiful three-column theme. It was my first experience with three columns. After a while, I just needed something different. All the colors go well together. I also liked this one because I could edit the CSS file very easily as it is well organized.

Merdeka

I absolutely love the hidden navigation in this one as well; similar to the one in Foliage Mod (#9 in the list). The colors in this theme go beautifully together.

Subtle

I like the transparency for the menu. This theme looks really good. There are also a few styles available for this one. The Apart style is my favorite (similar to the A List Apart website).

Gridlock

Gridlock offers quick access to RSS, integrated del.icio.us functionality, plus a place to link to Flickr or another photo system. Gridlock has Mike Davidson’s sIFR Rich Typography system built directly into the theme as well, offering a powerful Flash-based typography tool for typophiles and other design-types alike.

I used Gridlock for a very short amount of time. I liked it because it had that web-zine style to it. Also, as stated above, it has some nice features included.

FFF

This is a very green theme. One nice looking feature is when you hover over the previous posts; give it a try on the demo. I’m not really fond of left aligned themes, but this one looks great being left aligned, because the main content isn’t on the left, it’s more towards the center.

Squible

This is one of those non-blog-like themes that are becoming more popular. My favorite feature in this theme is the bottom where the previous posts and asides are listed. They are organized in a nice format.

Emire

Calm and aesthetically pleasing, Emire exudes an air of professionalism.

I agree with the above statement. This is a great theme for personal and business blogs. I don’t normally like black themes, being that usually the safest color for text can only be white, which is very boring. But this theme looks really good and isn’t hard on the eyes. I think the shade of green chosen helps with this.

JS Theme

I love how the categories are at the top of the page, rather than on the side, where usually you don’t see them if they are underneath other content.

Foliage Mod

I really like the pull tag at the top of this one. It keeps the navigation out of the way, separating it from the content. Again, with the black, it doesn’t look too bad with the nice shade of green on the bottom.

U4 Style

U4 Style looks really good. I like how the date blocks and the comments pop out, so they are easily seen. The green menu bar at the top is bright, but not blinding.

Fresh

This theme is fresh with the blue and green color scheme. It has that Web 2.0 look to it that most people want now. It’s very pretty!

If you think there is a theme missing that should be included here, leave a comment with your reason for liking it and the website for the theme so I can look and decide if it should be added.