A little HootSuite userstyling

I keep trying out the social stream web app, HootSuite (I made a new icon for the Fluid app a while back), both in Safari 5 and in a Fluid browser. I like it, and given that I end up in it pretty often, I thought I’d polish up some edges that were bugging me. These changes may or may not be your cup of tea.

The following changes were made within the Blue Steel theme on HootSuite, and if you use it with another theme, you’ll probably at least want to change the scrollbar colors. The basic rundown of changes is:

• Much nicer scrollbars using webkit’s scrollbar-specific styling options
• Move the user photo in a tweet to the right, remove the padding on the left and leave more space for the actual tweet.
• Further adjustments to make the previous adjustment work with menus and badges
• Darken the username in tweets, add a slight beveled edge, and change the font to Helvetica

  Before and After

In Safari 5

You’ll need the User CSS Extension, which is simple to install and get running with. My only complaint with this extension is that it tends to clear itself out pretty regularly, so make sure you have backups of your styles.

Click the “A” icon in the menubar after the extension is enabled, and start a new style definition called “HootSuite.” Enable it, set the domains to “http://hootsuite.com/*” and paste the code below into the textarea. Save it, and reload HootSuite. Skip to the end for the code.

In Fluid

In Fluid, userstyle support is built in. Just go to Preferences -> User Styles and create a new one for the domain “http://hootsuite.com/*”. Paste in the code below and reload HootSuite.

The code

Modify at will…

::-webkit-scrollbar {
  width: 7px;
}
::-webkit-scrollbar:horizontal {
  height:7px;
}
::-webkit-scrollbar-track {
  margin-top: -10px;
  margin-bottom: -10px;
  background:#ccc;
  -webkit-border-radius: 5px;
}
::-webkit-scrollbar-track:disabled {
  display: none;
}
::-webkit-scrollbar-thumb {
  border-width: 19px 0;
  min-height: 20px;
  background:rgba(38, 71, 113,0.3);
  opacity: 0.4;
  -webkit-border-radius: 5px;
}
.stream .message {
  border-top:none !important;
  padding:5px !important;
}
.message .networkAvatar {
  left:auto !important;
  right:15px !important;
  top:5px !important;
}
.message .networkName {
  color: #666 !important;
  text-shadow: #fff -1px -1px 0px !important;
  font-family: "Helvetica Neue" !important;
  line-height:15px !important;
}
.stream .stream-scroll .messageOptions {
  height:28px !important;
  padding:2px 4px 2px 8px;
  position:absolute;
  right:10px;z-index:1;
}
.message p {
  padding-top:4px !important;
}
.message span.status {
  position:absolute;
  top:6px;
  right:1px !important;
}