A little HootSuite userstyling

Brett — Sun, 26 Sep 2010 16:08:47 +0000

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

HootSuite Original Blue Steel

HootSuite with User Style

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;
}

Originally posted on BrettTerpstra.com at A little HootSuite userstyling

Fixing Gleebox

Brett — Sun, 18 Jul 2010 00:11:14 +0000

If you haven’t tried it, gleeBox is an amazing extension. I have it installed in my Firefox and Chrome setups, and I’m more than thrilled that it’s finally available for Safari. It lets you do a lot of crazy (and useful) things with keyboard commands on any website. There’s a great writeup over at PimpMySafari.com, so I won’t go into depth on the wonderful parts. I’ll concentrate on the one thing that bugs me about gleeBox: the highlight colors on found and selected elements. They are, in my opinion, a little obnoxious.

Fortunately, another Safari extension comes to the rescue. User CSS is a pretty effective way to use slightly-modified userstyles and generate your own CSS overrides. If you happen to have both extensions installed (or are on your way to get them right now), here’s a recipe for de-uglifying gleeBox (settings screenshot):

Create a new User CSS in the User CSS Manager
Name it Glee Highlight Override and set the Domains field to *
Add the code below in the Styles field:

body .GleeHL { 
	background-color:#eef49b !important;
	-webkit-box-shadow:none !important;
	border:solid 1px #dfec2c !important;
	padding:0 !important;
}
body .GleeReaped {
	background-color:#f6f9c9 !important;
	border:solid 1px #c0c660 !important;
}

The highlights should be prettier now, even if the change is fairly subtle. The style also removes the padding and shadow on the selected item so that, in most cases, selected items don’t jump around and move other elements as you tab through the page. Let me know if it doesn’t work for you. Obviously, the colors are adjustable to taste. You could even create special overrides for certain sites to match color schemes better… I mean, if you were crazy obsessive or something. If you come up with a better all-around color set, let me know!

By the way, the Reddit Twitter style is great in Safari! Here’s a shot of it with custom gleeBox highlights!