8

The major Material design updates to this site are cool, and increase the look of the site. But, see this comparison:

A screenshot of Android Enthusiasts Stack Exchange

Screenshot of Android Enthusiasts Stack Exchange

A screenshot of Android Enthusiasts Chat Room.

Screenshot of Android Enthusiasts Chat Room

Why wasn't the chat room user interface updated too? The Q&A site is on Lollipop, but the Chat Rooms are on Gingerbread. Too much variation.

A screenshot of Meta Stack Exchange Chat Room.

Screenshot of Meta Stack Exchange Chat Room

The last screenshot of the Meta Stack Exchange Chat Room looks much better, in fact. It uses bright, vibrant colours and makes chatting lively. So, why not update the Android Enthusiasts one too? Moreover, if Ripple Effects or something like that were added, then that would emphasize on our site's popularity and look. More users would like to go through here, and that means more visitors to this website.

Plus, can features be added like 'Online indicators', 'Read indicators', etc. and some design improvements like making the user's text be aligned right and the other users' text be aligned left, in a Hangouts-esque style? That would make this site stand out

  • 2
    This is a good suggestion. I agree, "chat also needs some love". However, the most feasible request is to update the design to Material only. For the rest of interesting feature requests, unfortunately it won't be easy/feasible since with current structure, all chat rooms are based on 1 design. It's either apply the design to all chat rooms, or only apply to Android.SE, which I'm afraid is too much time consuming just for this. That's my 2 cents. – Andrew T.♦ Apr 25 '15 at 15:09
  • 1
    @AndrewT. Thanks for your opinion. I had a feeling about your point, since all chat rooms have the same buttons, the same menus and all that. But, I hadn't thought much of it. – rjt.rockx Apr 25 '15 at 16:19
4

While we're waiting for official response from SE designers team, I decided to create a userstyle for main chat room.

It looks like this

chat room material design

You need to install Stylish extension on your browser:

Here's the CSS rules

.button {
    background: #FF3D00;
    border: none;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
    color: #FFF;
    font-family: Roboto, Noto, Verdana, Arial, sans-serif;
    font-weight: bold;
    padding: 8px;
    text-decoration: none;
    text-shadow: none;
    text-transform: uppercase;
}
.button:hover,
.button:active,
.button:focus {
    background: #DD2C00;
}
.mention {
    background-color: #90CAF9;
}
.messages {
    background-color: #FFF;
    color: #000;
}
.mine .messages {
    background-color: #2196F3;
    color: #FFF;
}
.mine div.content>a {
    color: #FFF;
}
.monologue .signature .username {
    font-size: 13px;
    margin: 0;
    padding-bottom: 3px;
}
#feed-ticker {
    background: #323232;
}
#dismiss-ticker {
    color: #FE4336;
    font-size: 12px;
    text-transform: uppercase;
    font-weight: bold;
}
#sidebar {
    color: #000;
}
#sidebar #info #roomtitle {
    font-family: Roboto, Noto, Verdana, Arial, sans-serif;
}
#input-area {
    background: #2196F3;
}
input#searchbox.watermark {
    font-family: Roboto, Noto, Verdana, Arial, sans-serif !important;
}
td#footer-legal>a {
    color: #FFF;
}
div#starred-posts>div>ul>li {
    font-size: 13px;
}
div#feed-ticker>h2>a {
    color: #FFF;
    text-decoration: none;
    text-transform: uppercase;
}
div.ticker-item>a {
    color: #FFF !important;
    font-size: 12px;
    text-decoration: none;
}
body {
    font-family: Roboto, Noto, Verdana, Arial, sans-serif;
    font-size: 13px;
    background-color: #EEE;
    color: #FFF;
}
a {
    text-decoration: underline;
    color: #000;
}

Feel free to edit/improve the rules!

Some references to Material Design:

  • I'm not an expert in CSS, so I believe it's not the most beautiful & efficient CSS yet... – Andrew T.♦ May 1 '16 at 0:51

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .