Many of these “problems” are very simple to solve. You will need a basic understanding of the framework though to understand why and how things get solved. You should learn the basics here.

Add padding

All the boxes in the framework have a specific width and margin and this creates the grid look and feel. However, sometimes you want to create a “box” or just want to add padding to your div.

As in any framework, this isn’t possible in the regular way. When you add padding to the div, the div will become wider and this will screw up your whole grid layout.

Solution

There is a simple solution to solve this problem. We will add another div inside the div you want to add padding to. We don’t give the new div any width declarations. So, we don’t give it a .grid_xx class.

Now, if we want to style this box and you have added a class or ID, we can add padding. Because we didn’t specific any width declaration, it is automatically 100%. If we add padding, the width of your div will stay the same. Take a look at our example to clear things up.

<div class="container_16"></div>

Let’s say we want to add padding to the div with ID “left”. Usually, like this:

div#left{
padding:10px;
}

However, this gives your div an extra 20px width. We work differently today:

<div class="container_16">
     <div id="left" class="grid_8">
          <div class="special-div">example</div>
     </div>
</div>

Together with this CSS:

div#left div.special-div{
padding:20px;
}

Take a look at our live example to see this works. As you can see, things are doing fine and the grid isn’t screwed up! I have added a border/background to the style declaration to make sure you can see what I mean

Tip! You can also do this with borders!

Wider or Narrower 960.gs Layouts

Width is a specific part of the 960.gs CSS framework. What if you want to create a layout that is wider or narrower? The facts first.

The 960.gs framework is called 960 for a reason: it’s 960px width. The whole grid is based on this 960px. You can’t make everything narrower or wider because everything gets screwed up. For a narrower layout however, we can use a trick. The wider layout isn’t possible with 960 gs and you should pick another framework like blueprint CSS.

Let’s create that narrow layout.

Solution

There are more CSS codes that can do the job, but I will just use the 960 way today.

Say we have this basic grid:

<div class="container_16">
     <div id="layout">layout</div>
</div>

This means that inside our basic “container” div, we have another div. This div with ID “layout” will be (surprise!) our layout. You see this div don’t have a .grid_xx class? Explanation will follow.

We have to put another div behind our “layout”-div, so we can position everything. I will give this div the class .grid_12. You can of course change this in an appropriate width. Our grid now looks like this:

<div class="container_16">
     <div class="grid_12">
          <div id="layout">layout</div>
     </div>
</div>

As you can see in the our HTML file, our container’s width “is” 16. Our container div’s width “is” 12.

Simple math shows that 16 - 12 is 4. We have the width of .grid_4 left. Because we need the same amount of space on both sides of our div, we can do some simple math again. We have .grid_4 / 2 sides = .grid_2 on both sides.

There are classes included in the 960 framework that can add a number of default padding like that .grid_1, .grid_2 etc. Padding-left is .prefix_xx and padding-right is .suffix_xx. Let’s add a padding-left of .grid_2 to our example.

<div class="container_16">
     <div class="grid_12 prefix_2">
          <div id="layout">layout</div>
     </div>
</div>

Check out our basic example to see that our grid is in the middle of your screen, and narrower as our original 960 layout.

Conclusion

These are the problems I was facing when using the 960.gs CSS framework. I don’t have other problems I think that should be tackled in 960.gs. It works good for me.

Perhaps you?

You might have a questions or problem you are facing when using 960 CSS framework in development environments. Don’t hesitate to point them out in the comments and I will see if I can add a solution in a follow-up post.

Article written by DivitoDesign

It’s time for me to thank everyone that has been involved with DivitoDesign in 2008. Thank you for your support, for the time to comment, for the interesting emails. Thank you for being with me in this interesting online journey.

In the next year DivitoDesign won’t go anywhere. We stay on our place and of course, we keep moving forward. We keep learning, we keep writing, we stand our ground in anything we do. Like never before.

Thanks for being with me in 2008 and I wish all of your a merry Christmas and a happy New Year.

