Twitter Bootstrap: Move the Topbar

Posted on by jeff

Customizing Twitter Bootstrap can be confusing to those that do not understand CSS, and maybe even to those that do. One of the things I found was while I like the topbar, I didn’t always want it at the top of my page. Sometimes you want a logo at the top with the topbar just below it. Moving the topbar is not something that is explicitly spelled out in the Twitter Bootstrap documentation so I wanted to share with you a simple way to do it.

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.

Time to Git Some Version Control

Posted on by jeff

I know I’m a little late to the version control party, but up until now I have been using Subversion. Subversion is good, but when compared to Git it requires a lot of work to get going. For a quick comparison check out my previous post on getting Subversion setup on a local server.

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 port 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.