Customize the look of Hootsuite dashboard

I’m a heavy Hootsuite user. This powerful social media management tool gives everything I need. However, if you’re using something terribly intensively, certain things start to bother you. In my case it’s about the design of the dashboard.

Eventually I found some time to customize the look. You can do it as well. The only thing you need, if you use Chrome browser, is to get from Chrome Web Store an extension called Stylish. It’s also available for Firefox. This extension lets you apply your personal CSS styles to web pages.

First let me show how I styled the Hootsuite dashboard. It’s based on a couple of good Hoostuite themes found on Userstyles.org. Click on images to enlarge.

Default Look

Improved Look

Things that have changed:

– bigger font in the text area, bigger padding – now the window stands out as it should be; it works both in the dashboard and Hootlet,
– redesigned scroll bars (now they are not so overwhelming),
– added light grey background to messages and text area with a white text shadow – it’s easier on the eyes and looks cooler,
– removed intensive colors and borders from Select profiles panel
– some minor changes

What to do

1. Once you install Stylish, go to Extensions, and click on the Options.
2. Click on Write New Style button located on the left.
3. In the first field, Code, paste the text from below. You can further modify it, according to what you want to achieve:

::-webkit-scrollbar {
width: 5px;
}
::-webkit-scrollbar:horizontal {
height:7px;
}
::-webkit-scrollbar-track {
margin-top: -10px;
margin-bottom: -10px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
background:#ffffff;
}
::-webkit-scrollbar-track:disabled {
display: none;
}
::-webkit-scrollbar-thumb {
border-width: 19px 0;
min-height: 20px;
background:#CCCCCC;
opacity: 0.4;
-webkit-border-radius: 5px;
}
.message {
background:#efefef !important;
background-image:none !important;
border-bottom: 1px solid #dedede !important;
border-top: 1px solid #ffffff !important;
text-shadow: 0 1px #ffffff;
}
.message .networkName {
font-size: 11px !important;
font-family: arial, helvetica !important;
}
.message p {
font-size:13px;
color: #555555 !important;
}
.message p a:hover {
color: #AAAAAA !important;
}
.composerWidget {
border-bottom:0px solid #EFEFEF !important;
}
.composerBox {
border-bottom:0px solid #EFEFEF !important;
}
textarea {
width:96% !important;
background:none !important;
padding:5px !important;
font-size:14px;
color:#555555;
position:relative;
text-shadow:0 1px #ffffff;
}
.newCount new {
display:none !important;
}
.new {
display:none !important;
}
.messageOptions {
background: none !important;
background-image:none !important;
}
#streamsContainer {
background:#efefef !important;
background-image:none !important;
}
.messageBox {
margin-top:-1px;
border:#aaaaaa 1px solid !important;
padding-top:2px;
background:#efefef !important;
}
.selectedList {
border:#aaaaaa 1px solid !important;
}
.snList {
background:#fff;
}
.profileSelectorWidget .avatar {
width:20px;height:20px;
}
.profileSelectorWidget .selectedList .item {
margin:0 0 2px 3px;
border:1px solid #CCCCCC !important;
-moz-border-radius:2px;-webkit-border-radius:2px;border-radius:2px;
-moz-box-shadow:0 1px #fff !important;
-webkit-box-shadow:0 1px #fff !important;
box-shadow:0 1px #fff !important;
background-color:#FFFFFF;
}
.profileSelectorWidget .selectedList .item:hover{
background-color:#EFEFEF;
}
.profileSelectorWidget .picker .snList .row.active {
border:1px solid #FFFFFF;
background-color:#EFEFEF;
}
div.content.trim._content {
display:none !important;
}

4. Underneath, next to Applies to, click on Add button, select URLs starting with, and type the address http://www.hootsuite.com/dashboard
5. Add a new field. Select URLs on the domain, and type hootsuite.com