As I had been occupied most of my time by this great open source CMS lately, I would to share my experiences withyou. If you use, you will learned to value drupal at least for its vast amount of extremly useful modules, flexible user management and easy-to-handle content editors.

As basic requirements one needs a hosting account which has php (version 5.2 or higher) and mysql installed. Download the latest versions here, I’d recommend to choose version 6.x as most of the modules and themes are not available for 7.x, which is still in development status, but will come up with neat features.

On first hand you will have to set up a mysql database, no worries you will just have to specify just the database name, a username and a password! Now you upload the drupal core file into a folder in your webspace. After doing so you reach your drupal installation via www.yourdomain.com/[drupal installation folder]/install.php .

The setup is really easy, you will just have to complete these steps:

1. After uploading you have to copy ./sites/default/default.settings.php file to ./sites/default/settings.php (read/write attributes have to set to 766, you must change that right after the installation, due to security reasons) and create a new folder called “files” in ./sites/default/ this folder and its future subfolders must have to be writable (write attributes have to set to 766).
2. Start the Installation, here you have the the chance get a check whether there is a drupal version translated into your language. If you’d like another language, you will have download the translated version and upload it to your server. Anyway you might wish to have a multilanguage site, then the english version will be fine you can install different languages via the i18n module.
3. Indicate database name, username and password of the database you created before.
4. Create your Administrator login access data by providing a username, password and emailadress. This very first user will have administrative rights, so you should use a secure password.
5. That’s it!

Now it’s time to tune up your brandnew drupal site a little bit… This will be done by installing modules!

Here’s a list of modules I’d recommend to install up front, no matter what kind of site you are intending to create:

Pathauto

This one creates nice URLs derived from the titles of your content pages. As you know this good for SEO purposes and you do torture your user with cryptic page titles. Requires the token module to be installed and activated in advance!

CKEditor – WYSIWYG HTML editor

A big helper! Especially if you’re building a site, whose content has to created or edites by not so web experienced fellas, I think you know whom I’m talking about. As an addition you should install the ckfinder filemanager, so you are able to offer no-brainer file integration and upload to your site. Before your content editors have the pleasure of the easy working with This fine editor, you have to pain to install and configure it. Now I will not offer a step by step manual, I try to deliver it later on. You will have download the drupal module files and copy the core files of the editor into the “” folder in the drupal module itself. The essential editing software files you can download at ckeditor.com. If there are serious problems just post a comment and I try to help you out!

Backup and Migrate

This should be self explaining, just to put you on the save side. You can schedule backups and store them on your or you can download them. Saved my sorry ass several times ;-)

Google Analytics

You could also paste the google into the template files, but this modules makes this procedure needless.

Internationalisation

If you like the setup your site and backend in several language, this module will do the trick. You will have to lookout for language packs afterwards and you get them here, including an overview far the translations are finished. Addiditonally I’d check out the Language Icons Module, providing you nice litte flags for every installed language pack.

Sitemap

Using the sitemap module you can add an automatically generated sitemap, including all your subpages, categories or menues.

So, that should fine as a starter, soon I’lltry to give an outlook about more sophisticated modules like views or content construction kit and how add and modify themes. Have fun creating sites with drupal!

• Create a Mac style CSS Dock Menu
  

  Really nice tutorial for creating a cool and fancy navigation using CSS and a Jquery Javascript library. Comes as complete Download, including a icon set.

• How to: CSS large Background
  

  Here you’ll find instructions how to integrate a large image as webpage background properly.

• Blurry Background Effect
  

  A very nice and eye teasing visual effect, unfortunately not working for Internet Explorer 6.

• 12 Useful Web Tools for Designers
  

  Several neat tools making a webdesigners daily work less miserable, a color schemer, tools for creating templates, favicons, background patterns or fonts.

• Creating scalable Layouts
  

  As the design of a site is confronted with a huge range of completly different screen resolutions, it should be pretty flexible. Should. Here’s ecplain how to achieve that.

