Conditional Statements, Cross-Browser Analysis, & Tools Bars for Web Developers

When designing sites or themes, I currently test and make CSS revisions for six different browsers:

1. Firefox 3
2. IE 7
3. IE 6
4. Safari
5. Chrome
6. Opera

Now that IE 8 has been released, it will have to be added to the list as well. According to this blog, conditional browser statements and style-sheets can be used to set web pages to display as IE 7 pages within IE 8:

Read the rest of Conditional Statements, Cross-Browser Analysis, & Tools Bars for Web Developers »

Styling the Drupal User Login Block – PHP Code & CSS

This tutorial goes through the steps of one way to create a custom user login block for Drupal. Best is to disable the original login block in the admin/build/block section, start with a new block with custom code, and then style the details with CSS. The requirements for this project are a rounded corner, blue background block with two custom tabs at the top.

1. in admin/build/blocks – click on the “add new block” tab

2. enter the following code:

< ?php global $user; ?>
< ?php if ($user->uid) : ?>
<span class="login_text">Welcome, </span> < ?php print ($user->name); ?> <br />
< ?php print l("Your Account",'user/'.$user->uid); ?> |
< ?php print l("Log-Out","logout"); ?>
< ?php else : ?>
<div id="usertabs"> 
<span class="utabs1">Log In</span><span class="utabs2"><a href="/user/register">Sign Up!</a></span>
</div>
<div id="umain">
<form action="/user?<?php print drupal_get_destination() ?>" method="post" id="user-login-form">
Username:
<input type="text" maxlength="60" name="name" id="edit-name" size="20" value="" tabindex="1" class="form-text required" />
<br />
Password:
<input type="password" name="pass" id="edit-pass" size="20" tabindex="2" class="form-text required" />
<br />
<span class="utabs3"><a href="/user/password" title="Forgot your password?">Forgot your password?</a></span>
<span><input type="submit" name="op" id="edit-submit" value="Log In" tabindex="3" class="form-submit" />
</span>
<input type="hidden" name="form_id" id="edit-user-login" value="user_login" />
</form>
</div>
< ?php endif; ?>

Read the rest of Styling the Drupal User Login Block – PHP Code & CSS »

CSS Trick: Turning a background image into a clickable link

While working on a design for a client’s site the other day, I had the need to make a background image a clickable link. Their logo was being used as a background image in the site’s header, and we wanted it to act as a link to the home page – like any good website should.

It’s simple to turn a regular image into a clickable link, but in some situations, it’s just not possible to use a regular image – so how do you turn a background image into a clickable link? First let’s take a look at my original markup (I’ve removed unnecessary elements for sake of simplicity):

<div id="header"></div>

#header {
  background: #fff url(images/header.png) no-repeat;
  height: 101px;
  width: 800px;
}

So, how can we make our background image a clickable link? It turns out it can be done with a clever CSS trick. All we have to do is add the link markup between our header div tags, and apply the above markup to the link instead. All we have to add to the CSS is display: block to force the link to fill the entire space.

To handle browsers that don’t support CSS (those things are still around?), we should also add a span containing link text that we will hide with our CSS. Here’s what we end up with:

<div id="header"><a href="http://mysite.com"><span>MySite.com</span></a></div>

#header a {
  background: #fff url(images/header.png) no-repeat;
  display: block;
  height: 101px;
  width: 800px;
}
#header a span {
  visibility: hidden;
}

And there you have it – a quick CSS trick that turns your background images into clickable links.