Add a Dock to Windows 7

Let us be honest, Windows is great but Mac is just cool, especially the trademark dock.

Turns out that it is easy to add that cool dock to Windows.

To make this happen you will need to download a dock app. RocketDock and Winstep Nexus are two such apps.

Both apps are light weight and easy to install. Simply a case of downloading the app, running the install and then dragging the icons you wish to use onto the dock.

Why use a Dock?

The answer is simple: Easy Access!

You can place links to the programmes and apps you use frequently on the dock.

The dock then works like the windows taskbar. You can set the dock to reside in a position of your choosing on your desktop. Depending on your settings, the dock then can hide until you pull your mouse pointer to the designated area of the screen or like the taskbar it can remain visible at all times.

This then allows you to quickly access links to your apps saving time and effort.

Which Dock to Use?

Both RocketDock and Winstep Nexus really do the same thing and both do them well.

RocketDock Features

• Minimize windows to the dock
• Real-time window previews in Vista
• Running application indicators
• Simple drag-n-drop interface
  Multi-monitor support
• Supports alpha-blended PNG and ICO icons
• Icons zoom and transition smoothly
• Auto-hide and Popup on mouse over
• Positioning and layering options
• Fully customizable
• Completely Portable
• ObjectDock Docklet support
• Compatible with MobyDock, ObjectDock, RK Launcher, and Y'z Dock skins
• Runs great on slower computers
• Unicode compliant
• Supports many languages and can easily be translated
• A friendly user base :)
• And best of all... its FREE!!!

Winstep Nexus Features

• Display running applications on the dock with task grouping, filtering and icon customization options
• Display system tray on the dock as single or grouped icons
• Blur-Behind and colorization of dock backgrounds
• Monitor active connections and bandwidth usage with Net Meter module
• Get weather forecast for over 39,000 cities world-wide
• Multiple mouse over effects: zoom, swing, bounce and more
• Live icon reflections and animated water-like effects for reflections and dock backgrounds
• Easily change appearance of icons of running programs and shortcuts by drag & dropping PNG, ICO and TIF files directly into the icon
• Multi-monitor support
• Compatible with skins for all 3rd party docks
• Free

The Final Word

Both RocketDock and Winstep Nexus are brilliant apps. Once you get used to using a dock you will wonder how you ever managed without one.

...read more!

Extend your desktop

If you have a laptop, you may have noticed the VGA output. You may even have used it to plug in a projector, but did you know you can plug in a second screen and extend your desktop?

What does this mean, well in essence it allows you to work across two desktop, effectively doubling your work space area.

Why have a dual desktop

Other than the “geek factor”, having a dual desktop allows you to have full windows open side by side.

Imagine you are working on a word document where you want to copy text from one document into a second document. A dual desktop allows you to have both documents open side by side and then you can simply highlight the text you wish to copy in document 1 and drag it across to document 2.

As a webpage developer, dual screens make life much easier as it enables you to have one screen display your work as it appears in your browser and the other screen can be used to display your html editor. Then it is simply a case of save and refresh to see the changes.

Of course you can also use your second screen to watch a movie while browsing the net or simply use one screen to display open windows of applications like chat and email clients while you work.

Setting up a dual desktop (Windows 7)

Naturally the first thing you will need is a spare monitor.

Turn off your laptop and connect the VGA cord from the screen to your laptop’s VGA output.

Now turn on the laptop. Windows 7 should detect the second monitor and clone laptop picture onto the second monitor.

While a cloned desktop is great for a project, we need to adjust the settings so that your desktop is extended across both monitors.

Windows seven makes this a simple task.

Right click on your desktop to open the menu and select “Screen resolution”

The following window should open:

Use the drop down menu next to “Multiple displays” and select “Extend these displays”.

Now select the recommended “Resolution” for each screen.

You can select the second monitor by clicking on the icon labelled 2.

And now you should be set.

Third party applications

While Windows 7 handles the basic setup of a dual desktop well, additional features are lacking like the ability to display different wallpapers on each monitor or having separate taskbars on each screen. Fortunately applications like display fusion exist which will make these sorts of functions available to you.

...read more!

The Power Of Unordered Lists

A fun demonstration to display what can be accomplished with a simple unordered list and CSS.