• Massive collection of CSS hints
  

  Ok, this might be quite an old post, but it’s still very useful and just through it’s coverage and useful tricks, all the techniques are great helpers.

View a plain demo here.

So here we go:

First of all design two (or three, if the focus state should be used, too) buttons, then cut the left part of the two states and paste them into a single graphic above each other. Add a little space so the text won’t stick too close on the edge, which should, depend on the design somewhat like this:

Then repeat these steps for the right end of the button:

That’s it for the graphical issue, the HTML is just a div container and an unordered list in the inside:


<div class="mouseover">
<ul>
<li><a href="#"><span>Item 01</span></a></li>
<li><a href="#"><span>Item 02</span></a></li>
<li><a href="#"><span>long Item name 03</span></a></li>
</ul>
</div>


The only things to pay attention is the class assigned to this div tag as it hands down all the attributes to its tags within and that the linktexts are embedded in span tags.

Now as all the action is done via CSS, we have to get into details:


.mouseover ul {list-style: none;}
.mouseover ul li {
display: inline;
font-size: 14px;
line-height: 14px;
font-weight: bold;
}

For the unordered list the list-style value “none” is mandatory as any other value like “square” or “circle” etc. would avoid a proper alignment of the navigation elements.
The list elements must be displayed “inline” otherwise they show up vertically ordered. If you wish them to do so, just drop “display: inline;”.
Besides that the apperance of the textlinks of the buttons can be edited here individually by additonal CSS attributes.

.mouseover ul li a {
padding: 0 0 0 9px;
background: url(button-left.gif) no-repeat;
float: left;
}

The padding values have to be set individually, as they depend on the measurements of the left graphic.
The “float: left” attribute is mandatory to assure both graphics are displayed besides each other.


.mouseover ul li a span {
padding: 9px 9px 9px 0;
background: url(button-right.gif) no-repeat right top;
display: block;
float: right;
color: #666;
}


As before please adjust the padding values as they fit the button layout.
The background attribute contains values as the image path and “right” and “top”. The last two are important as the grant that the alignment of the background is not influenced by the padding values. Setting the background alignment value “right” is the reason why the button lenght fits for a different number of characters of the textlink.
(If a textlink is to long, though and gap appears, simply expand the lenght of the background on the left side.)


.mouseover ul li a:hover {
background-position: 0 -36px;
}

The attribute “background-position” for the element “a:hover” is defined by the two values “0″, which aligns the graphic to position 0 of the x-axis and to -36 pixels on y-axis. The y-axis value derives from the half of the overall height of the background graphic and has to be adjusted, if the height of the graphic is not equal to 72 pixels.


.mouseover ul li a:hover span {
background-position: 100% -36px;
color:#fff;
}

The value of the y-axis of the attribute “background-position” must be set to “100%” so the graphis is aligned to the right.
Additional font settings of the mouse over state might be defined here, too.

…and that’s it!
Happy coding!

(Take a look at a live demo here)

In order to get this working in all the browsers (Ok, using IE6 we’ll have to trick a little bit, but we’ll discuss this later) we have to approach this in a sneaky way.
Here is a simple, fast, lean, cross browser functional and JavaScript free method, only using plain HTML, CSS and graphical elements:

First of all we need graphical elements, for this example only four are needed, five if including the IE6 hack:

• 2 images of your choice to be linked
• one graphic with transparency and color of your choice in the same size as the linked images
• one 1px x 1px full transparent GIF

You might want to download the whole demo here, there the graphics are included.

First create the div containers including the picture links in the html document, assign a class called “image” and determine the background image, which shall be linked, by using the “style” attribute.

<div class="image"
style="background-image: url(product_01.jpg);" > </div>

<div class="image"
style="background-image: url(product_02.jpg);" > </div>

[Integrating the images via "style" might be avoided by assigning "id" and referencing the image url in the css, but I needed the image to referenced in the html code for dynamic site and did not want to use the "img" tag for reasons]

