Tampa Web Design & Development

Archive for the ‘Web Design’ Category

Bookmarks that help me design
Posted: 02.19.2010

About a year ago, I posted a blog entry outlining some of the design related websites that I check on a regular basis. After further thought, I was a bit disappointed that I didn’t post more links. So with this post I want to offer a few more of my favorites links. This collection includes all kinds of sites including tutorials, blogs, roundups, reference sites, graphics links, and more. They also cover a wide range of skill levels so there should be something for everyone. Some are old, some are new, but all have been helpful to me in the past so I offer them in the hopes that they might help another. Even if someone only finds one new site or idea from this post, I’ll be glad to have helped.


HTML, CSS, & design links
Blogs I frequent:
css-tricks.com
scriptandstyle.com
buildinternet.com
speckyboy.com
smashingmagazine.com
cssglobe.com
sixrevisions.com
noupe.comk
design-newz.com
underconsideration.com
sharebrain.info
instantshift.com
line25.com
webdesignledger.com
alistapart.com

General design:
Mastering CSS
CSS Backgrounds
Sitepoint reference
Advanced CSS selectors
Firebug – a must have!
Designers Talk Forum
Smashing Forum
50 New CSS techniques
Mega CSS roundup

Floats & advanced styling:
Negative margin guide
Sticky footer
Float info

Hacks:
10 CSS hacks
IE CSS bugs

jQuery:
Plugin roundup
Another Plugin roundup
Yet Another Plugin roundup
Great Lightbox Matrix
jQuery Tools
Getting started with jQuery


DataTables & jQuery UI Themes
Posted: 02.15.2010

We build a lot of data driven web applications and we are always working with tabular data. I am not a big fan of styling tables, but with DataTables and jQuery UI themes this is a piece of cake. I will show you how you can make a beautiful table in just a few minutes. First you will need to download DataTables. Unzip the download and grab the DataTables.js and jquery.js files and put them in your public_html folder or htdocs folder for the site you want to implement DataTables on. Then we want to include those two files in the head of our HTML document as seen below.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
		<title>DataTables Demo</title>
		<link type="text/css" rel="stylesheet" href="style.css" />
		<script type="text/javascript" src="jquery.js"></script>
                <script type="text/javascript" src="jquery.dataTables.js"></script>
	</head>
Next we will build a simple table for this demo.
	<body>
		<table id="users" cellspacing="0" cellpadding="0">
			<thead>
				<tr>
					<th>ID</th>
					<th>User</th>
					<th>Date</th>
				</tr>
			</thead>
			<tbody>
				<tr>
					<td>1</td>
					<td>Bob</td>
					<td>1/24/10</td>
				</tr>
				<tr>
					<td>2</td>
					<td>Dave</td>
					<td>2/15/10</td>
				</tr>
				<tr>
					<td>3</td>
					<td>Chris</td>
					<td>2/22/10</td>
				</tr>
			</tbody>		
		</table>
	</body>
Note that we use the thead and tbody tags in the table, this is essential to make DataTables work properly with our table.
Then we will add a bit of css to our stylesheet.
#users {
	width: 400px;
	text-align: center;
}
You should now have a table that looks like this.



Next we will go over to the jQuery UI site and download one of the pre-made themes or roll your own using the theme roller. You can download all the pre-made themes using this link jquery-ui-themes-1.7.2.0.zip. Now lets unzip the downloaded themes zip file and grab the images folder, the jquery-ui.css file, and the ui.theme.css file from the theme you want to use and copy these to your public_html folder or htdocs folder. Then we want to include the jquery-ui.css file and the ui.theme.css file in the head of our HTML document as seen below.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
		<title>DataTables Demo</title>
                <link type="text/css" rel="stylesheet" href="jquery-ui.css" />
                <link type="text/css" rel="stylesheet" href="ui.theme.css" />
		<link type="text/css" rel="stylesheet" href="style.css" />
		<script type="text/javascript" src="jquery.js"></script>
                <script type="text/javascript" src="jquery.dataTables.js"></script>
	</head>
Make sure you include the jquery-ui.css file and the ui.theme.css file before the main css file for your site. This will enable you to be able to override the styling of the jquery-ui.css file and the ui.theme.css file without modifying them allowing you to easily switch themes in the future. Now all we have to do is implement the script to add DataTables to our table.
<script type="text/javascript">
    $(document).ready(function(){
        $("#users").dataTable({"bJQueryUI": true});
    })
</script>
The above code implements DataTables on the table and the bJQueryUI option adds all the necessary classes to our table to work with the jQuery UI CSS framework.Next we need to specify a width for DataTables wrapper. DataTables automatically adds a wrapper with the id from the table and wrapper prefixed with an underscore as you can see below.
/* Wrapper created by DataTables */
#users_wrapper {
	width: 400px;
}
You should now have a table that looks similar to this depending on what theme you choose. (I used the vader theme for this demo)



Now we just need to add some styling to position the elements added by DataTables. They add ids to all the elements for easy styling. You can inspect the elements you want to position with FireBug to get the ids, or refer to the styling documentation on the DataTables website.In the main stylesheet for our site lets add the following.
/* Show # of entries element created by DataTables */
#users_length {
	float: left;
	padding: 5px;
}
 
/* Search element created by DataTables */
#users_filter {
	float: right;
	padding: 5px;
}
 
/* Table information element created by DataTables */
#users_info {
	float: left;
	padding: 5px;
}
 
/* Pagination element created by DataTables */
#users_paginate {
	float: right;
	padding: 5px;
}
 
/* Pagination previous element created by DataTables */
#users_previous {
	float: left;
}
 
/* Pagination next element created by DataTables */
#users_next {
	float: right;
}
 
/* Sorting arrows class created by DataTables */
#users .css_right {
	float: right;
}
 
/* Even row class created by DataTables */
#users .even {
	background: #999;
}
You should now have an awesome looking table like this.



Here are the files used in the demo. dataTables_jQuery-UI_demo
Magento Administration Screencast, Part 1
Posted: 02.05.2010

Here is part one of our Magento administration screencast series. We’re putting this series together to help our clients that are new to magento familiarize themselves with administering their shopping cart. Part one is simply a jump into the shallow end to get yourself started with adding simple products.


Magento Administration Screencast Part 1 from dZero Design on Vimeo.