See you in 2009!

Article written by DivitoDesign

However we were editing and uploading the same files and this caused some problems.  The changes he applied weren’t in my stylesheet, so when I uploaded my changes, his changes were lost. And visa versa. We needed to think of a workable solution.

Adobe’s Dreamweaver “Define A Site”

We found the solution via Adobe’s Dreamweaver “define a site”-feature. Any user in the team (Frank and me in this case) should define the same site in Dreamweaver and check files in/out (more info on check in/out below). These files were uploaded right back to the server once it was done.

This is the perfect solution for working in a team on one website. That’s why I will teach you exactly how to set up such “site”.

Before we can start

Before we can actually set up this connection between Dreamweaver and your site, we need a couple things ready. You need these:

1. FTP information
2. Dummy Wordpress installation (or any other folder you would like to edit)
3. Folder on your local computer where you can store the files.

Setup the Connection

I will guide you through a step-by-step process of setting up the connection. It isn’t that hard, but you need to follow the guide step by step.

In this version of the tutorial, I used Dreamweaver 8. Any later version of Dreamweaver should have almost identical steps, so it shouldn’t be a problem.

Step by Step

Step 1. Open Dreamweaver. Go to “Site > New Site”. You should choose the basic setup.

Step 2. Name your site and enter the HTTP address of that site. Click next.

Step 3. Do you want to use a Server technology? Yes, we would like. Wordpress runs PHP and MySQL. Click next.

Step 4. How do you want to work with your files during development? I suggest you choose option “Edit locally, then upload to remote testing server”.

“Where on your computer do you want to store your files?” You have to enter the folder where you develop your site on your own computer. Choose next.

Step 5. When we proceed, we have to connect to a testing server. I think it’s easiest to set up a FTP connection. Enter your FTP information and check if Dreamweaver can make the connection.

“What folder on the testing server do you want to store your files in?”. You should choose the complete path here. Usually this is something like “/public_html/wordpress/wp-content/themes“. Click next.

Step 6. Enter the root URL of your site and click next.

Step 7. We see some options for sharing files. You should enable “check in and check out”, because you want to make sure your co-workers don’t edit the same file at the same time you are busy with that file.

Step 8. Enter your name and email address. After this step you will be given a summery. Click done.

Upload on Save

Dreamweaver has the function to upload the file as soon as you hit the save button. This means you don’t have to upload anything anymore, because that will be done automatically.

Step 1. Site > Manage Sites
Step 2. “Edit” your site
Step 3. Advanced options
Step 4. Remote Info
Step 5. Check “Automatically upload files to server on save”

And we are done. Your saved files will be uploaded to the server immediately.

Checking In / Checking Out

Here is some extra information about checking in and checking out files.

When you are connected and you want to edit a file, you double-click on the filename (you “check in”). This means that you give Dreamweaver the sign that you are editing a file from your site. Your co-workers see this “check in” sign too, and they know you are editing it so they can not edit that file.

“Check Out” is when you are finished with a file and you are releasing it to the public workspace again. Your co-workers can see this too and if they want, they can now edit the file.

After the setup

Once all your co-workers have defined the same “site”, your online workspace is done. Everyone can now reach the most up-to-date file.

More Resources?

Here are a number of other resources and links.

• Checking In/ Checking out
• How to define a site in Dreamweaver
• Adobe
• Setup a site in Dreamweaver

Questions

If you have any question about this tutorial, or something isn’t clear, I will be happy to reply to your comments.

I have a question for you too: Did you set up such online workspace? Or is there any other (and better?) program that can do this?

Article written by DivitoDesign

I have discovered CSS frameworks just a while back. After experimenting with the Malo CSS framework, the Blueprint framework and 960, I came to the conclusion I like the 960 CSS framework most.

This tutorial will explain the basics of this framework so you can start developing with 960 pretty fast.

The basics principles

You have to know a couple basic principles to “learn how the framework works“. You can learn these during the experimenting process, but I will explain them here for you, too. Let’s start.

