<?php if (date('Ymd') >= '20120120' and date('Ymd') <= '20120125' ): ?>

Show the promo banner
<?php else: ?>

Show the normal banner
<?php endif; ?>

So in english that says.. if today’s date is greater than or equal to 2012-01-20 and it’s less than or equal to 2012-01-25 show the promo banner. Otherwise show the normal banner.

Or if you only want to show the promo banner during some dates and do not have alternative content you can just end the statement like this:

<?php if (date('Ymd') >= '20120120' and date('Ymd') <= '20120125'): ?>

Show the promo banner
<?php endif; ?>

Examples

Hotel Spinner Example

First I’ll show you a live example on a production website. We have it running on the detail pages of our site, Hotel Spinner. See how the tab stays in the same position on your screen no matter where you scroll? It’s a pretty sweet floating effect that’s quite hard to ignore, and that’s why it’s so effective. (Oh and while you’re checking out the demo, you might as well become a fan of Hotel Spinner ’cause it rocks!)

Basic Example

I’ve also put together a basic example where you can view all the code without all the clutter. (Experts can grab what you need here and have this up in 2 minutes.)

How To Install the Facebook “Fan Us” (Become a Fan) fixed tab / button / can’t get it off my screen thingy

Step 1.

Right click and save this image to your computer. Then, FTP it into the images folder on your website.

Step 2.

Insert the following CSS into your style sheet. Be sure to set the image path to the location of the Facebook “Fan Us” image you downloaded in Step 1.
Hint: To make your tab on the left side of your page change the “right” to “left” in the css below.

/* ==== START Facebook Tab by Schoberg.net ==== */
#fbtab{
background: url(icon-fbtab.png) no-repeat; /* Path to Image */
right:1px;  /* change this to left: 1px; to put it on the left of the screen */
top:40%;height:41px;width:30px;margin:0;padding:0;position:fixed;z-index:5000;}
#fbtab a{display:block;width:100%;height:100%;}
/* ==== END Facebook Tab by Schoberg.net ==== */

Step 3.

Finally insert the below HTML just before the closing </body> tag of your website. Be sure to update the href value to the destination of your Facebook Fan Page.

<!-- Start Schoberg.net Fb Tab -->
<p id="fbtab"><a href="http://facebook.com/hotelspinner"></a></p>
<!-- End Schoberg.net Fb Tab -->

Compatibility

This code will works perfectly in all modern Mac and PC browsers including: IE7+, Firefox, Safari, Chrome, Opera, etc. Basically it just doesn’t work in (the finally dying) IE6 since it doesn’t support position:fixed; without a bunch of hacks.

The image is an 8bit Transparent PNG that will look good on both dark and light backgrounds.

Taking it Further

This concept doesn’t just have to be for your Facebook Fan Page. It could easily be extended to promote anything you want. (Think: Twitter, mailing list signup, RSS feed, featured product, donation cup, your sister-in-law’s candle company) The possibilities are really endless.

To do this is simple. Create your own image. Tweak the css to the height, width and path of the new image. Then change the href in your html to point at whatever you want. Shazam!

Are you using the Schoberg.net Facebook “Fan Us” Tab?

Let me know if you’re using it and I’ll link up the best sites in this post!

What is PNG Alpha Transparency?

In the old days GIF was the most popular type of image compression for graphics. GIFs did a pretty good job and they still do. However, they only support binary (index) transparency. This basically means it can have transparent pixels, but they must be completely transparent.

Then the PNG started to rise in popularity and developers started taking advantage of the alpha transparency that makes your web graphics look beautiful on any background. The fact of the matter is that PNGs with alpha transparency pretty much open up the possibilities of much more creative web design.

The Problem with IE6 and Transparent PNGs

Well it’s simple, IE6 does not support transparent PNGs correctly. Not only does it not support them, but in most cases it will turn all the transparent and semi-transparent pixels to an ugly blue/gray color that can really muck up a web page (see below for examples).

The Solution

While the world runs on PhotoShop, I like to keep another image editing tool in my back pocket: Adobe Fireworks. Fireworks has many of the same features as PhotoShop, and now that they are both under the Adobe roof they are getting even more similar. However, Fireworks has one tiny additional feature that makes all the difference in this case.

