• domain_name1.com: Your domain name
• extra_domain_name.com: Extra domains if your also using extra domain mapping in wordpress
• file_root: Path to your wordpress install

Files

/etc/nginx/sites-available/domain_name1.com

# WordPress Multi Site Domain
server {
    listen 80 ;
    server_name .domain_name1.com .extra_domain_name.com;

    root /file_root/wordpress;
    index index.php index.html index.htm;

    # Rewrite for multi site files
    rewrite /files/(.+)$ /wp-includes/ms-files.php?file=$1 last;

    # Rewrite for wordpress
    if (!-e $request_filename) {
        rewrite ^(.+)$ /index.php?q=$1 last;
    }

    location ~ .php$ {
        fastcgi_pass    unix:/tmp/php-fastcgi.socket; # or port like 127.0.0.1:9000
        fastcgi_param   SCRIPT_FILENAME $document_root$fastcgi_script_name;
        include         fastcgi_params;
    }
}

Finish

sudo ln -s /etc/nginx/sites-available/domain_name.com /etc/nginx/sites-enabled/domain_name.com
sudo service nginx restart

Goal: serve phpmyadmin from the local machine from /opt/phpmyadmin answering to the domain http://phpmyadmin.local/

Used in this guide:

• Ubuntu 11.04
• nginx 0.8.54
• php5-cgi 5.3.5
• phpmyadmin 3.4.5

Packages:

Extras:

Files:

Append to: /etc/hosts

/etc/init/php-fastcgi.conf

/etc/nginx/sites-available/phpmyadmin.local

Install phpmyadmin

Get latest package from: http://www.phpmyadmin.net/home_page/downloads.php

Putting it all together

You should now be able to navigate to http://phpmyadmin.local/ to configure and access phpmyadmin

WARNING:

I have not proof tested these notes yet. I will remove this warning when tested.

I’ve lately been a sucker for the power of css, and trying to limit the number of images used. So lets get started at building the tooltips without a single image.

HTML

We’ll build a form with popup help descriptions that appear when you mouse over or focus a field. I have not thought about how else to apply this technique, but I’d love to hear how you have adopted it.

We will start with a form definition, with a username and password fields. You could use a horizontal menu navigation with tooltip descriptions.

Step 1: Accessible form

<form>
    <ul>
        <li>
            <label for='#username'>Username</label>
            <input type='text' id='username' name='username'/>
            <span class='help_text' id='username_help_text'>
                Your username must be unique
            </span>
        </li>
        <li>
            <label for='#password'>Password</label>
            <input type='password' id='password' name='password'/>
            <span class='help_text' id='password_help_text'>
                <h2>Password help</h4>
                <p>Your password must be at least four characters long.</p>
                <p>You should not use the same password on multiple sites.</p>
            </span>
        </li>
    </ul>
</form>

So far we have a plain form. It’s a perfect start to an accessible form. The help text’s are wrapped in a class identified span this can be whatever you want as long as it’s able to be addressed in css. The spans here work well with the Django output I am using. The id’s on the spans are just there to give us more options with javascript later.

There are two field help texts, the first is a plain text that fits beside the field, the second example being a much more verbose description with heading and paragraphs.

CSS

Step 2: Form styling

[sourcecode language="css" wraplines="false"]
body {
font-family: arial, sans;
}
input[type="text"],
input[type="password"] {
border: 1px solid #ccc;
}
ul {
width: 310px;
list-style: none;
margin: 0;
padding: 10px;
border: 1px solid #ccc;
background: #efefef;
}
li {
padding: 10px 0;
margin: 0;
}
label, input {
display: block;
width: 99%;
}
[/sourcecode]

Step 3: Help text styling

[sourcecode language="css"]
.help_text {
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
border: 1px solid #ccc;
background: #ccf;
padding: 10px;
display: block;
}
.help_text h2 {
margin-top: 0;
}
[/sourcecode]

Now comes the more interesting styling. The help text gets rounded borders where supported, plus a little bit of padding and colour.

Step 4: Callout positioning

[sourcecode language="css" highlight="2,15,16,17,18,19"]
li {
position: relative;
padding: 10px 0;
margin: 0;
}
.help_text {
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
border: 1px solid #ccc;
background: #ccf;
padding: 10px;
display: block;

position: absolute;
top: 25px;
left: 100%;
width: 310px;
margin-left: 20px;
}

[/sourcecode]

To position the help text to the right we use absolute positioning. To make the left: 100% work we need to make the parent element (li) relative. Then we just use margins to offset from there. If you create a larger triangle later on then the margin-left can be adjusted here to correct the positioning.

Step 5: Callout triangles

[sourcecode language="css"]
.help_text:before,
.help_text:after {
content: ”;
position: absolute;
width: 0;
height: 0;
top: 5px;
border-top: 10px solid transparent;
border-bottom: 10px solid transparent;
}

.help_text:before {
left: -10px;
border-right: 10px solid #ccc;
}

.help_text:after {
left: -9px;
border-right: 10px solid #ccf;
}
[/sourcecode]

Two triangles are created, one ‘before’ using the background colour and one ‘after’ using the foreground colour. This gives us the illusion of an outlined triangle. The triangles are placed offset relative to the parent. So once the triangle size is adjusted the position will need to be tweaked again to look correct.