Do not edit 960.css

A small note before: do not edit the 960.css file. If you do this, you won’t be able to update the framework in the future. Because we need to style our HTML though, we will create a separated CSS file.

Loading the grid

Before we can use CSS codes in an external file, we have to load these in our own HTML site. Which can be done via these codes:

<link rel="stylesheet" type="text/css" media="all" href="path/to/960/reset.css" />
<link rel="stylesheet" type="text/css" media="all" href="path/to/960/960.css" />
<link rel="stylesheet" type="text/css" media="all" href="path/to/960/text.css" />

Once we have this ready, we have to include our own CSS file. For example, you can call this file style.css or site.css or anything else. Include this file with these codes:

<link rel="stylesheet" type="text/css" media="all" href="path/to/style.css" />

Containers

In the 960 framework, you can choose between 2 container classes namely .container_12 and .container_16. These containers are always 960px width (thence the name 960!) and the difference lies in the number of Columns. The .container_12 container is divided  into 12 Columns and the .container_16 container is divided in 16 columns. These 960px width containers are horizontal centered.

Grids / Columns

There are numerous column widths you can choose from and these are different in the 2 containers. You can find these widths by opening the 960.css file, but this isn’t necessary to design a proper website. There is a smart trick that make the framework even easier.

For example, if you want 2 columns in your container (say sidebar/content), you can do that this way:

<div class="container_12">
<div class="grid_4">sidebar</div>
<div class="grid_8">main content</div>
</div>

You can see that the sum of your first column (grid_4) added with the second column (grid_8) is exact 12. That’s for a reason, you don’t have to know the widths of these columns, you can choose column widths doing a very easy bit of math.

Let’s say we will create a layout with 4 columns. The codes will be these:

<div class="container_12">
<div class="grid_2">sidebar</div>
<div class="grid_6">main content</div>
<div class="grid_2">photo's</div>
<div class="grid_2">advertisement</div>
</div>

As you can see, this system works pretty well. If you try to load this in your browser however, you see something that isn’t right. That’s the introduction of our next topic.

Margins

By default, the columns have some margin between them. Every grid_(insert number here) class has 10px left and right margin. This means that in total, between 2 columns, we have a total margin of 20px.

20px margin is great to create a layout with enough white space to make everything looks smooth. That’s one reason I enjoyed using 960.

With our example from earlier, we had a problem when we loaded the page in our browser. We are about to fix that.

The problem is that every column has Left and Right margin. The first column and the latest column in the container doesn’t need any margin. Here’s the solution.

<div class="container_12">
<div class="grid_2 alpha">sidebar</div>
<div class="grid_6">main content</div>
<div class="grid_2">photo's</div>
<div class="grid_2 omega">advertisement</div>
</div>

You can simple add the class alpha for no left margin, and the class omega for no right margin. This example layout we made is now aligned perfectly in any modern browser (and yes, also in IE6).

Styling

Perfect, you know all the basics to create a grid layout with the 960 framework. Of course, we would like to add some style to our layout, too.

<div class="container_12">
<div id="sidebar" class="grid_2 alpha">sidebar</div>
<div id="content" class="grid_6">main content</div>
<div id="photos" class="grid_2">photo's</div>
<div id="advertisements" class="grid_2 omega">advertisement</div>
</div>

Because CSS uses specificity to determine which style declarations have priority above the other, the id is more important then the classes.

This way we can overwrite rules that have been set by the classes (like width, padding, borders etc) in our own CSS file.

I have added some style too, which took me exactly 5 minutes to get this whole example together. Check the source for the example and style declarations.

We are done

That’s it. You have just learned how to use the 960.gs framework to build cross browser compatible and smart layouts. When you have completely mastered the 960 framework you will greatly decrease the time you are writing CSS.

If you haven’t already, check out the example.

My questions for you!

Do you use the 960 CSS framework? Or any other framework? Do you think a framework help you to improve your code?

Article written by DivitoDesign