1. Open or create your graphic in Fireworks (on a transparent background).
2. Select the “Preview” tab.
3. Be sure the Optimize toolbar is open (window > optimize).
4. Then select “PNG 8″ and “Alpha Transparency”.

That is the main key right there. Use 8bit and not 32bit. Photoshop does not offer alpha transparency with 8 bit images, but Fireworks does. And for some reason IE6 renders transparent and semi-transparent pixels of 8bit PNGs as fully transparent. So while it isn’t a perfect alpha transparency solution, it degrades gracefully by eliminating the ugly blue/gray color it puts on all transparent or semi-transparent pixels of 32bit PNGs, and it give the image binary transparency. It also saves you from implementing a hack solution to fix the PNG.

Examples

Most modern browsers support alpha transparency natively. This includes Firefox, Opera, Safari, Chrome and IE 7+. Here are 2 examples of the same image saved as 8 bit and 32 bit in Adobe Fireworks shown on a white and colored background. They both have full alpha transparency, and look about the same. Since the 8bit supports less colors it is naturally a smaller file size as well. Note how on the example with the angled background, the shadow is nicely transparent to the page behind it.

Modern Browsers

What IE 6 Sees

So you’ll notice that in IE6 in the 8bit example, the alpha transparent shadow does not work. However, all of these semi-transparent pixels become fully transparent. This gives a much better effect than the 32bit option which renders all the transparent pixels an odd blue/gray opaque color. So while the shadow and antialiasing don’t come through, it’s a great option for degradable png transparency for IE6 that doesn’t use javascript or any other hacks that leave a bad taste in a web standard enthusiast’s mouth. Now while this surely isn’t a solution for every situation, we’ve found it a very usefull way for degrading gracefully for IE6 while avoiding waisting our time implamenting fixes for a dying browser.

Checkboxes and Radio Fields

Yes, checkbox and radio fields, the little squares and circles we all must click to indicate the important decisions of our internet life. When you fill out a web form that has one of these fields you can sometimes click anywhere on the text describing the element. However, other (most?) times, this is not the case, and you have to click directly on the small circle or box of the field element to indicate your choice.  Now for most experienced web users this is mear annoyance, but the whole point of the web is we want it to be easily accessible to everyone. Forms take a long time to fill out and no one likes entering all that info, and answering all those questions. The last thing we want to do is make it difficult.

Web Developer… meet <label> Tag

So what is the solution to all this. Well it’s surprisingly simple, you add a new tag to your arsenal: the <label> tag. In simple terms, the <label> tag indicates in the html which text goes with which form field. Let me show you how the code should look:

Checkbox Example

Remember me on this computer.

Checkbox Example Code

<label for="RememberMe">
<input type="checkbox" name="RememberMe" id="RememberMe" value="yes" />
Remember me on this computer.
</label>

See how easy that was? We simply wrap the <input> tag with a <label> tag. Then we use the for attribute to indicate which form field we are talking about. When working with checkbox fields the for of the <label> needs to be the same as the id and the name of the <input>. For radio buttons it’s exactly the same except for the name attribute will be the same for all the items in the group like this:

Radio Button Example

Good Idea

Bad Idea

Radio Button Example Code

<label for="goodIdea">
<input type="radio" name="idea" id="goodIdea" value="good" />
Good Idea
</label>
<br />
<label for="badIdea">
<input type="radio" name="idea" id="badIdea" value="bad" />
Bad Idea
</label>

Not just for Checkboxes and Radio Buttons

Now even thought that’s where I’m putting all the focus on this article, doesn’t mean the <label> tag is just for checkboxes and radio buttons. It should be used on your <input> (text, radio and checkbox), <select>, and <textarea> fields. This will keep solid accessibility to browsers, screen readers, and search engines. Creating accessible forms is a key element to developing with web standards.

A Call to Google and the Rest

Using <label> tags as recommended by the w3c is nothing new. In fact, the recommendation for HTML 4.01 was published 9 years ago! Yet somehow, some of the biggest sites on the web are STILL not using <label> tags on the main signup forms on their websites.

Here is a list of big name sites that are NOT utilizing <label> tags at the time of this writing on their primary signup forms:

• Google
• eBay
• The New York Times
• MySpace
• ESPN
• IMDB
• Fox News
• Wal-Mart
• CBS Sports
• Washington Post
• Answers.com
• Verizon
• AT&T Wireless
• Dell
• Monster.com
• Reuters
• UPS

So this is a public call to all the big guys listed above. How is it that you are the most popular sites on the internet, yet you are still ignoring web standards and usability? Isn’t it time you stepped it up?

Additional Resources

For more information on creating and styling forms using label tags and other good practices check out:

• The Man in Blue > Accessible, stylish form layout
• Accessible Forms | HTML Dog
• The HTML Label Tag – Make Your Forms Accessible
• A List Apart: Articles: Prettier Accessible Forms

Step 1.  Ask the Hotel

Before you make your reservation, look on the hotel’s website or call the hotel and see if there is a cost to their internet. This is a good time to ask a few questions about the net situation at your hotel:

1. Do they have free access in the lobby?
2. Is there a business center?
3. Are there computers available for your use?
4. How about by the pool?
5. Is there a charge in the room?

Depending on your trip length and amount of access you require, free net in the lobby may be enough for you. Or, if there is a business center you may not need to bring your laptop. If you have a choice of what hotel you are going to stay at (i.e. This is not a conference where you must stay at a particular place), this may be a good time to locate a hotel with free internet access. You will notice that the mid priced 3 Star hotels are more likely to have free internet, and the higher priced 4 Star hotels are more likely to charge a fee. Now if you’re like me and enjoy staying at better hotels, continue on to learn how to minimize this cost.

Step 2. Minimize the Cost of the Hotel Internet

If the hotel you are staying at is going to be charging you a daily fee for internet access you can reduce this by becoming a member of a 3rd Party Wifi Subscription Service. These Wifi Subscription Services charge a monthly fee and allow you to access internet at thousands of locations across the country or even the globe (depending on the plan). The idea here is instead of paying a daily fee for internet, you pay for a month from a 3rd Party Subscription Service. The fee for 1 month of service from a 3rd Party Wifi provider, actually turns out be cheaper than paying the hotel day by day.

So I hear you saying “Well this sounds great for someone who travels all the time, but I don’t want to subscribe to a monthly service… I’m only going to be staying in Chicago for 4 nights for a conference.” Don’t worry, you are only paying for 1 month of the subscription then canceling before the 2nd month starts. Now if you do travel a lot, you may want to keep your subscription up. However, the technique shown here is aimed at saving you money for one short stay.

How it Works

1. Before you leave for your trip, see which 3rd Party Service (see below) is partnered with the hotel you are staying at.
2. Signup for the service (again see below)
3. Once you arrive at the hotel open your laptop and go to any website. You will then be redirected to the hotel login page.
4. This page will likely be trying to sell you their overpriced daily internet service. Look for a link on the page that says “Roaming Login”. Here you can login using the service you have subscribed to.
5. After you return from your trip, cancel your service so you don’t end up paying the monthly recurring fee.

3rd Party Wifi Subscription Services

There are currently 3 major service providers available. These are AT&T Wi-Fi, T-Mobile Hot Spot, and Boingo. All 3 services have pretty extensive coverage, however at the time of this writing Boingo is the best deal. They currently offer $9.95 / month for the first 3 months, but there is no contract. So before you leave on your trip, you can just subscribe for the first month, and pay $9.95 which will cover your entire stay vs. paying $14.95 / night. Then you can just cancel the service when you return. You will then have only paid a total of $9.95 instead of $50 to $100 at the hotel. The cool thing is Boingo lets you use the $9.95 promo price over and over. It’s not just for new customers. So each time you go on a trip, you can just turn the service back on for a single month.

In addition to your hotel, the 3rd Party Wifi Subscription Services also include internet access at many airports, restaurants, and coffee shops. So not only will you have internet access at your hotel, you may also have access while grabbing your Starbuck’s or waiting in the airport. You can look over the above websites for a full list of access spots for each provider.