The concept is simple, using css and a set of unordered lists we are going create a qwerty keyboard.

• View the demonstration
• Down load the demonstration files

Getting to grips with the keyboard layout

Before we can begin with the HTML and CSS we need to do a little forward planning and that means analysing the keyboard.

We will start with a picture of a basic QWERTY keyboard.

A careful look at the above keyboard reveals that it is made of several section as the images below display.

All the sections of the keyboard is placed on a single background. We will make this background a dark grey, as this will make a strong contrast between the background and the white keys.

The function keys lie in a horizontal line at the top of the top of the key board. Each key is of an equal width and height. The keys are grouped into sections, each section divided by an equal gap.

At the top of the right hand corner there are three labelled lights. This section is on the same horizontal line as the function keys.

The main section of the keyboard, comprising of letters, numbers and various editing keys is on the left hand side of the the keyboard. It forms a large block made up of keys of varying sizes, although the bulk of these keys are the same size as the function keys.

In the centre of the keyboard we have the navigation keys which are made up of two sections the top which will be referred to as the navigate section and the bottom which we will call the arrows section.

The final section of the keyboard is the numeric keypad which is found in the bottom right hand corner. While most of the keys are the small standard size found on the rest of the key board there are two keys which are longer (enter and add) and the zero key which is wider.

HTML

Now that we have an idea of what we need to build, we can consider the HTML. As has already been mentioned, we are going to use unordered lists for the structure of this keyboard.

Each section of the keyboard will be made using an unordered list which will be given a unique class name. This will allow us to style the sections according to the needs of a keyboard layout.

Sections where all the keys are of equal height and width need only a single class to be assigned to the main <ul>. However, sections where the keys are of differing height or widths, classes will be assigned to each list item.

<div class="keyboard">
<ul class="function">
<li>Esc</li>
</ul>

<ul class="function">
<li>F1</li>
<li>F2</li>
<li>F3</li>
<li>F4</li>
</ul>

<ul class="function">
<li>F5</li>
<li>F6</li>
<li>F7</li>
<li>F8</li>
</ul>

<ul class="function">
<li>F9</li>
<li>F10</li>
<li>F11</li>
<li>F12</li>
</ul>

<ul class="function small-font">
<li>Print<br />Screen</li>
<li>Scroll<br />Lock</li>
<li>Pause<br />Break</li>
</ul>

<ul class="lights">
<li><p>Num<br />Lock</p></li>
<li><p>Caps<br />Lock</p></li>
<li><p>Scroll<br />Lock</p></li>
</ul>

<ul class="letters">
<li class="small">~<br />`</li>
<li class="small">!<br />1</li>
<li class="small">@<br />2</li>
<li class="small">#<br />3</li>
<li class="small">$<br />4</li>
<li class="small">%<br />5</li>
<li class="small">^<br />6</li>
<li class="small">&amp;<br />7</li>
<li class="small">*<br />8</li>
<li class="small">(<br />9</li>
<li class="small">)<br />0</li>
<li class="small">_<br />-</li>
<li class="small"> <br />=</li>
<li class="backspace">Back<br />space</li>

<li class="medium">Tab</li>
<li class="small">Q</li>
<li class="small">W</li>
<li class="small">E</li>
<li class="small">R</li>
<li class="small">T</li>
<li class="small">Y</li>
<li class="small">U</li>
<li class="small">I</li>
<li class="small">O</li>
<li class="small">P</li>
<li class="small">{<br />[</li>
<li class="small">}<br />]</li>
<li class="medium">|<br />\</li>

<li class="caps">CapsLK</li>
<li class="small">A</li>
<li class="small">S</li>
<li class="small">D</li>
<li class="small">F</li>
<li class="small">G</li>
<li class="small">H</li>
<li class="small">J</li>
<li class="small">K</li>
<li class="small">L</li>
<li class="small">:<br />;</li>
<li class="small">"<br />'</li>
<li class="enter">Enter</li>

<li class="shift">Shift</li>
<li class="small">Z</li>
<li class="small">X</li>
<li class="small">C</li>
<li class="small">V</li>
<li class="small">B</li>
<li class="small">N</li>
<li class="small">M</li>
<li class="small">&lt;<br />,</li>
<li class="small">&gt;<br />.</li>
<li class="small">?<br />/</li>
<li class="shift">Shift</li>

<li class="medium">Ctrl</li>
<li class="medium"><img src="../images/logo-windows.gif" width="25" height="25" alt="windows" /></li>
<li class="medium">Alt</li>
<li class="spacebar">SpaceBar</li>
<li class="medium">Alt</li>
<li class="medium"><img src="../images/logo-windows.gif" width="25" height="25" alt="windows" /></li>
<li class="medium">Menu</li>
<li class="medium">Ctrl</li>
</ul>

<div class="navigation">
<ul class="navigate  small-font">
<li>Insert</li>
<li>Home</li>
<li>Page<br />Up</li>
<li>Del</li>
<li>End</li>
<li>Page<br />Down</li>
</ul>

<ul class="arrows">
<li class="arrow-up">&uarr;</li>
<li class="arrow-normal">&larr;</li>
<li class="arrow-normal">&darr;</li>
<li class="arrow-normal">&rarr;</li>
</ul>
</div>

<ul class="numeric">
<li class="small height-single">-</li>
<li class="small height-single">*</li>
<li class="small height-single">/</li>
<li class="small height-single small-font">Num Lock</li>
<li class="small height-double">+</li>
<li class="small height-single">9<br /><span class="small-font">PgUp</span></li>
<li class="small height-single">8<br />&uarr;</li>
<li class="small height-single">7<br /><span class="small-font">Home</span></li>
<li class="small height-single">6<br />&rarr;</li>
<li class="small height-single">5</li>
<li class="small height-single">4<br />&larr;</li>
<li class="small small-font height-double">Enter</li>
<li class="small height-single">3<br /><span class="small-font">PgDn</span></li>
<li class="small height-single">2<br />&darr;</li>
<li class="small height-single">1<br /><span class="small-font">End</span></li>
<li class="small height-single">.<br /><span class="small-font">Del</span></li>
<li class="height-single backspace">0<br /><span class="small-font">Ins</span></li>
</ul>
</div>

As you can see all the sections are enclosed in a div with the class "keyboard".

CSS

Now that we have built the structure, all that remains is to style the keyboard using CSS.

A light grey border is used around each unordered list to create the boundaries between each section. All the unordered lists have been floated to force the lists to stack horizontally, while margins are used to create spaces between each section.

Within each section, individual list items have also been floated and margins again have been used to create spacing between each key. A white background has been assigned to each key with the only variations being added is the height and width of keys.

CSS3 enhancements for supporting browsers, like rounded corners and box shadows have been applied to add a finishing touch.

.keyboard{
font-family: Tahoma, Arial, sans-serif;
background: #666666;
height: 276px;
width: 895px;
margin: 0 auto;
padding: 10px;
font-size: 14px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}

.function,
.lights,
.letters,
.navigate,
.arrows,
.navigation,
.numeric{
float: left;
display: inline;
padding: 0;
list-style: none;
}

.function,
.lights{
margin: 0 0 30px 0;
}

.navigate{
margin: 0 0 38px 0;
}

.letters,
.arrows,
.navigation,
.numeric{
margin: 0;
}

.function,
.lights,
.letters,
.navigate,
.arrows,
.numeric{
border: #EFEFEF 1px solid;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}

.function,
.letters,
.navigation{
margin-right:23px;
}

.letters{
width: 568px;
}

.navigation{
width: 117px;
}

.numeric{
width: 152px;
}

.function li,
.lights li,
.small,
.backspace,
.medium,
.caps,
.enter,
.shift,
.spacebar,
.navigate li,
.arrows li,
.numeric li{
overflow: hidden;
padding-left: 2px;
display: inline;
line-height: 1.1em;
}

.function li,
.small,
.backspace,
.medium,
.caps,
.enter,
.shift,
.spacebar,
.navigate li,
.arrows li,
.numeric li{
background: #fff;
color: #000;
}

.function li,
.lights li,
.small,
.backspace,
.medium,
.caps,
.enter,
.shift,
.spacebar,
.navigate li,
.arrows li{
float: left;
}

.numeric li{
float: right;
}

.function li,
.lights li,
.small,
.backspace,
.medium,
.caps,
.enter,
.shift,
.spacebar,
.navigate li,
.arrows li,
.height-single{
height: 32px;
}

.height-double{
height: 72px;
}

.function li,
.small,
.backspace,
.medium,
.caps,
.enter,
.shift,
.spacebar,
.navigate li,
.numeric li,
.arrow-normal{
margin: 3px 2px;
}

.lights li{
margin: 3px 9px;
}

.lights p{
border-top: #00FF00 5px solid;
margin: 0;
padding: 3px 0 0 0;
font-size: 9px;
line-height: 1.1em;
color: #fff;
text-align: center;
}

.arrow-up{
margin: 3px 40px;
}

.function li,
.small,
.backspace,
.medium,
.caps,
.enter,
.shift,
.spacebar,
.navigate li,
.arrows li,
.numeric li{
border: 1px solid #333;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
-moz-box-shadow: 1px 1px 2px #333;
-webkit-box-shadow: 1px 1px 2px #333;
box-shadow: 1px 1px 2px #333;
}

.small,
.function li,
.lights li,
.navigate li,
.arrows li{
width: 30px;
}

.backspace{
width: 66px;
}

.medium{
width: 48px;
}

.caps{
width: 60px;
}

.enter{
width: 74px;
}

.shift{
width: 86px;
}

.spacebar{
width: 168px;
}

.small-font{
font-size: 9px;
}

.keyboard img{
-moz-box-shadow: none;
-webkit-box-shadow: none;
box-shadow: none;
border: none;
padding: 0;
margin: 0;
}

The end result is pleasing. Using HTML and CSS, we have turned an unordered list into a QWERTY keyboard!

• View the demonstration
• Down load the demonstration files

...read more!

Creating a styled link list using CSS and a definition list

There are many reasons why you might want to include a vertically styled link list on your website. Perhaps you simply want to use it as a menu or you want to provide a list of resources for your readers. The good news is, these types of lists are easy to style and implement. Today we are going to look at how one creates such a list using a definition list.

• View the demonstration
• Download the demonstration files

The Structure

The HTML structure for such a list is very simple. We are simple going to create a div (with a class called “link-list”) which will display a repeating background image.

Within the div we will use a definition list <dl></dl>. A definition list is in turn made up of two parts:

• The definition title <dt></dt>; and
• The definition description <dd></dd>.

The basic definition list’s structure looks as follows:

<dl>
  <dt></dt>
  <dd></dd>
</dl>

We will then place the link list title within the definition title tag <dt></dt> and each link <a href=”#nogo”></a> within a definition description tag <dd></dd>.

To differentiate between the links header and the links description we will place the description within a span <span></span> and use a break </br> to force the description to start on a new line.

The resulting code will look as follows:

<div class="link-list">
  <dl>
    <dt>Title</dt>
    <dd>
      <a href="#nogo">Link1 header<br />
      <span>Link description</span></a>
    </dd>
    <dd>
      <a href="#nogo">Link2 header<br />
      <span>Link description</span></a>
    </dd>
    <dd>
      <a href="#nogo">Link3 header<br />
      <span>Link description</span></a>
    </dd>
  </dl>
</div>

Before styling, the visual result of our coding is a little disappointing.

Styling the link list using CSS

Now that we have the HTML structure in place, we will use CSS to turn the list into a visually appealing element of the web page.

.link-list

Start by styling the “link-list” class.

.link-list{
  background:#566381 url(images/denim.jpg) repeat;
  font-family: Verdana, Arial, Helvetica, sans-serif;
  font-size: 16px;
  color: #fff;
  width: 280px;
  margin: 0 auto;
  padding: 10px;
}

background:#566381 url(images/denim.jpg) repeat;

First off we have specified that the background colour of the div should be blue (#566381), in case the browser does not display images:

Then we have told the browser to use an image (url(images/denim.jpg)) and specified where the image can be found:

Lastly we have instructed the browser that this image must be repeated (repeat) so that background denim pattern will be displayed for the entire height and width of the div, regardless of what these measurements may be.

font-family: Verdana, Arial, Helvetica, sans-serif;

This line simply tells the browser what font to use.  If it can’t find Verdana then it should use Arial and so on. If you have already set a font-family for your page, and you would like to use that font, them simply leave this line out.

font-size: 16px;

This specifies the size of font to be used. Again, if you have already specified a font-size then this line can also be left out.

color: #fff;

Another font attribute, the colour this time, which is set to white so that it shows up clearly on the blue background. This attribute is only required if you wish to add additional text below or above the definition list.

width: 280px;

Width specifies the width of the div and can be adjusted to fit within a column. Remember, if you are placing the link-list within an existing column, the sum of the width, left and right padding and left and right margins should not exceed that of the existing columns width.

margin: 0 auto;

The 0 specifies a top and bottom margin of 0px. If you wish to create white space above and below your link list, you can change this value as required. For example you could use

margin: 10px auto;

Which would create a 10px gap above and below the div. You can also specify different measurements for the top and and bottom margin as follows:

margin: 10px auto 15px auto;

Now you will have a 10px gap above the div and and a 15px gap below.

Setting the left and right margin to auto will centre the div within the page or column. As with the top and bottom margins, you can set this to meet the requirements of your page.

padding: 10px;

Lastly we have created a 10px gap between the edge of the div and any content that will be placed within the div. As with margins you can specify individual values for the  top, right, bottom and left padding using the following formula:

padding: top right bottom left

Saving your work and previewing your page in the browser should give you something similar to the following:

.link-list dl

The next step is to style the actual definition list.

.link-list dl{
  border: #fff dashed 2px;
  padding: 0;
  margin: 0;
}

border: #fff dashed 2px;

This simply places a white dashed border of two pixels in width around the entire definition list.

padding: 0; and  margin: 0;

To over-ride any default or preset list indents we set the padding and margin to 0. These values can be changed to suite your design.

And the result:

.link-list dt

Now we will style the definition title.

.link-list dt{
  font-weight: bold;
  font-size: 1.2em;
  color: #FF8000;
  letter-spacing: .05em;
  padding: 10px 15px;
  margin:0;
  border-bottom: #fff dashed 2px;
}

font-weight: bold; font-size: 1.2em; color: #FF8000;

We can style the look, size and colour of the font used in the title.

letter-spacing: .05em;

Letter-spacing increases the distance between each letter.

padding: 10px 15px;

Use padding to increase the spacing between the letters and the border.

margin:0;

Set the margin measurements to over-ride default and pre-set settings.

border-bottom: #fff dashed 2px;

We can use a bottom border to separate the title from the links.

.link-list dd

Next the definition description tag must be styled.

.link-list dd{
  margin: 6px;
  font-size: 1em;
}

margin: 6px;

Set the margin to create a little space between each link and remove the pre-set default indent.

font-size: 1em;

To make the links smaller than the heading set the font size.

.link-list a

Now the actual links will be styled.

.link-list a{
  padding: 10px 15px;
  border: #BF6000 dashed 1px;
  color: #FF8000;
  display: block;
  text-decoration: none;
}

padding: 10px 15px;

Set the padding around the links to create space between the words and the border.

border: #BF6000 dashed 1px;

This will create a thin (1px), dashed, dark orange border around each link.

color: #FF8000;

Set the colour of each link.

display: block;

Display: block will apply the link to the entire line as apposed to the area directly around the words.

text-decoration: none;

Remove the default link underline.

.link-list a:visited

a:visited sets the style of links which have already been visited.

.link-list a:visited{
  color: #fff;
}

In this case the link will be white if the link has previously been visited.

.link-list a:hover

Using hover we can determine what will happen when the reader passes their mouse over the link.

.link-list a:hover{
  border-color: #fff;
  color: #fff;
}

The above code changes the links border and colour from orange to white.

.link-list span

The last step is to style the link's description. As this description had been placed in a span, we will now style the link-list's span tags

.link-list span{
  font-family: "Times New Roman", Times, serif;
  font-style: italic;
  color: #fff;
}

font-family: "Times New Roman", Times, serif;

We will use font-family to change the descriptions fonts to a serif font.

font-style: italic;

Font-style is used to specify italics.

color: #fff;

Color, of course, is used to change the font colour to white.

That's all!

• View the demonstration
• Download the demonstration files

...read more!

Finding the right webpage authoring editor

When starting out on your journey towards creating beautiful web sites, the first crossroad you will come to is; “what application to use?”

The road to the right looks inviting, a pleasant paved downhill path called the WYSIWYG Way. A WYSIWYG webpage editor will allow you to create web pages easily without the need to learn html code.

The road to the left is uphill, leading towards a dark forest called the text editor. This road is called the Road of Learning because in order to navigate your way through the forest you will need to learn html, CSS and lord knows what else!

The third option is called the Middle Road. An editor which provides WYSIWYG capabilities, but at the same time giving the user the option of being able to hand code their pages should they so desire.

The WYSIWYG Way

The WYSWYG Way starts off as a pleasant stroll. The programme (and there are so many options) will do everything for you.  It is like using word. The hardest part is deciding on which pre-made template to use! Initially all is well until you get to that highway we call the World Wide Web (www) and you find yourself in a storm rivalling Hurricane Katrina of 2005. Suddenly you have broken links you can’t fix, pictures not displaying correctly and your best friend phones to inform you that your site is not working in her browser!  You join a support forum and the first person who assists you points out that your site has 32 errors and you’ll need to fix those before any further help can be given. At this point you either give up or make your way back to the crossroads and chose an alternative path.

The Middle Road

This time you decide to take the Middle Road. Here you can take the “learn as you go” approach using the WYSIWYG capabilities when you need them and the code view as your level of proficiency increases. But as you make your way down this road you discover it has multiple toll booths and the cost is becoming excessive. There are three main tolls on this road. The first being the actual cost of the application. At the time of writing this article there are only two real contenders for such an application. Adobe’s Dreamweaver weighing in at approximately $400 and the lighter contender, Microsoft Expression Web, hitting the scales at approximately $150. The second toll you must pay, is size. These applications are huge, gobbling up huge amounts of your hard drive space and eating into your ram. The third cost is time. They take time to load and because they need large amounts of ram to run, they slow down the entire system meaning it just takes time to do everything else. Now if you have already paid for such an application you may chose to continue on this road, at least until it is time for the next upgrade.

The Road of Learning

The Road of Learning is by far the most difficult path to take but it is also provides the greatest reward. In order to make your way through the forest it winds through, you will need, at the minimum, to learn CSS and and html; as you will be required to manually code your site’s pages. And while the task may seem impossible, at first, it is important to remember that one is never without hope. There are many forums, like the webhelpforum, which you can join where people with greater knowledge are always willing to help. In addition the www houses thousands of tutorials to help you on your way. You can also, for a minimal cost, employ the help of a guide in the form of a specialised HTML editor like Blumentals WeBuilder, which offers helpful features like code completion, syntax highlighting, code snippet libraries and even spell checkers.

Which road to choose?

Which road you choose is really dependent on your budget and objectives. If you simply want to create a webpage with the objective of sharing a few photographs with your closest friends, then the WYSWYG Way is the path for you but if you want to create beautiful websites, which look professional, where your imagination is your only limit, then the only path to choose is the Road of Learning.

Photographs are compliments of the morgueFile

...read more!

Styling the comments section of your blogger post

Blogger is an easy blogging platform from which to launch your first blog. But what happens when you get tired of the standard themes and want to overhaul the look on your own terms? The answer is … create your own theme! Today we are going to look at how we can change the standard style of the comments section from this

to this

The Code

In order to style the comments we need to know how they were coded.  Using the Firefox add-on, firebug, we can see analyse the code and find out what elements need to be styled.

Using this information we can then use CSS to style the comments.

CSS

#comments{
  margin-top:40px;
}

#comments h4,
.comment-form h4{
  color:#990000;
  font-size:1.3em;
  font-weight:normal;
  margin:0;
  padding:5px 0;
  border-bottom:3px double #ccc;
}

#comments dl{
  margin:10px 0;
}

#comments dt{
  float:left;
  -moz-box-shadow: 2px 2px 2px #666;
  -webkit-box-shadow: 2px 2px 2px #E6E6E6;
  box-shadow: 2px 2px 2px #E6E6E6;
  border:1px solid #E6E6E6;
  padding: 5px;
  text-align:center;
  width:75px;
  margin:0 20px 0 0;
  background-color:#990000;
  color:#fff;
}

#comments dt a{
  color:#fff;
}

#comments dt a:hover{
  text-decoration:underline;
}

.comment-body{
  padding:0;
  margin:0;
  font-style:italic;
  float:left;
  width:500px;
}

.comment-footer{
  clear:both;
  font-size:.8em;
  color:#000;
  border-bottom:1px dashed #ccc;
  margin:0 0 15px 0;
  padding: 0 0 5px 0;
  text-transform:uppercase;
  font-style:normal;
  text-decoration:none;
  text-align: right;
}

.comment-footer a{
  color:#000
}

And the result:

Using Firebug and a little CSS it is possible to style any element of the blogger template.

...read more!

Use PHP to populate a CSS photo gallery with random photographs

You have created a CSS photograph gallery for your web page.  The gallery only has space for a small number of pictures but your album contains hundreds of pictures, all of which you want to keep.  The answer would be to  keep all the pictures and then have the webpage display a random selection of the images each time the page is loaded.  This little PHP script will not only do exactly that but can also be used in conjunction with a lightbox script

Acknowledgements

Please note:  I do not claim this to be my own work. 

The core of the script is based on the work of Jean-Baptiste Jung and the help of Scott, webmaster of the webhelpforum.co.uk.

The PHP Script

The PHP script is made up of two parts, the array and in-page call.  The in-page call (which is placed in the actual gallery) pulls a set of images from the array which is stored in an second PHP file.

Array

<?php
$thumbs = array(
array(
"title"=>"info", //Title for the link tooltip
"img" =>"thumbail/thumb1.jpg", //Source URL to Image thumbnail
"url" =>"slide/slide1.jpg", //URL to Larger Image
"alt" =>"description", //Alt Description for image
),

array(
"title"=>"info", //Title for the link tooltip
"img" =>"thumbail/thumb2.jpg", //Source URL to Image thumbnail
"url" =>"slide/slide2.jpg", //URL to Larger Image
"alt" =>"description", //Alt Description for image
)
);
?>

Note that there is no "," after the last closing array ")".

Save this file as thumbs.php

In-page call

Place this script in the gallery, where you want the images to appear.

<?php
include_once("thumbs.php");
shuffle($thumbs);
$thumbs =
array($thumbs[0],$thumbs[1],$thumbs[2],$thumbs[3],$thumbs[4],$thumbs[5],$thumbs[6],$thumbs[7]);
foreach($thumbs as $thumb){
?>
<a href="<?=$thumb["url"]?>" rel="shadowbox[gallery]" title="<?=$thumb["title"]?>"><img src="<?=$thumb["img"]?>" alt="<?=$thumb["alt"]?>" /></a>
<?php
}
?>

If width and height is not defined in CSS use:

<img src="<?=$thumb["img"]?>" alt="<?=$thumb["alt"]?>" width="210" height="97" />

Notes:

• Refreshing the page will display new images and links
• Links and images are set in the thumbs file
• Works with lightbox and shadowbox

What it looks like

On page load:

After page refresh

...read more!

Creating tabs within a page

The first script I would like to share allows you to create tabbed content within a web page.

There are many reasons why you would want to do this but the most common reason would be that you want to help your site visitors find information easily, without having to scroll down for miles.  The tabs also allows you to group information into logical parts, again making it easier for your visitors to find information quickly.

You can see the concept at work on this former project of mine:  Greenlandsmeats, (please note, vegetarians may find the content of this web site offensive!)

With a little JavaScript it is possible to create this tabbed effect.  I love the Very Simple Tabs script because it is easy to implement, light weight and degrades gracefully when JavaScript is disabled in the viewers browser.

Very Simple Tabs

Very Simple Tabs is a small, stand alone piece of JavaScript which is easily styled using CSS.  Unfortunately I have no idea who the original author of this script is (if you recognise it, please post a comment and I will acknowledge the correct author).

The JavaScript

    var tabLinks = new Array();
    var contentDivs = new Array();

    onload = function init() {

      // Grab the tab links and content divs from the page
      var tabListItems = document.getElementById('tabs').childNodes;
      for ( var i = 0; i < tabListItems.length; i++ ) {
        if ( tabListItems[i].nodeName == "LI" ) {
          var tabLink = getFirstChildWithTagName( tabListItems[i], 'A' );
          var id = getHash( tabLink.getAttribute('href') );
          tabLinks[id] = tabLink;
          contentDivs[id] = document.getElementById( id );
        }
      }

      // Assign onclick events to the tab links, and
      // highlight the first tab
      var i = 0;

      for ( var id in tabLinks ) {
        tabLinks[id].onclick = showTab;
        tabLinks[id].onfocus = function() { this.blur() };
        if ( i == 0 ) tabLinks[id].className = 'selected';
        i++;
      }

      // Hide all content divs except the first
      var i = 0;

      for ( var id in contentDivs ) {
        if ( i != 0 ) contentDivs[id].className = 'tabContent hide';
        i++;
      }
    }

    function showTab() {
      var selectedId = getHash( this.getAttribute('href') );

      // Highlight the selected tab, and dim all others.
      // Also show the selected content div, and hide all others.
      for ( var id in contentDivs ) {
        if ( id == selectedId ) {
          tabLinks[id].className = 'selected';
          contentDivs[id].className = 'tabContent';
        } else {
          tabLinks[id].className = '';
          contentDivs[id].className = 'tabContent hide';
        }
      }

      // Stop the browser following the link
      return false;
    }

    function getFirstChildWithTagName( element, tagName ) {
      for ( var i = 0; i < element.childNodes.length; i++ ) {
        if ( element.childNodes[i].nodeName == tagName ) return element.childNodes[i];
      }
    }

    function getHash( url ) {
      var hashPos = url.lastIndexOf ( '#' );
      return url.substring( hashPos + 1 );
    }

The CSS

ul#tabs {
 font-family: Lucida Sans Unicode, Lucida Grande, sans-serif;
 font-size: 1.2em;
 list-style-type: none;
 margin: 10px 0 0 0;
 padding: 0;
 width: 750px;
}

ul#tabs li {
 float: left;
 padding: 0;
 margin: 0 2px 0 0;
}

ul#tabs li a {
 color: #ccc;
 margin: 0px;
 padding:5px 20px;
 background-color: #990000;
 border-top: 6px #fff solid;
 display: block;
}

ul#tabs li a:hover {
 color: #fff;
 text-decoration: none;
}

ul#tabs li a.selected {
 color: #fff;
 background-color: #990000;
 border-top: 3px #990000 solid;
 border-bottom: 3px #990000 solid;
}

div.tabContent {
 width: 710px;
 clear: both;
 border: 10px #990000 solid;
 padding: 10px;
 margin: 0;
}

div.tabContent.hide {
 display: none;
}

And lastly … The HTML

<ul id="tabs">
  <li><a href="#one">Tab 1</a></li>
  <li><a href="#two">Tab 2</a></li>
  <li><a href="#three">Tab 3</a></li>
</ul>

<div id="one" class="tabContent">
  <p>Tab One</p>
</div>

<div id="two" class="tabContent">
  <p>Tab Two</p>
</div>

<div id="three" class="tabContent">
  <p>Tab 3</p>
</div>

And that’s it!

...read more!

Keeping track of all those wonderful code snippets

I tend to spend many a wasteful hour trolling the www looking for wonderful code snippets that will enhance my next project.

Then, when working on a project, I would think: “oh remember that little tip I read somewhere, that would look great here!”  I would then have to open up my browser and delve into the numerous bookmarks looking for that perfect little code snippet.

The solution… I created a local webpage storing all my little code snippets.

The concept is very simple… my own personal website running on my local server which I can quickly access and find the best solution for the particular project I am working on.  Of course when I find something I feel might be useful, it is a simple case of opening my editor and creating a demo of the technique or script.  I can add any comments or notes as well as reference the original url so that I can easily find updates.  In addition, local copies of source code can be stored without any hassles.

Designing the local site

Due to the fact that the purpose of my snippet site is to demo code snippets, I decided to keep the design simple.

There really is hardly anything to the page:  a menu at the top, a little background, with a neat little content section.

At the top of the page I have placed a fixed drop down menu which helps organise the snippets into logical groups:

Below the skyline … is a neat 600px display area which is great for showing off effects:

On the css side of things, I have also been kept to a minimal, just 48 lines of which more than three quarters are for the menu.

I decided not to use any resets as any css techniques would most likely be dropped into an existing page so the example code should over-ride already set styles.

I did style the pre tag as much of the content on the page would be code.

I also decided to include a little link – thumbnail – gallery for easy access to local copies of projects and templates.

And that is it!  The result is a place to test out new techniques, store code and try out new scripts with the added benefit of quick reference when working on projects.

...read more!