That’s why I decided to make a Wordpress Theme Development Checklist. Oh, and if I forgot about some things, be sure to let me know!

General

• Stylesheet should start with these codes or your theme will not be recognized as Wordpress theme.
  /*      Theme Name:  The Name of your theme
  *        Theme URI: The URL where people can get more information
  *        Description: Description
  *        Version: 1.0
  *        Author: Your Name
  *        Author URI: Designers’ URL
  *        Tags: red, black, widget-ready (etc) */
• Download the Sample Post Collection to have a filled Wordpress installation to start with.
• Theme preview image
  • 240 x 180 pixels
  • Name: screenshot.jpg, screenshot.png or screenshot.gif
• Widget ready themes
• Add rules to your Comments form
• Backwards Compatibility (Wordpress version 2.5+ is alright I guess)
• CSS sprites for optimizing images
• Wordpress PSD framework

Stylesheets

Make sure you have these stylesheets included with your theme:

• General.css
• Print.css
• Reset.css
• Browser specific stylesheet - ie.css
• Compressed Stylesheet?
  

Browser Compatibility

Test your theme in a number of browsers to make sure everyone sees the same theme. Use browsershots.org to get screenshots from your site in the most browsers. The most important browsers are:

• Firefox 2.0/3.0
• Internet Explorer 6
• Internet Explorer 7
• Google Chrome
• Safari
• Opera

Blog Elements

Every theme should have some elements every blog should have:

• Title/Logo
• Navigation of Pages
• Navigation of Categories
• RSS links
• Search Form
• Archives links
• Dates/Timestamps
• Comments
• Copyright message
• Past/Next links
• Advertisiments

Styled Everything?

You never know how bloggers will use your theme and therefore you have to style all HTML elements. Here are some elements you might not have thought of:

• blocknotes
• tables
• captions
• unordered lists
• ordered lists
• img

Pages

The basic pages you need to produce for a good template hierarchy:

• Index.php
  • Header.php
  • Footer.php
  • Sidebar.php
• Single.php
• Page.php
• Home.php
• Author.php
• Date.php
• Tag.php
• Category.php
• 404.php

Valid HTML/CSS

You can not validate your PHP files, so you have to go to your favorite browser and click the right mouse button > view source. You copy/past everything into the HTML validator.

• Style.css (CSS validator)
• Single.php (HTML validator)
  • Normal
  • With Comment/Without Comments
  • Login Required/Non-required
  • Password protected pages
• All other pages (categories/tags/authors/ etc)

Suggestions?

Remember, this checklist is not finished. Because I learn about Wordpress theme development all the time, more things will be added as soon as I think of them. My question for you is:

Do you have suggestions that make this Wordpress theme development checklist better?

PDF Version

Soon, I will also come up with a PDF version of this checklist so that you can print it and put it next to your computer when you are developing Wordpress Themes.

Keep Updated!

Do you want to get noticed when the CheatSheet PDF version gets released? Be sure to subscribe to the RSS feed, or you can get the latest news delivered right into your mailbox.

Article written by DivitoDesign

1. 15 Key Elements a Website Should Have - You should keep this list bookmarked and check when you are launching a new site or blog. It makes sure your site has everything  a proper site needs.

2. 5 Blogging Business Models - Here are 5 business models how you can make money online with blogging.

3. Upsite Down Text With CSS - Crazy but true, CSS has a possiblity to display normal HTML text up site down.

4. Designers: 6 Tips to Prepare for T-shirt Printing - If you are a designer out there that would like to design and print a T-shirt one day, here’s how you can prepare your design for that day.

5. Tomorrow’s Star-bloggers talk about Blogging - Read some interesting and small interviews about the rising stars of blogging.

6. 10 Usefull RSS tricks - RSS is simple yet extremely powerful. This article gives you some interesting tricks you can pull of with RSS.

7. How to Use Functions.php File - The functions.php file in Wordpress themes can get lots of extra functionality to your theme. Be sure to read this if you want to develop a new Wordpress theme.

