Currently browsing: theme design

Stock your iPhone with knowledge

Earlier this week, I ran across an interesting article by Sean Aune titled “40 Essential iPhone Applications For Web Designers.” It’s a very impressive list, but I didn’t realize until I started looking for the apps in iTunes that the majority of them were not free. Granted, I certainly don’t mind buying an app or two now and then, but I couldn’t very well justify buying 20 or 30 in one sitting. (plus I like keeping my screens few and meticulously organized!)

I may come back later and snag a database app or two, but I didn’t want to fill my iPhone with reference apps which looked to be not much more than common cheat sheets that you can find anywhere on the net. I discovered some handy references posted to MakeUseof’s website a while back and an idea struck me — it would be a lot easier (and cheaper) to use a file manager and simply store copies of these references, cheat sheets, and other essential files on my iPhone.

I mean, hey, wouldn’t it be cool to be sitting there working on one of my themes and look to my iPhone as a reference tool?

I had tried a couple of different file managers a few weeks ago, but never really found anything that I loved. Most apps that I’d looked into required signing up for an account on a website — and most of them were not free services. I needed something that didn’t require an internet connection for those times when I can’t get to a PC. I took a peek at Pandora Box yesterday and happily discovered that DigiDNA’s FileAid (normally $4.99 if memory serves me) was FREE due to a promotion!

As of this post, FileAid is still free, but who knows for how long?

Per DigiDNA’s website, “FileAid is a file manager and viewer for the iPhone and iPod Touch.” Basically, you can copy files over to your iPhone or iPod Touch wirelessly (by FTP) or via USB using DiskAid, which is their PC/MAC tool which can also copy files onto your device. Personally, I found that FileAid does exactly what I need, and can’t see myself using DiskAid. I love that I can use FileAid to connect to my iPhone via FTP and copy over my favorite tech references and cheat sheets, work-related documents, personal files, and other things that I would want to carry out with me without the need to use a 3rd party website. It’s now one of the most essential apps on my iPhone.

According to DigiDNA’s website, FileAid supports a pretty decent list of file types:

• Images (JPG, PNG, GIF, TIFF and others)
• PDF
• MS Office (Word, Excel and PowerPoint)
• iWork (Pages, Numbers and Keynotes, iWork 09 not yet supported)
• OpenDocument (OpenOffice) (Text, Spreadsheet, Presentation)
• Plain Text and RTF (Rich Text Format)
• Audio (MP3, VBR, AAC, Audible, Apple Lossless, AIFF, WAV, CAF)
• Video (standard iPhone formats : H.264, MPEG-4)
• Web Archives
• HTML files
• ZIP Archives

So far I’ve loaded various images, PDFs, TXTs, HTML and DOC files onto mine. Had no problems with any of those and will try out more later this weekend.

FileAid FTW!

So if you’ve been thinking of downloading a few reference or cheat sheet apps, you may want to consider going a cheaper route using FileAid or another file manager of your choosing.

Turn your iPhone into your own personal library.

Updated WordPress Theme: Black Hat

This update contains several fixes and enhancements.

Details

Black Hat is a dark minimalist theme based on Adrian Diaconescu’s Corporate Sandbox, which is of course based on the Sandbox framework. It is has been built specifically with WordPress 2.7 in mind, but is also backwards compatible for version 2.6. (Sorry, I will no longer be supporting version 2.5 or older.)

Stickers icons courtesy of DryIcons. Favicon by Brian Brasher.

Features

Theme option for changing sidebar location – Pretty self-explanatory, there’s a theme option so that the sidebar can easily be moved from left to right and back again from within the WordPress admin panel. The sidebar can also be removed altogether using this option.

Sitemap template – If desired, you can create a sitemap for your blog by simply using this template.

Links page template – If desired, you can create a links page by simply using this template.

Printer-friendly stylesheet – Something I think a lot of users don’t think about until someone tries to print a post. Personally, I think all blogs should have these!

Admin & Login links – Many WordPress-savvy users don’t need a link to get to the Admin panel, but it’s nice for those of us who can’t remember the exact URL for it!

Favicon & “web clip” icon – Something else I think a lot of users don’t think about. Personally, I hope all my users replace these files with their own. A favicon helps your blog stand out, IMO. Web clip icons are used by iPhone and iPod touch users when adding a bookmark to the Home Screen.

Visual sticky post indicator – With the introduction of sticky posts in WordPress 2.7, I’ve noticed that it’s hard to tell if a post is sticky or not. I like visual aids, and this is one.

Easy to implement Feedburner links – By default, Black Hat features a feed icon linked to the blog’s RSS feed. This can be changed to a Feedburner RSS feed by simply updating the Theme Options page. Additionally, you can also add the Feedburner email subscription link for your feed.

Default and conditional feed options – By default, Black Hat includes the coding for the following feed types: RDF/RSS 1.0, RSS .92, RSS 2.0, Atom 0.3. The RSS feed for all comments for your blog is also included. (note: these are overwritten if using the Feedburner option instead)

Conditional feeds: If viewing a single post, the comment feed for that post is available. If viewing a category, the feed for all posts in that category is available. If viewing a tag, the feed for all posts with that tag is available.

Additional/SEO meta tags – When developing my themes, I take the liberty of adding many commonly used meta tags. Most of the information is automatically filled in via various WordPress commands and can easily be modified by the user.

Twitter integration – In the post footer (when you click on a post, not viewing the index or archive page), there is a “Share on Twitter” link. You can also display your latest Tweet in the sidebar by updating the Theme Options with your Twitter username.

Related Posts feature – This function looks at the tags for a post and finds all posts matching those tags. If no tags are specified for a post, this function will not show up. This function can be disabled via the Theme Options.

Customized default avatar (Gravatar) to match theme design – Black Hat includes an avatar to match the theme style. To use, you would simply login to the WordPress Admin panel and set the custom avatar as default.

More detailed information on these and other features can be found in the theme’s readme file!

Fixes

• Comments displaying improperly (or not at all)

• Related Posts function now matches all tags, not just the first one listed.
  • If a tag has been used only once, it is not included in the search.
  • If only one tag is used, and it has only been used once, Related Posts function will not show.

• Comments and trackbacks now separated.
  • If both trackbacks and comments exists, comments count corrected.

• Favicon corrected for backend (WP Admin).

• Navigation links added to post single view.

Availability

Demo | Download

Open call to Black Hat theme users

Having all this time off lately has afforded me something that I hadn’t previously had — an opportunity to spend a great deal of time on my Black Hat theme. I’ve taken the last update further by incorporating more theme options. As of right now the following can be added or controlled via the Theme Options: Sidebar location (and/or removal), Feedburner URL (replace the default RSS feed link in sidebar), Feedburner email subscription link, meta keywords, latest Tweet in the sidebar, Related Posts.

What I’d like from you is: what functionalities would you like to see added to Black Hat? I am getting close to releasing this update and would love some feedback on what should be added next.

Updated WordPress Theme: Black Hat

I normally don’t post updates to my themes here on the blog, but I think this one warrants an update post for a variety of reasons. This update has been so extensive, I want to post a little more information on this its features as well as its development. I also want to highlight what the theme has to offer — while this is all is located in the readme file, I don’t think I laid everything out in the original introduction post. And last but not least, I wanted to cite the various resources that I have used in both the development and updating processes.

Details

Black Hat is a dark minimalist theme based on Adrian Diaconescu’s Corporate Sandbox, which is of course based on the Sandbox framework. It is has been built specifically with WordPress 2.7 in mind, but is also backwards compatible for version 2.6. (Sorry, I will no longer be supporting version 2.5 or older.)

Stickers icons courtesy of DryIcons. Favicon by Brian Brasher.

Features

Theme option for changing sidebar location – Pretty self-explanatory, there’s a theme option so that the sidebar can easily be moved from left to right and back again from within the WordPress admin panel.

Sitemap template – If desired, you can create a sitemap for your blog by simply using this template.

Links page template – If desired, you can create a links page by simply using this template.

Printer-friendly stylesheet – Something I think a lot of users don’t think about until someone tries to print a post. Personally, I think all blogs should have these!

Admin & Login links – Many WordPress-savvy users don’t need a link to get to the Admin panel, but it’s nice for those of us who can’t remember the exact URL for it!

Favicon – Something else I think a lot of users don’t think about. Personally, I hope all my users replace this file with their own. A favicon helps your blog stand out, IMO.

Visual sticky post indicator – With the introduction of sticky posts in WordPress 2.7, I’ve noticed that it’s hard to tell if a post is sticky or not. I like visual aids, and this is one.

Easy to implement Feedburner links – By default, Black Hat features a feed icon linked to the blog’s RSS feed. This can be changed to a Feedburner RSS feed by simply updating a file to include your Feedburner feed URL. There is also pre-written coding for the Feedburner email subscription link. Another simple edit can enable this feature.

Default and conditional feed options – By default, Black Hat includes the coding for the following feed types: RDF/RSS 1.0, RSS .92, RSS 2.0, Atom 0.3. The RSS feed for all comments for your blog is also included. Conditional feeds: If viewing a single post, the comment feed for that post is available. If viewing a category, the feed for all posts in that category is available. If viewing a tag, the feed for all posts with that tag is available.

Additional/SEO meta tags – When developing my themes, I take the liberty of adding many commonly used meta tags. Most of the information is automatically filled in via various WordPress commands and can easily be modified by the user.

Twitter integration – In the post footer (when you click on a post, not viewing the index or archive page), there is a “Share on Twitter” link. There is also some pre-written coding to allow you to display your latest Tweet in the sidebar.