Using this technique, an example 4 night stay that would normally cost $60.00 in daily internet access fees from the hotel will only cost you $9.95. Now that’s smart traveling!

If you’ve ever been to a Ray show you’ll know he plays in almost pure darkness. So you’ll notice the clips are pretty dark. If you listen close on “Winter Birds” at 16s in you’ll hear him say “I can’t even see the fret board.”

The new album is going to be exciting. Some of the tracks like “Hey Me, Hey Mama” are a bit more upbeat then his normal sound incorporating some new instruments and techniques. Other tracks are soft and deep keeping more consistent with his previous works. And the lyrics, it’s Ray.. need I say more? Overall I think “Gossip in the Grain” is going to be a solid installment in the library of Ray Lamontagne.

OK enough talk.. here’s the vids….

Gossip in the Grain

• Ray Lamontagne – Roses & Cigarettes (Live Video)
• Ray Lamontagne – Sarah (Live Video)
• Ray Lamontagne – Winter Birds (Live Video)
• Ray Lamontagne – Hey Me, Hey Mama (Live Video)

Trouble

Ray also preformed a number of tracks from his first (studio) album.

• Ray Lamontagne – Burn (Live Video)

Till the Sun Turns Black

And finally here’s one of my favorites. (sorry I missed the first verse)

• Ray Lamontagne – Empty (Live Video)

Example 0 (the pre basic)

Before we start getting fancy with replacing our bullets with images, let me show you what you can do using only css changes. There is a nice property in css called list-style-type which can be used on unordered <ul> and ordered <ol> lists. There are a number of declarations available with a range of browser compatibility.

View Example 0 Demo »

HTML

<ul>
    <li>Lorem ipsum dolor sit amet</li>
    <li>Consectetuer adipiscing elit. Etiam sollicitudin</li>
    <li>Capibus velit. Praesent eget dui.</li>
    <li>Duis non elit et massa ultrices vehicula.</li>
    <li>Aliquam fermentum ipsum auctor enim.</li>
</ul>

CSS

ul {
    list-style-type:square;
}

Example 1 (the basic)

OK, so now you’re (sarcastically) thinking “Wow Jesse, you turned the circle bullet into a square!”. Yea, I know that wasn’t too exciting, the good stuff is on the way. I just thought it would be nice for you to be fully versed in the bullet options (Hey I called it “Example 0″ didn’t I?). Now, when following the links above you may have ran across another css declaration called list-style-image. In theory this is used to do what we are trying to accomplish here: Replace the bullet with a custom image. However, in practice this CSS declaration does not work dependably across browsers. Particularly regarding exact position of the bullet image. That being said we will not be using this declaration, instead will be putting the image onto the <li> using the background: property.

View Example 1 Demo »

CSS

ul{
    list-style:none;
    margin:0 0 1em 15px;
    padding: 0;
}
ul li{
    line-height:1.3em;
    margin: .25em 0;
    padding: 0 0 0 15px;
    background:url(scho-arrow.gif) no-repeat 0 7px;
}

Now to explain the CSS a bit. First the <ul>. We remove the bullets with list-style:none;. Next we set the margin. We remove any default margins set by the browsers, set the left margin to 15px to indent the list, and set the bottom margin to 1em to offset the entire list from the content that follows it on the page. We do this by using the CSS shorthand margin:[top] [right] [bottom] [left];. We then set padding:0; to remove any default padding set by the browsers.

Next we adjust the <li>. We set the line-height:1.3em; to give the text some vertical spacing. We then set the top and bottom margin to .25em to give the line items a bit of vertical spacing and the left and right margin to 0 to reset any defaults set by the browsers. Next, we set the padding using shorthand like we did with the margin. We set the top, right and bottom paddings to 0 and then set the left to 15px. This 15px of <li> padding intents the text to make room for the image. You will want to adjust this to a couple px more than the width of your bullet image to make room for the image and give a little extra space before the text starts. Now to keep a uniform indent, I suggest keeping the total of the padding-left of the <li> and the margin-left of the <ul> to 30px. So if you have a smaller image you may end up setting the <li> padding-left to 10px and then setting the <ul> margin-left to 20px. This keeps the text indented 30px from the left side. Finally, we declare the background using the following CSS shorthand: background:[image url] [repeat] [image left pos] [image top pos]; Here you see we’ve declared the background-image, set it to no-repeat, set the left postion to 0 and then the top position to 7px. Now, depending on the height of your bullet image and the size of your text,  you’ll likely want to adjust this top positioning to vertically center your image on the text.