That’s it for today. Many interesting articles have been explored and I hope next time to give you another number of important and interesting articles!

See you around. Maybe on Twitter?

Article written by DivitoDesign

We can use CSS optimizers to make your CSS file smaller and that works great. However, I feel that if you use any of these tips WHILE you are writing CSS codes, your productivity and skill will improve.

Optimizing your CSS file is also necessary to save bandwidth and to have a good loading time of your page.

Tips for optimizing your CSS writing style

1. Comments

Comments are especially helpful when writing CSS and your fellow workers need to understand what you are coding. There are different ways of how to add comments though. You can use this:

/*-------------------*/
/*-----Comment-------*/
/*-------------------*/

While you can use this too:

/*Comment*/

That saves, say 20 characters. Say we have 15 pieces of CSS comments, that saves 300 characters!

2. Color Prefixes

Color prefixes are defined in HEX codes. The HEX codes are 6 characters long, but in some cases, you can use 3 chars to define the same colors. Take a look at the example:

div{ color: #ffffff; } /* Shortcode: color:#fff; */
div{ color: #ff88ff; } /* Shortcode: color:#f8f; */
div{ color: #f8f7f2; } /* No shortcode possible */

3. Combine Elements

For example, if you have a couple elements like h2, h3 and h4 and all of them have the same properties. They just differ in one point. You can do this:

h2, h3, h4{
padding:0 ;
margin:0 ;
color:#333;
letter-spacing:.05em;
word-spacing:0.1em;
}
h2{	font-size:1.2em; }
h3{	font-size:1.1em; }
h4{	font-size:1em; }

In this way, you have combined the elements and you have added an extra style declaration for the font-size property. This will save you lots of space when you get used to this.

4. Leave Out Px/Em/% When Value = Zero

The value zero (0) doesn’t require Px, Em or percentage. 0px is of course the same as 0em or 0%. So when you use the value 0 in your CSS layout (I guess you do!) than this trick will save you a couple chars every time.

div{ padding: 0px 5px 5px 10px; }
/* Shortcode: padding: 0 5px 5px 10px; */

5. Combine Properties

Some properties as padding, margin and border have been split. For example, padding has padding-top, padding-right, padding-bottom and padding-left.

If the possibility exist, you should always combine these to one property because it make editing easier and it saves you space too.

div{
padding-left:0 ;
padding-top:50px;
padding-bottom:23px;
padding-right:4px; }
/* Shortcode: padding:50px 4px 23px 0; */

When the bottom/top values are the same and the left-right values as well, you can optimize it even more:

div{
padding-top:5px;
padding-bottom:5px;
padding-left:0 ;
padding-right:0px; }
/* Shortcode: padding:5px 0; */

6. Choose Classes/ID’s wisely

You should choose classes and ID’s that are short, easy to understand and descriptive.

Don’t choose something like “HeaderMiddleLeftCategories” if you can choose something like “h-cats“. That save you many chars along the way.

7. Save Space by Cleaning up your CSS file

When developing CSS websites you have idea’s that might or might not work. The idea’s that don’t work have been coded inside the CSS file, so they take up space and they are not necessary.

You should look through your CSS file for faults and unnecessary codes. This could save you lots of space.

8. Delete Semicolons on the Last Property of a Selector

One trick I found out via the use of a CSS compressor is that you have the possibility to delete the semicolon of the last property of a Selector. Take a look at this example:

body{
background:#ccc;
color:#333; }
/* Shortcode: color:#333 */

You see I deleted the latest semicolon? This isn’t a very large optimizing trick, but every char adds up to the sum. Say you have 50 selectors, you save 50 characters.

9. Delete Unnecessary Spaces & Enters

You might want to delete all the spaces and enters, as they are all count as one character. The problem with deleting these characters is that your CSS file loose structure and is less readable.

I usually don’t use this point when optimizing my CSS file because of structure is more important to me. An option to consider is that you save 2 different files, one without enters and spaces (and you use that file on your site), and you keep a copy with the enters and spaces so that editing is still easy to do.

Conclusion

If you want a CSS file fully optimized, I suggest you use a CSS compressor. You should teach yourself these tips, so you can write faster and code higher quality CSS.

Maybe you have other tips you use when optimizing your CSS file and I would love to hear them. You should add the tips to the comments!

Article written by DivitoDesign

1. Typographic Madness - 30 brilliant pieces of work - Noupe has an eye for outstanding subjects for their articles. Enjoy some of the finest typographic designs.

2. Wordpress Nexus - Wordpress Nexus is a project by Wordpress Hacks to provide users with a directory of everything Wordpress. There are also Wordpress forums online just yet!

3. SEO tip: Google’s XML Sitemap - With Google sitemaps Google hit a good spot. Lots of people use it, why shouldn’t you?

4. 50 Awesome Desktop Setups - This article really made me dream of an awesome Desktop setup. The Apple one’s are sexy? Anyone interested in sponsoring me? =)

5. 5 Steps to a Perfect Tabbed Navigation Menu - Usability Post show you exactly what to check for when developing a tabbed navigation menu.

Want More?

That’s it for now boys and girls. Are you interested in more interesting articles? Check out the community news section of DivitoDesign! It features some awesome articles that helped me along the way. You can subscribe to the community news feed for free, by clicking here.

Enjoy.

Article written by DivitoDesign

Today we will talk about what features an error page should have and how we can implant the custom error page into our site or blog.

The Features of a Good 404 Error Page

The points that I will refer to have been working for me for a couple years.

1. Descriptive title - The user should know they are on a 404 page, so don’t forget to tell them they are.
2. Sitemap - If you have a sitemap, be sure to include a link to your sitemap on your error page. People might browse through the sitemap to find the page they were looking for.
3. Mistyped URL - On an error page you could include the mistyped URL. This makes it easy for the visitor to scan the URL for typos or mistakes.
4. Search box - A search box in the 404 page is a must. The possiblity exists that the information is still on the site and with a simple search, the user might find the information they need.
5. Common links - Adding a couple links to some common pages (like the about/contact/articles pages) will increase the number of people that stay and want to read something on your site.
6. Popular articles - Displaying a number of popular articles is good to push your best content forward. Visitors might get interested by these titles and click an article.
7. Archives - It is also possible to add the list of archives to your error page. They might find the article they are looking for. If not, they might browse the archives to look for this article and then might stumble on some other interesting article.

Implant the 404 Error Page in Your Site

Now you know what features your error page has, it is time to implant it on your site or blog. I will discuss two ways to get your error page up and running. One way is an error page in Wordpress and the other is via .htaccess.

404 Error Page in Wordpress

Wordpress has a build-in error message in their themes. This isn’t the best solution as it only give the user this explanation: Error 404 - Not Found .

Editing the error text

One thing you can do is editing that text in your Wordpress theme. You should locate index.php and find the error message. You can add more and better text to your likings.

Creating an error page

You could also create a custom error page. This solution is in my opinion the best for Wordpress. You should make a file called 404.php, add the custom text and messages, add it in your theme directory and your error page is ready to go.

404 Error Page via htaccess

If you don’t use a blogging tool like Wordpress you need a proper looking 404 error page too.

The first step we will take is opening (or creating if you don’t already have one) the .htaccess file. We need to add a couple extra lines to this file to tell our server to redirect the visitor to a custom 404 page once they have need it.

You should add these codes to the .htaccess file:

ErrorDocument 404 /404.html

This tells the server your 404 document is located somewhere other than default. You now have the power to change the error page to your likings.

Other Error Pages

You could also use this trick to build custom error messages for other apache errors. Take a look here for the status codes Apache uses.

Article written by DivitoDesign

Thank you for all your support and comments and because of that, DivitoDesign made it to the list of the 20 coolest blogs!

Now it is time for the public to vote and I would greatly appreciate it if you could vote for DivitoDesign while you’re at it.

Thanks for the support boys and girls!

Article written by DivitoDesign