Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Sane Flowdock Redesign with Stylebot (Browser) or userstyle.css (Native Flowdock OS X App)
/*
* Sane Flowdock Redesign Overrides
* Option 1: Copy and paste CSS into Stylebot
* Option 2: Save file as `userstyle.css` inside ~/Library/Application Support/Flowdock, hit CMD+R to reload app
*/
body {
font-family: -apple-system, BlinkMacSystemFont, Arial, Helvetica, sans-serif !important;
}
/*
* Tivac's Changes
* https://gist.github.com/tivac/d3d862896a32164ee023c17e8f99d172
*/
/* Hide the thread icons */
.bubble-container .bubble-icon {
display: none !important;
}
/* Re-enable the left border */
.bubble-container .bubble {
width: 100% !important;
border-left-width: 5px !important;
border-left-style: solid !important;
}
/* Thread views */
/* Hide the thread coloring */
#thread .bubble-container {
display: none !important;
}
/* Move content over */
#thread .thread-comment-message .content {
margin-left: 2.9rem !important;
}
/* End Tivac's Changes */
/* Show icons on hover */
.bubble-container:hover .bubble-icon {
display: block !important;
}
/* Improve line height */
.msg-body, .compact #inbox li[class*=message] {
line-height: 1.5 !important;
}
/* Increase max height with line height change in inbox activity */
.compact #inbox li[class*=message] .inbox-thread-item-single {
max-height: 3.615rem !important;
}
/* Improve selected message background */
.selected-message {
background: #f2f8fb !important;
}
/* Improve chat and thread messages */
.avatar-container {
top: 8px !important;
left: 20px !important;
}
.chat-message.message {
padding-left: 5rem !important;
border-top-width: 1px !important;
}
.thread-comment-message.message, .thread-file-message.message {
padding-left: 1.1rem !important;
padding-right: 1.1rem !important;
}
.thread-activities .message {
background: #fff !important;
border-top: 1px solid #e4e4e4 !important;
}
.message-author {
color: #454545 !important;
}
.private .me.chat-message {
background: #fff !important;
border-color: #F4F4F4 !important;
}
/* Improve message form */
.message-form fieldset {
border-radius: 2px !important;
}
.message-form.focused fieldset {
border-color: #666 !important;
}
.message-form.focused textarea {
box-shadow: none !important;
}
.thread-indicator {
display: none !important;
}
.input-button {
border-bottom-right-radius: 2px !important;
}
@fastdivision

This comment has been minimized.

Copy link
Owner Author

fastdivision commented May 30, 2017

Step 1: Install Stylebot
Step 2: Use the CSS above.
Step 3: Enjoy Flowdock again!

screen shot 2017-05-30 at 2 01 44 pm

@fastdivision

This comment has been minimized.

Copy link
Owner Author

fastdivision commented May 30, 2017

If you don't like the new color palette, desaturate the colors or make it monochrome:

/* 
 * Desaturated Tab Bar w/ Rounded Borders
 * Only use in Stylebot, not Native App 
 */

.flow-tab .tab-avatar {
    filter: saturate(80%);
    border-radius: 2px;
}

.notification-container {
    border-radius: 2px;
}
/* Monochrome Tab Bar w/ Rounded Borders */

.flow-tab .tab-avatar {
    background: #333 !important;
    border-radius: 2px !important;
}

.notification-container {
    border-radius: 2px !important;
}
@fastdivision

This comment has been minimized.

Copy link
Owner Author

fastdivision commented May 30, 2017

If you prefer the team inbox panel on the left side (classic Flowdock), here you go:

/* Move inbox to the left */

#toolbar {
    left: 30.2% !important;
}

#toolbar.private-toolbar {
    left: 0 !important;
}

.left-panel {
    float: right !important;
    width: 69.8% !important;
}

.right-panel {
    border-right: 1px solid #C0C0C0 !important;
    float: left !important;
    height: calc(100% + 49px) !important;
    margin-top: -49px !important;
    width: 30.2% !important;
}
@pareeohnos

This comment has been minimized.

Copy link

pareeohnos commented May 31, 2017

Couldn't get this to work. Flowdock (OS X app) loaded up, and you could see that it had used the stylesheet, but it became unusably slow and non-responsive. Had to force kill and remove the stylesheet. No clue as to what caused it though :(

@lautis

This comment has been minimized.

Copy link

lautis commented May 31, 2017

@pareeohnos, remove filter: saturate(80%) !important; and it should be faster.

@vastus

This comment has been minimized.

Copy link

vastus commented May 31, 2017

@pareeohnos, remove filter: saturate(80%) !important; and it should be faster.

Indeed 👍

@ddunkin

This comment has been minimized.

Copy link

ddunkin commented May 31, 2017

This was completely unusable until I removed filter: saturate(80%) !important; as @lautis suggested. Now it works great and is much better than those awful reply icons. Thanks!

@fastdivision

This comment has been minimized.

Copy link
Owner Author

fastdivision commented May 31, 2017

Removed filter: saturate(80%) and updated gist. Sorry, only tested that change in Stylebot.

@bryevdv

This comment has been minimized.

Copy link

bryevdv commented Jun 5, 2017

If anyone can say how to get rid of the avatars (and the space they occupy) I'd be appreciative! I tried playing around a bit but I'm terrible at CSS. Just adding display: none to .avatar-container makes it disappear but leaves a big whitespace gap to the left of the message body

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.