Skip to content

Instantly share code, notes, and snippets.

@greglittlefield-wf
Created July 22, 2015 17:47
Show Gist options
  • Save greglittlefield-wf/a6c316cdaa5fa1f93435 to your computer and use it in GitHub Desktop.
Save greglittlefield-wf/a6c316cdaa5fa1f93435 to your computer and use it in GitHub Desktop.
HipChat CSS mod for message list styling improvements
#!/bin/bash
set -e
#########################################################
#
# HipChat CSS mod for message list styling improvements
#
# Hack at your own risk
#
#########################################################
HIPCHAT_PATH="/Applications/HipChat.app/"
if [[ ! -d "$HIPCHAT_PATH" ]]; then
echo "Finding path to HipChat using AppleScript (this will open up HipChat if it's not already running)"
HIPCHAT_PATH=$(osascript -e 'POSIX path of (path to application "HipChat")')
fi
if [[ ! -d "$HIPCHAT_PATH" ]]; then
echo Could not locate HipChat installation folder.
exit 1
fi
CUSTOM_CSS_PATH="$HIPCHAT_PATH/Contents/Resources/chat-custom.css"
HTML_TEMPLATE_PATH="$HIPCHAT_PATH/Contents/Resources/chat.html"
uninstall() {
# Delete custom CSS file if it exists
rm -f "$CUSTOM_CSS_PATH"
# Remove custom CSS include from HTML template.
sed -i.bak '/chat-custom.css/d' "$HTML_TEMPLATE_PATH"
}
# Load custom CSS into a bash variable
define(){ IFS='\n' read -r -d '' ${1} || true; }
define CUSTOM_CSS <<EndOfMessage
/* em-based date divider margin */
.dateDivider {
margin: 1.8em 0;
}
/* em-based date divider size */
.dateDivider span {
font-size: 1.5em;
}
/* Less message padding */
.chatBlock td {
padding: 4px 0;
}
/* Vertically center and emoticons */
img[name="emoticon"] {
height: 1.75em;
width: auto;
margin-top: -.25em;
position: relative;
}
/* Lighter outgoing message background */
.me {
background-color: #ecf2f8
}
/* More appropriately-sized code blocks */
.messageBlock pre * {font-family: inherit;}
.messageBlock pre {
font-family: Input, Menlo !important;
font-size: 80%;
}
EndOfMessage
install() {
# Write custom CSS to a new file.
printf "%s" "$CUSTOM_CSS" > "$CUSTOM_CSS_PATH"
# Modify the existing HTML template to include the custom CSS.
sed -i.bak 's/<\/head>/\<!-- custom styles --> <link rel="stylesheet" href="chat-custom.css">\
<\/head>/' "$HTML_TEMPLATE_PATH"
}
if [[ "$1" == "--uninstall" ]]; then
echo "Uninstalling HipChat CSS modifications..."
uninstall
else
echo "Uninstalling any existing HipChat CSS modifications..."
uninstall
echo "Installing HipChat CSS modifications..."
install
fi
echo "Success! Restart HipChat to see changes."
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment