Currently browsing: Cool Stuff

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!

Shopping power, I has it

Chico’s is one of my favorite places to shop. Not only do their clothing hold up and wash well, they fit and feel great. Even better: their unique sizes will make ANY woman feel good about herself (no matter what size you wear!).

I was overjoyed when I got home yesterday and read my mail. My membership has finally been upgraded!

Basically what this means is I’ll get extra benefits now, like: previews to sales and new collections, 5% off all my future purchases, free shipping (basic), and more. They also own Soma (think Victoria Secret), so it looks like I can use the card there too. My folks gave me a gift card to Chico’s for Christmas, and I’ve been itching to go get some new “going out” clothes and a few frilly numbers (”unmentionables,” LOL!).

I showed the card to Jim and said, “Guess what I’m doing this weekend!”

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.”

They like me, they really like me!

My day started off pretty crappy. I didn’t hear the alarm, so I overslept. Then I finally get it together, get ready, and hop into my car to leave — only, it won’t start.

Great … what a way to start the week.

I go wake Jim up (God love him for putting up with me!) and start pacing because the car parts store wasn’t open yet, I was going to be way late for work, and I just knew that it was not going to be something as simple as a dead battery … it’s probably something catastrophic, or expensive, like the alternator, etc.

Two hours (and a hundred bucks) later, I have a brand new battery and am told that my car’s alternator is fine. Yay. I finally make it to work just in time to discuss lunch.

The day has gotten better as it’s gone on, though … I was reading through my email and received the following:

Congratulations you have won the “World Web Award of Excellence” for web site design, creativity, and ease of navigation. Keep up the good work. You have obviously worked very hard investing your time, and skills into making a great web site.

Regards,
Art Space 2000 Awards Department

Very cool.

Though it’s now occurred to me, I have no place to display my accolades. I guess I’ll just have to create something and add it to the sidebar!

YAY — something to keep me busy for the rest of the day!

Humpday Hilarities

Welp, here it is … the last funnies for 2008. The following are some of my favorite funnies from I Can Has Cheezburger and I Has a Hotdog:

New WordPress Theme: Red Delicious

My first new theme featuring the WordPress 2.7-specific features. Hopefully, I’ll soon have the time to update my other themes.

Details

Red Delicious is a fruity red theme. Works with WordPress version 2.7 and is backward-compatible down to version 2.5. (If you were really desperate, it can work with 2.3 but I wouldn’t recommend it!) Background courtesy of Country Clipart by Lisa. Stock image for header by Creapril.

Availability

Demo & Download

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!

Merry Christmas, Happy Solstice and Merry Yule, y’all!

 

And there were shepherds living out in the fields nearby, keeping watch over their flocks at night. An angel of the Lord appeared to them, and the glory of the Lord shone around them, and they were terrified. But the angel said to them, “Do not be afraid. I bring you good news of great joy that will be for all the people. Today in the town of David a Savior has been born to you; he is Christ the Lord. This will be a sign to you: You will find a baby wrapped in cloths and lying in a manger.”

Suddenly a great company of the heavenly host appeared with the angel, praising God and saying, “Glory to God in the highest, and on earth peace to men on whom his favor rests.”

When the angels had left them and gone into heaven, the shepherds said to one another, “Let’s go to Bethlehem and see this thing that has happened, which the Lord has told us about.”

So they hurried off and found Mary and Joseph, and the baby, who was lying in the manger. When they had seen him, they spread the word concerning what had been told them about this child, and all who heard it were amazed at what the shepherds said to them. But Mary treasured up all these things and pondered them in her heart. The shepherds returned, glorifying and praising God for all the things they had heard and seen, which were just as they had been told.

– Luke 2:8-20 NIV

Christmas comes early for some …

I received an email today from Soldiers’ Angels notifying me that the infantry where two of my soldiers are has a “mailstop.” This means only one thing …

THEY ARE COMING HOME!!!!

I know their families have got to be so excited!

God bless you, Casey and Steven. Wherever you are and wherever you’re headed, I wish you a safe trip.

Thank You!

Whenever I’m out and about and see a soldier or veteran, I always go up to them and thank them for their service and hand them a small Soldiers’ Angels card. Something Jessie said a while back sticks in the back of my mind every time I meet one … she said, “‘Thank you’ doesn’t seem like enough.”

I know what she means. For such a small phrase and gesture, I hope I’m able to make a big impact on that person, or the people around them. And I hope I come across as truly grateful.

To all troops, veterans, and their families: you have my thanks, gratitude, and support. May God bless you, and those who love and support you!

We’re outta here!

Welp, I’m finishing up wrapping tonight and we’ll pack up the car early tomorrow to head out of town for a bit. Hopefully I’ll have some goodies to share when I get back.

I hope everyone has a safe and very Merry Christmas!

“Mobile” WordPress Sandboxing

With both Jessie and Jim being sick this weekend, I decided that it would be as good a time as ever to update my test WordPress installs so I could work on updating my themes for 2.7 as well as make sure there’s backward compatibility for previous versions of WordPress.

A while back, Jeremy Flint had posted about how he created his WordPress sandbox using Super Satellite’s WP Content Framework. Basically, you can take any empty WordPress blog and instantly fill it with content similar to that seen on the WordPress Themes preview pages. It comes with pages and sub-pages, categories and sub-categories. There are comments and formatting elements. This is especially handy for those of us who develop or want to update a WordPress theme to ensure that all elements are formatted properly.

I decided to take this a step further and want to have a WordPress test site for each of the last 3 or 4 major version releases. Rather than keep installing on my server, I decided to make it portable.

I love love LOVE portable apps!

I hopped on over to the MoWeS site and created a fresh install of Apache2, MySQL5, PHP5, PHPMyAdmin, and WordPress — it currently has WP 2.6.1, which is fine because you can get any version you want from the WordPress release archive! Once the package is compiled and downloaded, then installed, simply run the mini web server then add more WordPress installs as needed.

To populate your WordPress install, download the framework file from Super Satellite and import into your WordPress install.

Note: In WP 2.7, go to Tools, Import. For 2.6 or earlier, go to Manage, Import.

Choose the WordPress import option. It works so far for 2.5, 2.6, and 2.7 here. I plan on adding 2.1 and 2.3 later tonight.

Once I have everything set up just the way I like it, I copy everything to my handy-dandy thumbdrive and ‘Voila!’ — a “mobile” portable set of test environments for my theme designing and general muck-abouts and funnery.

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!

Next Page »