After that add the links, define them using “class=”picture”, linkpath and further attributes like “title”. it should look somewhat like this:

<div class="image"
style="background-image: url(product_01.jpg);" >
<a href="[path]" class="picture" title="linktitle" > </a>
</div>

<div class="image"
style="background-image: url(product_02.jpg);" >
<a href="[path]" class="picture" title="linktitle" > </a>
 </div>

Now the css, only two classes (+ one pseudo class) are needed:

.image:
It must at least contain “background-repeat: no-repeat; border: none;” or modifications if wanted.

a.picture
The size of the linked picture and the attribute “display:block;” must be indicated. The image-url for the non-active link is indicated as “background-image”, too

a.picture:hover
Here the image-url for the active link is defined.

Now the .css file should contain the following:

a.picture {
background: url(opacity_01.png) no-repeat;
width:183px;
height:146px;
display:block;}

a.picture:hover {
background: url(blank_01.gif) repeat;}

.image{
background-repeat: no-repeat;
border: none;}

Now you just need to align the two div containers properly as you like them to be.
In this example they are floating with a margin of 10 pixels, which is done by two additional classes “l” and “m”. Why it is separated from the “image” class is explained here.

Attention!

This works properly in every browser, but in not IE6, because here only full transparency is supported.
So here’s the IE6 hack:

First create a new .css file named “ie6.css”, then add the following lines between the <head> tags of your html file:

<!--[if IE 6]>
<style type="text/css">@import url(ie6.css);</style>
<![endif]-->

After that you refer to an image using only full transparency in the “a.picture” class in the “ie6.css” file, somewhat like that:

a.picture {background: url(opacity_ie6_01.gif) no-repeat;}

…and you are done!

You are web designer and have to work full contact with the customer? Then you will know this situation, the customer wants that headline bold and purple – no, make it green or is blue a better choice? This goes back and forth, which would make you go crazy if you had to do the changes on thousands of subpages. Using CSS you do changes faster than the customer decides between green and yellow.

Ok, enough chit chat here are some tricks to get more effective:

• Assign multiple classes on one element

  This is a real saver, one simply creates a “virtual” class by combing several ones, which is highly flexible and lowers the amount classes you will have to use.

  Example:

  The text should be black, underlined and bold, now instead of using a single one containing all three attributes, you setup three with each single value (black, underlined, bold)

  <style type="text/css">
  .black {color: #000;}
  .underlined {text-decoration: underlined;}
  .bold {font-weight: bold;}
  </style>
  
  <span class="black underlined bold">the text</span>
  

  On the first hand this looks intricate, one could do this with a single class, but remember if you combine the three classes, you’ll get six “virtual” ones.

• Using multiple stylesheets

  Splitting up the a single stylesheet first of all makes it easier to maintain for the web programmer.

  <style type="text/css">
  @import "main.css";
  @import url("additional.css");
  </style>

  It’ also possible to embed further .css files into a specific .css file by integrating “@import url(“additional.css”); right at the top of the .css document.

• Abbreviations
  
  As there are always many roads to reach your destination, CSS is no exception. One can shorten the CSS code to increase the clearness of the structure.
  Example:
  Instead of:

  .classname{
  margin-top: 10px;
  margin-right: 15px;
  margin-bottom: 20px;
  margin-left: 25px;
  }

  the abbreviated version should be used:

  .classname{margin-top: 10px 15px 20px 25px;}

  The order of the values is important, they are arranged clock wise:
  top (12 o’clock), right (3 o’clock), bottom (6 o’clock), left (9 o’clock),
  That also works with the attributes padding and border.
  
  Compressing attribute values

  Several attributes can be concentrated in a single one.

  Example:
  Instead of:

  .classname{
  border-width: 10px;
  border-style: solid;
  border-color: #000;
  }

  Use:

  .classname{border: 10px solid #000;}

  This also works on “font” and “background”, i.e. .