37signals Product Blog

CSS tip for customizing the appearance of Backpack pages

Brian Bailey recently posted about how he adds some CSS to Backpack pages in order to customize them. "Simply add a small amount of CSS to the page in the form of a note and you can change the formatting to meet your needs," he writes. Details below.

If you use Backpack, the organizing web tool and intranet from 37signals, you may sometimes wish you could modify the text on a page to fit a little more information on it. I have a page where I collect code snippets and terminal commands and the default font seems a bit large with so much content. Turns out there's an easy solution to this: simply add a small amount of CSS to the page in the form of a note and you can change the formatting to meet your needs.

I've known this was possible for a long time, but finally took the time to figure it out the other day. After a few experiments, I came up with a solution that works great for me. Those of you with actual CSS skills may find much to laugh at with this example - feel free to post improvements. Plus, there is much more that can be done once someone with design skills starts playing with it.

To do this yourself, just create a new note on a page with what you see above (I like to put the note at the bottom). As soon as you save it, refresh the page to see the changes. Feel free to experiment with the font sizes (just change 14px and 12px) and the title colors (color:brown).

Here are two examples, with the standard version first. Check out these ideas if you'd like to explore further. Enjoy!

#1: Before.

#1: After.

#2: Before.

#2: After.

Do you have a neat trick re: a 37signals product? Let us know.

Use Jott to transcribe a voice message and post it to your Backpack homepage

Jott converts your voice into emails, text messages, reminders, lists and appointments. You can even use it to transcribe a voice message and post it to your Backpack homepage. Full details and an example audio track at Jott.

You: Call 866-JOTT-123
Jott: Who do you want to Jott?
You: Backpack
Jott: Backpack, is this correct?
You: Yes
Jott: Beep!
You: Add Task to Home, remember to get lunch for the team.

Jott transcribes your message and posts it to your Backpack homepage.

If you're constantly on the go (or just prefer talking to typing), this sounds like a great way to get entries into Backpack via your phone.

(Note: If you're already a Jott user, add Backpack to your Jott links.)

How to use Fluid to "create a kick ass intranet app using 37signals"

"Create a Kick Ass Intranet App using 37signals" explains how to use Open Bar and Fluid to create "a stylish intranet app that lives in your dock, complete with all of your 37signals services."

The post explains how to set up Open Bar so you can switch easily between apps and explains the benefits:

Having all of these applications in place really creates a great intranet-type workflow. It’s helpful even when working solo but if you have a small team like me it really shines. I also noticed my people used the various apps a lot more once I introduced them to using OpenID to bring them together — as well as putting it all together in Fluid.app.

It then explains how to get the apps to live in your dock:

So we have our cool kid intranet setup with OpenID. Now we need to go download Fluid.app and turn this puppy into a desktop-like application. Fluid is an SSB (site-specific browser), which is basically just a web browser without all the extras and with a customizable dock icon (I would recommend grabbing these nice icons for use with Fluid).

It’s great for tabbing to your intranet window, adding a calendar entry, and tabbing back to Photoshop, to give a quick example. This is a process that just isn’t as exciting when you’re stuck in Safari.

Mac users: Create a Backpack Journal Dashboard widget using Safari's webclip button

Elaptics.co.uk has a blog post on rolling your own Backpack Journal Dashboard Widget using Safari's webclip button:

Safari on Leopard has an awesome, but probably somewhat underused, webclip button which allows you to grab part of a webpage and have it turned into a widget. And as all programmers know, the best code to write is no code. So I have grabbed the updating part of the page as per the widget described and also the team’s recent updates. As a double bonus, it updates the clips when you invoke Dashboard so you get the latest team updates straight away rather than what you’d normally be having to do is refresh your browser’s page yourself.

Ok, I’m blind, where’s this button?

Right here….

And this is what mine looks like on my Dashboard. The webclip widgets also allow you to put different frames around the clip, just flip it over and pick from the options. This season my two widgets are sporting the latest in Torn Edge and Glass themes fashion.

Do you have a neat tip for a 37signals product? Let us know.

Provide Campfire-based "Live Support Chat" with the flip of a switch using new Zendesk widget

Zendesk has put together a simple integration to Campfire so help desk agents can set up support chats with their customers/end-users.

Mikkel Svane, CEO of Zendesk.com, emailed us to let us know:

The integration is pretty basic, but people can expand it any way they want to. Zendesk is also integrated to time tracking service Harvest, and we're currently designing integration paths to both Highrise and Basecamp.

We asked Mikkel for more info and here's what he had to say:

Zendesk is for customer support what Basecamp is for project management. More than 1800 organizations have signed up for the service, and several have asked for a "live chat" feature in our product. Instead, we have used the widget interface that Zendesk provides to build an integration to Campfire.

The sample integration is very basic but Zendesk clients who embed the Javascript widget in their help desk are now able to provide "Live Support Chat" by the flip of a switch. Provided they have a Campfire account. End-users' help desk credentials are automatically transferred to the chat session.

It goes without saying that the widget can easily be extended. If for example you only want to provide live support for registered users, want to publish support conversations in your forums or want to provide 1-on-1 chats.

We ourselves have deployed it in our own help desk to demonstrate the functionality and gather some feedback, and we are considering integrating it directly in our service.

Zendesk widgets are well suited for 3rd party integrations. We have a Harvest integration that is slightly more complex, and integrations are coming to a lot of other services, including Highrise and Basecamp.

Developers: Check out the integration widget code.

Video: Backpack tips for dragging

This video shows you how to use the Home/End and Page Up/Down keys for dragging items around a Backpack page quickly. Also, you'll see how easy it is to drag an item to a page in the sidebar.

Going from "hi" to Highrise

Sometimes it's the little things in life. Etienne Segonzac sent us an email explaining one reason she likes Highrise: She gets to just type "hi" when forwarding emails to the app.

I know it's kind of silly but I just like my little story. See, my Highrise dropbox is under the name "Highrise". So every time I forward an email to my account I just type hi ! Mail completes the rest... It just feels great, I can manage the biggest part of my work with an application as simple as "hi". :)

For more on how to do this, check out the Highrise and email page at HighriseHQ.com.

Any little thing like this that you like in a 37signals product? Let us know.

[Case Study] Baltimore Sun uses Basecamp to manage "a million moving parts"

Tim Windsor, General Manager of The Baltimore Sun's online division, wrote to tell us that "Basecamp is a beneficial infection."

So we brought Basecamp in to the interactive creative department.

And then we introduced it to the product development team. Where someone from IT saw it and now is asking where to sign up.

Basecamp is a beneficial virus. Once it's unleashed on an organization, it's bound to grow and replicate.

Below, Thom Smith, Director of Design & Development for The Baltimore Sun, answers questions about how his team uses Basecamp.

How do you use Basecamp?
My Department operates as a mini creative agency within the greater organization of The Baltimore Sun Media Group. We do design and development work for clients both internally and externally. This work spans most media and includes: web sites (big and small), banner ads, e-mail newsletters, admail, video production, logos, illustrations, print ads, tradeshow signage, etc. This keeps us pretty busy and we use Basecamp to manage all of our projects from start to finish.

Which feature(s) do you use most?
Milestones and messages are the most important tools to us. The ability to assign those to members of my team is extremely helpful as well.

We create a new project for each of our clients. Then we break down each job into its component parts. Each of these deliverables is a milestone assigned to a member of my team. They get their instruction in the form of a message that is associated to the milestone. These details are added by our traffic coordinator who works with our clients to assess needs.

We also use the file upload tool to share large files, like video, for our clients to proof. It's so much easier than trying to get them to use ftp.

Why are you a Basecamp evangelist?
We love Basecamp because it's so simple. It takes very little time to learn and is easy to teach to new employees and clients. It's also extremely flexible. The tools are useful and intuitive, so regardless of the type of business you're doing, you can adapt Basecamp to suit your needs. That's why I've reccomended Basecamp to so many people. There are many units in our corporation who use Basecamp now and as more people are exposed to it, they see how it could be a good tool for their own departments.

Tips for getting the most out of Backpack on the iPhone

Just Another iPhone Blog recently posted "Tips and Tweaks Make 37signals’ Backpack A 'Must Have' iPhone Application." It discusses using iBackpack to make your Backpack pages look nice on your iPhone and also links to a Forum post that shows how to add a custom Backpack icon to your iPhone home screen.

I came to Backpack to solve a specific work issue/need but am finding it to be an incredibly powerful and useful web-based application. I now use it to communicate with my colleagues and reduce the amount of “telephone” we play when information is incorrectly transmitted. I use it to collect pictures, manage a to do list, store files and documents for easy access anywhere anytime. I used it to collect ideas, information, slides and random thoughts as I prepared a talk I gave at a conference last week. Best of all, it is not only powerful but it is easy to use. In fact, it is the first time I pushed my colleagues toward a new technology that they did not initially curse me about.

The problem is- while Backpack’s pages are fully accessible from an iPhone or iPod Touch they are a bit too difficult to manipulate easily.

Fortunately, some incredibly smart folks have created some amazing “add-ons” that make Backpack one of the most iPhone-friendly and powerful applications around.

Justin Michael at violetpixel.com as created iBackpack. iBackpack is code that optimizes Backpack pages for viewing and use on an iPhone. He has posted screen caps on his site that show the difference...

Justin’s code make each page easily accessible, fully readable. It makes adding, editing and changing the information on a page a breeze. It makes Backpack one of, if not the, best iPhone organizational tools around.

But that left an additional issue. Once I optimized my pages using iBackpack I created direct links to some of my most-used Backpack pages on my home screen. They work great but look downright ugly.

Luckily Grettir Asmundarson at tinypineapple.com created a lovely little iPhone icon and has shared it with anyone who wants it.

Now Backpack works great AND looks great on my iPhone. It has become my most important organizational application in a short period of time and I have no doubt that will only increase as 37signals and other creative folks find new and powerful uses for it.

How do you add that custom Backpack icon to your iPhone home screen? Grettir offers step-by-step instructions at the Backpack Forum.

[Case Study] Shaw Builders creates multimillion dollar homes with Basecamp

Bob Moore commented at Signal vs. Noise about how Shaw Builders, his home-building company, uses Basecamp.

We use Basecamp to help manage the complex process of building custom homes. We work with a wide range of talented architects, interior designers, engineers, landscape architects, masons, electricians, plumbers, HVAC contractors. Our clients range from Wall Street Exec's (super type A's) to Hollywood celebs. If they actually had to take the time to "learn" how to use Basecamp, they wouldn't use it. Sometimes a simple tool can solve a wide variety of major problems and Basecamp does that for us.

