Lets say you want to do something like this:

The easiest thing to do is simply override the topbar selectors. Because of the nature of cascading stye sheets we do not need to include every element included in the topbar selectors within the bootstrap.css file, just the ones we want to change. In this example I created my own CSS file with just the selectors with the elements I needed to modify. This is preferred to editing the bootstrap.css file directly because it enables you upgrade the bootstrap framework without breaking your customizations in the future. So I created a css file, I called mine style.css, and included the following in style.css file:

.topbar-wrapper {
  position: relative;
  height: 40px;
  margin: 0;

}

.topbar-wrapper .topbar {
  position: absolute;
  margin: 0;
}

.topbar-wrapper .topbar .topbar-inner {
  /* Rounded Top */
  -moz-border-radius-topleft:4px;
  -moz-border-radius-topright:4px;
  -webkit-border-top-left-radius:4px;
  -webkit-border-top-right-radius:4px;
  border-top-left-radius:4px;
  border-top-right-radius:4px;
}

Then to ensure your css overrides the bootstrap css all you have to do is include your css file after the bootstrap css file in the head section of your html.

<link rel="stylesheet" href="css/bootstrap.min.css" type="text/css" />
<link rel="stylesheet" href="css/style.css" type="text/css" />

The last step is body of your html. Just include your logo, and/or div that you want to contain the content you wish to display above the topbar. Like this:

<div class="container">
  <a href="/"><img src="images/logo.png" alt="Jeffrey Stone" title="Jeffrey Stone" ></a>
    <div class="topbar-wrapper" style="z-index: 5;">

That all there is to it. Other customizations to Twitter Bootstrap can be carried out in the same way allowing you to customize Twitter Bootstrap to fit you next project. This code has only been tested with Twitter Bootstrap 1.4.

You can view the live demo.

Git is a little more contained. No servers to setup. Actually not much setup at all until you want to publish your project at Github.

I am on a Mac so these instructions are for Mac, although its just as easy to setup on your PC.

First, you will need to grab git. You can find the dmg file at code.google.com. Or if you have macports installed on your system you can just do the following:

sudo macport install git-core

Once you have that installed we will need to do a little configuration. The following commands just setup the default user and email that will be included in the git files. From the command line you will need to run:

git config --global user.name "Joe User"
git config --global user.email "joe@user.net"

After that we are ready to setup project. You will want to do the next commands from the directory your project is in, so you will need to cd to the directory:

cd /home/jeffrey/newproject

Once you are in the project directory run the following command to setup the repository.

git init

After we have the repository setup we need to add the files. The following command add the files to the staging area.

git add .

Now that the files are staged we need to commit the changes to the repository. What ever you put in the quotes should briefly describe the changes.

git commit -m "First Commit"

After that everything is setup. After you make changes and are ready to update the repository just do the following.

git add .
git commit -m "Fixed typo in index.php"

The period on the git add line simple means include all files. Instead of a period you could just specify a specific file as in “git add index.php”

Once you have got your initial repo going with git, now is time to start using it to it’s full intention. I suggest you read Andrew Burgess’s Getting Good with Git. He goes into branching and checking out branches which is where the true power lies in my opinion. Git can literally manage multiple versions of your application in one directory. The files that are visible in that directory are set by Git and based on what branch you have checked out. Git makes it very simple way to manage your source code and without the headache of setting up a repository on a server. There is no reason why you couldn’t be using Git to manage your source code today even if you have no desire to ever push that code to a public repo like Github.

Git definitely makes version control easier. If you are struggling with the concept of version control and how to set it up and use check out git and put Andrew Burgess’s Getting Good with Git on your reading list.

I am not a designer so one of the tasks that seems to drain my spirt is designing a layout. Don’t get me wrong. I am very opinionated about usability of a layout I just hate coding the layout. Then I stumbled on the Twitter Bootstrap project. If you have not seen this open source project from the Twitter team you really need to… especially if you are like me and hate building the UI. I won’t go into the particulars because U trust you can all read for yourself. The Bootstrap framework has some great documentation. It basically contains 90% of everything you would need for the majority of sites and is easy to use. Customization is not as easy, but as long as you understand CSS you should be fine.

So if you need a new layout for your site or application I suggest checking it out. If it isn’t perfect it will at least be a great spring board.

First was a redesign on katherinestone.net. Previously the site was a simple photoblog. We updated it so it could not only have a portfolio but also a blog for news about her work, and a store. I think it looks good and does an excellent job of showing off her images. The change was in part due to her first solo photography show which officially opens today.

Second was a redesign of angel-photography.com. The biggest reason behind the change was I wanted to not only get rid of the flash slideshow on the main page (I hate flash) but also update the site to HTML5/CSS3. I used jQuery to power the slideshow to ensure it was accesible on any computer or mobile device. The layout was slightly modified in the process to give it an updated look, but the majority of the content remains the same.

If you get a chance to check them out, let me know what you think.

When I decided to setup a local Subversion server, I found that while there was several guides on how to do it, not one completely got me going. What follows is what worked for me. While it may not be 100% complete for you, I hope it does help point you in the right direction.

For this guide I am using Ubuntu 8.04 LTS as my server. This guide assumes you have at least a good working knoweldge of Ubuntu, Linux, and are not afraid of the command line. With that in mind, let’s get going.

 sudo apt-get install subversion libapache2-svn

 sudo svnadmin create /path/to/repos/project

Next you will want to setup the permissions on the repos you just created. First setup your login to the repo.

 sudo vim /path-to-repos/project/conf/passwd

At the end of the file add the a line in the format as the examples show in the file. = For example:

 jeff = password

Personally I use the same login name I typically use the same username my linux user account is on the box. Next you need to edit the conf file.

sudo vim /path-to-repos/project/conf/svnserve.conf

Here we want to uncomment 3 lines and edit one so they are like this:

anon-access = none
auth-access = write
password-db = passwd

There is of course more options in the terms of security and such, but these basic settings will get you up and running.

Now we need to start the server.

sudo svnserve -d -r /path-to-repos

After that we can now import our files. There is a couple of ways to do this. If you are doing this from the server where subversion is installed, you can use this command to import:

sudo svn import /path-to-local-directory file:///path-to-repos/project --username username

You should be promoted to enter the password you designated in the passwd file above.

If you are doing this remotely from a linux machine you can use this command:

sudo svn import /path-to-local-directory svn://svnserver/project --username username

And if you want to upload your repo from a windows machine, you will need a subversion client. I use sliksvn. From the command line I use the following to import:

c:\ svn import -m "project" --force-log path-to-local-files svn://svnserver/project --username username

svn co svn://svnserver/project /local-project-folder --username username

To commit the changes:

svn commit -m "Saving Changes" /local-project-folder

There is a lot more to Subversion, but I hope that this guide has helped you your own copy up and running.