Step 6: Hidden until needed

[sourcecode language="css" highlight="15,17,18,19,20,21,22"]
.help_text {
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
border: 1px solid #ccc;
background: #ccf;
padding: 10px;
display: block;

position: absolute;
top: 25px;
left: 100%;
width: 310px;
margin-left: 20px;
display: none;
}
li:hover .help_text {
display: block;
}
input:focus + .help_text {
display: block;
}
[/sourcecode]

Ad the final css is for hiding the callouts until needed. The demo includes two examples of how to achieve this and there are boundless more ways of doing it. The li.hover will display the callout when the mouse is over the field section, and the input:focus displays the callout when the field is focused. The input:focus will only work if the .help_text is directly after the input field.

Compatibility

Compatibility is left as an exercise to the reader. When this type of progressive enhancement is used in production I’m happy to accommodate the ‘bling’ only for browsers that support it (think rounded corners and triangles using before/after) as the ‘bling’ is only for enhancement and the site’s usability is not reduced without it.

IE6

IE6 is about the only consideration that may be needed depending on your audience.

IE6 does not support the hover selector, but that can be handled by using a shim or javascript, and it does not support the before and after selectors. The help is still clearly identifiable without the triangle, but for consistency can be done by either adding more tags for the triangles either on the server side or by javascript and styling the extra tags,

To follow on from there I have updated (hacked) the example to use CSS3 gradients instead of images. Unsupported browsers fallback to solid colour backgrounds.

I am not using these examples in the wild. They need a lot more polish before being released. Image fallback could be added back in for example. It was just to show examples of how the CSS3 gradient buttons look and function in Firefox and Chrome.

Button code:

<a class='button'><b class='o'><b class='m'><b>Button</b></b></b></a>

Results in various browsers:

Check out the example code at: http://dl.dropbox.com/u/173699/css3-buttons.html

- Karl

This is intended for situations where redmine needs to be served in a subdirectory via a nginx that is also used for other serving needs.

Some basic prerequisite knowledge of nginx and redmine will likely be needed.

Instructions are tested on redmine-svn and Ubuntu-9.10.

• Install dependencies

  • sudo apt-get install subversion libmysql-ruby rake rubygems mongrel nginx

• Setup directory structure

  • sudo adduser --system --group redmine
    sudo mkdir /opt/redmine
    sudo chown redmine:redmine /opt/redmine
    sudo -Hu redmine svn checkout http://redmine.rubyforge.org/svn/trunk /opt/redmine

• Create the MySQL database for redmine
  • Example for mysql-server on localhost:

    sudo apt-get install mysql-server
    mysql -u root -p
    create user 'redmine'@'localhost' identified by 'password';
    grant all privileges on  `redmine_%` . * to  'redmine'@'localhost';
    create database redmine_production character set utf8;
    quit;

  • (or use phpmyadmin)
• Copy config/database.yml.example to config/database.yml and edit the database configuration

  • sudo -Hu redmine cp /opt/redmine/config/database.yml.example /opt/redmine/config/database.yml
    sudo -Hu redmine vim /opt/redmine/config/database.yml

  • Example database spec:

    • production:
        adapter: mysql
        database: redmine_production
        host: localhost
        username: redmine
        password: password
        encoding: utf8

• Generate redmine session store secret

  • cd /opt/redmine
    sudo -Hu redmine gem install -v=2.3.5 rails
    sudo -Hu redmine rake generate_session_store

• Create the database structure and insert the default data

  • sudo -Hu redmine RAILS_ENV=production rake db:migrate
    sudo -Hu redmine RAILS_ENV=production rake redmine:load_default_data

• Setup redmine to be served from /redmine/

  • cd /opt/redmine/config
    sudo -Hu redmine cp additional_environment.rb.example additional_environment.rb
    echo 'config.action_controller.relative_url_root = "/redmine"' | sudo -Hu redmine tee -a additional_environment.rb

• Setup email delivery as desired

  • cd /opt/redmine/config
    sudo -Hu redmine cp email.yml.example email.yml

    • Example smtp spec

      • sudo -Hu redmine vim email.yml

        production:
          delivery_method: :smtp
          smtp_settings:
            address: smtp.example.com
            port: 25
            domain: example.com

• Start the mongrel server

  • cd /opt/redmine; sudo -Hu redmine mongrel_rails start -e production -p 9001 -d

• Edit /etc/nginx/sites-enabled/default

  • sudo vim /etc/nginx/sites-enabled/default

  • Add to the active server section:

    •         location /redmine {
                      alias /opt/redmine/public/;
                      try_files  $uri/index.html $uri.html $uri @mongrel;
              }
              location @mongrel {
                      proxy_set_header  X-Real-IP        $remote_addr;
                      proxy_set_header  X-Forwarded-For  $proxy_add_x_forwarded_for;
                      proxy_set_header  Host             $http_host;
                      proxy_redirect    off;
                      proxy_pass        http://127.0.0.1:9001;
              }

• Restart nginx:

  sudo service nginx restart

• Test the website. eg: http://localhost/redmine/
• If successful, set mongrel to start on boot

  • sudo vim /etc/rc.local

    • cd /opt/redmine; sudo -Hu redmine mongrel_rails start -e production -p 9001 -d

• Retest site after a reboot