Example 2 (adding polish)

Example 1 got us rolling with the basic idea, but has a few minor issues to work out. First of all, since we set margin-bottom:1em; on the <ul> it causes nested lists to have too much space between the end of a 2nd level list and the next line item of the 1st level list. To fix that, we need to set bottom-margin:0; to all <ul> inside of <li>. Next, there is a small bug that plagues (you guessed it) IE 6 regarding background images that we apply the holly hack to fix. In this example, I’ve added a 2nd level list and a really long <li>. By doing this, you can see why we set the line-height and the top and bottom margin on the <li> in Example 1. Notice how the <li> that wraps still has spacing above and below it to separate it from the surrounding line items? That’s the top and bottom margin at work.

View Example 2 Demo »

CSS – Added

li ul{
    margin-bottom:0;
}
/* Holly Hack to fix ie6 li bg */
/* Hides from IE-mac \*/
* html li{height: 1%;}
/* End hide from IE-mac */

Example 3 (real world example)

Now that you’ve got the idea, I’m going to show you a real world example where we tweak a couple things. First, we’re going to set the 2nd level lists back to bullets instead of images. Then we’re going to drop in some print styles so that when the page is printed it shows the default bullets.  We’re doing this because most browsers do not print background images by default and our custom bullets are background images! (Try a Print Preview of Example 3 on your browser to check it out.)

View Example 3 Demo »

CSS

ul{
    list-style:none;
    margin:0 0 1em 15px;
    padding: 0;
}
ul li{
    line-height:1.3em;
    margin: .25em 0;
    padding: 0 0 0 15px;
    background:url(scho-arrow.gif) no-repeat 0 4px;
}
li ul{
    margin:0 0 0 30px;
    list-style:disc;
}
li ul li{
    padding-left:0;
    background:none;
}
/* Holly Hack to fix ie6 li bg */
/*  Hides from IE-mac \*/
* html li{height: 1%;}
/* End hide from IE-mac */
@media print{
ul {
    list-style:disc;
    margin-left:30px;
}
ul li {
    padding-left:0px;
    background:none;
}
} /* end print */

Example 4 (getting creative)

Once you get the hang of this the possibilities are really endless. In this final example I’ll throw a few more styles in there to show you what we could do with a “Yes/No” type of list. I’ve defaulted the list items to “Yes”, but then added a class="no" to <li> that I want to have the “No” look. This could be used in a list of product features etc. To keep the usability, I’ve even set the print styles to an open circle for the “No” items and filled circle for the “Yes”. (yes/no icons from sweetie)

View Example 4 Demo »

When to use CSS image replacement

The typical use of image replacement is for replacing page headings with an image of that text. While I avoid this when I can, I do promote and use this technique for site logos on almost every site I develop. As 99% of companies have logos that can not be created with web fonts, this is a real world application for image replacement that can and should be used on production web sites. Furthermore, Google is OK with image replacement and has confirmed it will help your search engine placement as long as you aren’t falsely representing the image.

Ultimate Image Replacement (The Schoberg Method)

At LJ Host we build a lot of websites, and I have toyed around with a number of different methods over the years and they all do the job to some extent. However, there are a number of caveats with some of the methods including inaccessibility to screen readers and the text being hidden when images are turned off. My method is based on the cover up method created by Petr Staníček [aka -pixy-] and showcased on his site wellstyled.com. My method has added support for linking of the object (I always think it’s a good idea to link the logo to the home page), and making the text printer friendly using print sytles.

Example 1 (the basic)

In the first example I have shown the technique in it’s most simple state. Note the empty <span> tag inside the <a>. This is what allows this method to work. If css is off you see the text. If css is on but images are off, you see the text. However, if css is on and images are on, the <span> is set to the same height and width of the containing <a> and <h1> and then positioned absolutely with the logo image set as the background of the <span>. The logo then overlays the text, showing only the image of the logo, and hiding the text behind it. (Note: Your image must be fully opaque or you will see the text through it.)

View Example 1 Demo »

HMTL

<h1 class="logo"><a href="/">Company Name<span></span></a></h1>

CSS

.logo {
margin:0;
padding:0;
height:45px; /* Height of logo */
width: 210px; /* Width of logo */
overflow:hidden;  /* Stops text from protruding if  H1 text is larger than logo */
position:relative; /*must be relative or absolute */
}
.logo a{
display:block;
height:100%;
width:100%;
}
.logo a span{
display:block;
height:100%;
width:100%;
position:absolute;
top:0;
left:0;
background:url(logo.gif) no-repeat left top;
cursor:pointer; /* ie demands we reinstate the pointer cursor */
}

Example 2 (with print styles)

In example 2 we take things a bit further by adding the print styles. The print styles are essentially reverse engineering the first styles we set. Different browsers handle printing differently. By default, Internet Explorer does not show background images and Firefox does. Furthermore, depending on your logo dimensions and length of company name text, you could run into a number of issues with spacing. We alleviate all these problems by adding print styles. First, we use display:none; to hide the <span> which is the layer containing the logo image. Then we reset the widths and heights of the <h1> and the <a>. Finally we add some margin to the bottom of the <h1> to add some space between it and any following elements on the page for aesthetics. Compare a print preview of the Example 1 and Example 2 demos in a few different browsers to see for yourself.

View Example 2 Demo »

CSS – Added

/* == Optional Print Styles =================================================
===== Put this at the end of your style sheet or in your print style sheet */
@media print{
.logo a span{
    display:none;
}
.logo, .logo a{
    width: auto;
    height:auto;
    text-indent:0;
    top:0;
    left:0;
}
.logo{
    margin-bottom:1em;
}
} /* end print */

Example 3 (real world example)

In the final example I’ve altered the code just a touch by setting the position:absolute; and defining the exact location using top: and left:. I then dropped it into a layout so you can see how it would work in a normal situation, along with some final print styles for the whole layout. (Note: If you use position:absolute; for the h1.logo you must set the containing element to position:relative;)

View Example 3 Demo »

CSS – Tweaked

.logo {
    margin:0;
    padding:0;
    height:45px; /* Height of logo */
    width: 210px; /* Width of logo */
    overflow:hidden;  /* Stops text from protruding if  H1 text is larger than logo */
    position:absolute; /*must be relative or absolute */
    top:25px;
    left:30px;
}

Final Notes

Even though I have called it the “Ultimate” Image Replacement technique there are a couple issues to be aware of.

1. Your image must be opaque. If you have a transparent gif or png then the text from the <h1> will show right through. So this creates a few situations where this method will not work.
2. It does require an empty <span> tag just before the closing </a>. While this doesn’t cause any real performance issues, html purists (myself included) are never too enthused about adding extra markup that has no structural meaning. That being said, I think the cost is worth the benefit in this case.

Why choose WordPress?

I originally heard about WordPress sometime back in 2003 from a developer named Alex King. At the time I was searching for a task management program for my company LJ Host. After quite a bit of research I decided to use his creation called Tasks (which has now greatly evolved into TasksPro which we still use). Anyway, while doing this research I noticed on his blog that he was involved in developing a number of plugins for WordPress, which is how I found the project.

I fell in love with the project instantly as they were building things in a nice modular manner and using these little known things (at the time) called Web Standards, and CSS! Needless to say I had my eye on the project ever since and it has become quite an amazing project. I have worked with it on a number of client sites and finally was able to get down and dirty with the script for my own blog here.

Site Design

The development of this site was quite a bit of fun. I was able to throw out all the normal client requests and do something for myself. Once the design and xhtml/css was completed it was really a breeze to drop it into the WordPress Theme system.

Well that’s all for now!
Here we go………………