Related Posts feature – This function looks at the first tag for a post and finds all posts matching that tag. If no tags are specified for a post, it simply will not show up at all.

Customized default avatar (Gravatar) to match theme design – Black Hat includes an avatar to match the theme style. To use, you would simply login to the WordPress Admin panel and set the custom avatar as default.

As I said, more detailed information on these can be found in the theme’s readme file.

Sources and Link Love

These are the various resources and individuals who have helped make this theme possible: WP Candy, Cats Who Code, ThemeLab, WP Recipes, WP Hacks, Lorelle on WordPress, the WordPress Codex, WP Seek, WP Tavern, Jacob at A Blinding Sonic Blast, WP Lover, WP Hackers mailing list, Theme Playground, and For the Lose.

My apologies if I’ve left anyone out!

New WordPress Theme: Black Hat

My newest theme for WordPress 2.7. I think this one has been my biggest challenge due to all the features I had wanted to incorporate. As I had previously highlighted in my post the other day, this theme includes a detailed “read me” file covering its various features and a couple of FAQs/frequently requested modifications:

• Theme option for changing sidebar location
• Sitemap template
• Printer-friendly stylesheet
• Favicon
• Additional feeds
• Additional/SEO meta tags — including Google’s new canonical tag for paginated post pages. (Rumor has it this tag will be added to the core code in a future WordPress release. Nice!)

While I don’t think it’s my best work visually-speaking, I think its functionality and user-oriented details make it one of my better themes overall.

As time permits, I will be updating previous releases to meet the standard that I’ve set for myself with this release.

Details

Black Hat is a dark minimalist theme based on Adrian Diaconescu’s Corporate Sandbox. It is has been built specifically with WordPress 2.7 in mind, but is backwards compatible down to version 2.5. Stickers icons courtesy of DryIcons. Favicon by Brian Brasher.

Availability

Demo | Download

Seriously miffed at WP.org

The release of my newest theme has been delayed. I had submitted it to WordPress.org yesterday for inclusion in the Theme Directory, as I have done my other themes. This morning I received a very vague rejection email and initiated a discussion as to why.

The long and short of it, I’ve posted to the WordPress.org forums, but to be honest I don’t expect anything to come of it. I would however like to hear your thoughts on the matter.

My post to the forums:

I submitted a new theme yesterday. Because I have several other themes listed here, I am already pretty familiar with the requirements, but always give them a quick once over to make sure that I haven’t forgotten anything.

I was a bit dismayed today to get the following in an email: “Thank you for submitting the Black Hat theme, however it has not been selected to be part of the theme directory.”

That’s it. Nothing else explaining why my theme was rejected. That in itself is disconcerting, so I requested more information. I’m then told “Themes from sites (or links to sites) that support non-GPL WordPress themes are not included in the theme directory.”

My theme’s style.css clearly states that the theme is released under the GPL license; this is also stated very clearly on the theme’s URI on my website.

I explained this and was then told: “Go back and look at your credit links, both in theme description and the footer of the theme. Specifically http://www.rubiqube.com/corporate-sandbox/ which has at least 3 ads for sites that support non-GPL themes.”

My theme is based on the Corporate Sandbox framework. I linked to the site crediting its author — not required, but morally the right thing to do IMO.

So my question is this: Has the theme directory submission been changed? If so, this is not listed anywhere on the requirements page. And when did credit links fall under this kind of scrutiny?

I understand that there needs to be some serious cleanup for some of the themes listed here, but this is taking it a bit far, don’t you think?

The man I credited has ads on his site. How many others here to submit themes have similar ads? Or use a premium theme with a link back to its creator?

I understand that if that’s the way the rules are now, that’s that … but for Pete’s sake, list them in detail where theme designers can see it!!!

Theme improvements

I’ve been working on a new theme for the past 3 months and hope to have the kinks worked out soon so I can release it. In doing so, I’ve taken the time to assess what this new theme will have that my current releases do not.

And it’s quite a long list, lemme tell ya!

One of the items on my laundry list of “to do’s” is to include an informational “read me” file, featuring various features of the theme and answer a few frequently asked questions that I’ve come across from user feedback.

In fact, the majority of the “to do” items are from questions and/or requests that I’ve received.

Here’s a sample readme:

Hopefully this will be a little more helpful to users than the few notes I normally add in the theme description in the style.css file. I plan on updating all of my current themes to include these features.

Comments?

Feedback is gold, so hit the form below and let me know what’s on your mind.

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!

New Neopets petpage template: Fairy Dust

I had originally designed this for a Blogger template, but ported to Neopets petpage format by request. I have several other designs that I will be (hopefully) porting soon.

Preview:

Code:

Download here.

To install:

Go to your Neopets’ homepages index. Click the “Edit” link under the pet whose page you want to modify. Copy the contents of the template’s code file into the edit box. Scroll down and click “Preview Changes.” After the preview page loads, scroll down and click “Save Changes.”

Next Page »