We followed up with Bob to learn more about how his team uses Basecamp.

How do you use Basecamp and why do you like it?
We're a high end custom home builder with a staff of around 50 people. This includes office personnel, site project managers, lead carpenters, finish carpenters, masons, cabinetmakers and laborers. A typical project is in the area of $ 3 million to $ 8 million dollars. We normally have 4 to 5 projects running at any given time. Each project has it's own dedicated project manager who has P&L responsibilities for their project. The project team also includes architects, civil engineers, mechanical engineers, interior designers, landscape architects and sub-contractors for HVAC, electrical, plumbing, etc. There's a ton of information to manage and track. This is where Basecamp comes in. We use it to track project to do lists, project milestones, Project logs, Builders Reports and photos. We post photos almost on a daily basis. The architects and homeowners love the fact that they can check on the project from anywhere in the world.
 
I'm a huge fan of hosted applications. Fewer management headaches for me! I like Basecamp because it's simple for everyone to use yet powerful enough to allow us to do the things we need to. For example, I use Google's Picasa to post our photos and link to slideshows right from Basecamp. I haven't run into a lot of limitations. Our customers range from the hyper Wall Steet type "A"'s to Hollywood artists and celebrities. If they felt at all intimidated by Basecamp, they wouldn't use it. We haven't run into that.