A remedy for the new Dreamwidth inbox

(Context for this, in case you've not already seen it.)

A little while ago I was complaining about the new Inbox and Create Entries pages (currently in beta, soon to become the only option). I find them rather ugly and difficult to navigate, and I know several other people feel the same way. Well, I have been learning to use the Stylus browser extension, which lets you apply custom CSS to modify the appearance of web pages, and here is my new custom style sheet to make the new inbox look as much like the old inbox as I can!

Using this style sheet, here is what my inbox looks like with beta testing turned on (click for full size):



To use it:

• Install Stylus. It's available for Firefox, Chrome and Opera, and the main website with download links (in the top right) is here. NB the link for Opera doesn't seem to work, but I was able to install it in Opera by going to the Chrome store and just installing the Chrome version by clicking 'Add to Opera'.
• Open the extension (in Opera: click the little Extensions cube icon in the top right, click on Stylus, click the Manage button. Probably similar in other browsers?).
• Click the 'Write New Style' button.
• Paste the below code into the big code box.
• Change the drop-down at the bottom that says 'Everything' to 'URLs starting with' and enter https://www.dreamwidth.org/inbox. (This isn't essential; obviously if you apply the style to everything then it will be applied to the new inbox. But it might mess up stuff elsewhere, I don't know.)
• Give the style a name, make sure the 'Enabled' box is ticked, and save it.
• Admire your beautiful new-old inbox!

Click here to see the code

/* Set font size to 75% of the browser default */

body {
    font-size: 75%;
}

/* Make the buttons plain in colour and style */

.button.large {
    height: 20px;
    background-color: #efefef;
    color: black;
    border: 1px solid grey;
    font-size: small;
    padding: 0;
    cursor: auto;
    transition: none;
}

.button.logout {
    height: 20px;
    background-color: #efefef;
    color: black;
    border: 1px solid grey;
    font-size: small;
    cursor: auto;
    transition: none;
    border-radius: 2px;
}

.button.secondary {
    height: 20px;
    background-color: #efefef;
    color: black;
    border: 1px solid grey;
    font-size: small;
    cursor: auto;
    transition: none;
    border-radius: 2px;
}

@media only screen and (min-width: 40.0625em) { #account-links .logout.button {
    padding: 0 0.5rem;
    }}

.button.large:hover {
    background-color: #e5e5e5;
    color: black;
}

.button.logout:hover {
    background-color: #e5e5e5;
    color: black;
}

.button.secondary:hover {
    background-color: #e5e5e5;
    color: black;
}

.action_button.large {
    height: 20px;
    background-color: buttonface;
    color: black;
    border: 1px solid grey;
    font-size: small;
    padding: 0% 0.5em;
    cursor: auto;
    transition: none;
}

.action_button.large:hover {
    background-color: #e5e5e5;
}

/* Separate the list of folders on the left from the list of inbox items on the right, with a vertical line between them */

#inbox_folders {
    width: 100%;
    padding-right: 5%;
}

#inbox_folders ul {
    font-size: 100%;
    margin-right: 5%;
}

#inbox_messages {
    border-left: 1px solid silver;
    padding-left: 3%;
}

/* Restore the visual contrast between read and unread inbox items */

.item_read {
    color: silver;
}

.item_read a {
    color: silver;
}

.read {
    color: silver;
}

span.read:hover {
    color: black;
}

span.read:hover a {
    color: black;
}

.detail {
    color: #555;
}

.item_read .time {
    color: #555;
}

.inbox_item_row {
    cursor: pointer;
}

/* Return the header immediately above the inbox items to its old style as far as possible: a plain-coloured, smaller header with plain buttons for the numbered pages */

.searchhighlight {
    background-color: #dddddd;
    border-top: 1px solid #cccccc;
    border-bottom: 1px solid #cccccc;
    height: 2.5em;
}

#action_row {
    padding: 0.2em 0.5em;
}

ul.pagination li {
    background-color: #efefef;
    color: black;
    border: 1px solid grey;
}

ul.pagination li a {
    padding: 0 5px;
    font-weight: normal;
    color: black;
    transition: none;
    height: 100%;
}

ul.pagination li a:visited {
    color: black;
}

ul.pagination li.current a {
    background-color: #cccccc;
    font-weight: normal;
    color: black;
    cursor: pointer;
    border-radius: 0px;
}

ul.pagination li.current a:visited {
    background-color: #cccccc;
    font-weight: normal;
    color: black;
}

/* Return the list of inbox folders to its old style as far as possible */

.folders a {
    color: black;
    border: 1px solid #f5f5f5;
}

.folders a:hover {
    background-color: #eeeeee;
    border: 1px solid #bbbbbb;
}

.folders li {
    width: 100%;
    border: 1px solid white;
    list-style-type: none;
}

ul li ul {
    margin-left: 0;
    max-width: 86%;
}

/* Widen margins to where they were before */

#page {
    max-width: 80%;
}

.row {
    max-width: 100%;
}

#content {
    max-width: 100%;
}

#logo {
    margin-left: 29%;
    margin-bottom: 20em;
}

/* Return the top banner to its old appearance */

#masthead {
    height: 8.7em;
    border-top: 0.45em solid #f4d2fc;
}

#account-links-wrapper {
    margin: -2em auto;
}

#account-links-text {
    margin-top: 1.5em;
}

@media only screen and (min-width: 40.0625em) { #account-links ul {
    font-size: 100%;
    }}

@media only screen and (min-width: 40.0625em) {
#account-links .ljuser {
    font-size: 1.5em;
    }}

#canvas {
    border-width: 2em 0;
}

/* Miscellaneous tweaks */

h1 {
    font-size: 2em;
}

.top-bar-section ul li>a {
    font-size: 75%;
}

@media only screen and (min-width: 40.0625em) { .top-bar-section .has-dropdown>a:after {
    display: none;
}}

.nav-search select {
    font-size: 75%;
    background-color: white;
}

.top-bar-section .dropdown {
    min-width: 12em;
}

#search {
    border: 1px solid #767676;
    transition: none;
    border-radius: 2px;
    width: 15em;
    height: 1.75em;
}

#search:hover {
    border: 1px solid #4f4f4f;
}

This code fixes several of the things that were making the new inbox look cluttered and overwhelming for me. It:

• Returns the font size to 75% of the browser default.
• Widens the margins back to where they used to be.
• Restores the visual contrast between read and unread inbox items.
• Separates the list of folders and the inbox contents with some more space and a vertical line, as before.
• Makes buttons smaller and plainer, as they were before.
• Returns the list of folders to its old, plainer appearance.

It was designed for use with the Tropospherical (Red or Purple) site skins. From a brief perusal of the others, it seems to look mostly OK with Celerity and Lynx; with either of the Gradation skins, you'll want to change the color: black; line under .folders a to color: white; or something else other than black, because that bit makes the text in the folder links invisible.

There are comments (between the /* */s) explaining what each part of the code does, so if you want some of these fixes but you like other features of the new inbox and would prefer to keep them, you can remove parts of it as you please.

Things it doesn't do:

• I've improved the appearance of the numbered page buttons, but I can't do anything about the fact that there are multiple numbered page buttons instead of just 'next' and 'previous'.
• I can't do anything about the single buttons that switch from 'mark all read' and 'delete all' to 'mark read/unread' and 'delete' on selecting something, instead of separate buttons for individual/all.
• For some reason the margins of the top banner and the main inbox section don't quite line up, as they do in the old Inbox. This is probably fixable with the right CSS knowledge, but I had a moderately big headache getting the margins to move at all and have decided to leave it here for now!

I am very much not an expert in this kind of thing! Beyond briefly testing the different site skins, I don't know how this will interact with different browsers, screen sizes/resolutions, access needs, aesthetic tastes etc., and there may not be a huge amount I can do about any problems. That said, I want to help people, and if you find the new inbox unusable and this doesn't work for you either, let me know and we'll see if we can figure out how to make it work better. :) Likewise, any advice from people who know more about CSS than I do is very welcome.

I have made an effort to do something similar for the new Create Entries page. Here I think the actual structure of the page is too different to be able to achieve much, and I've not got very far, but I have managed to make it a little more tolerable; I'll probably do a bit more tinkering and see how it goes and may share the results here. In any case, the unmodified new Inbox was definitely the worse of the two for me, so I'm fairly pleased with having achieved this much.

And it's been pretty good fun figuring out Stylus. I have learnt quite a bit more about CSS, I have learnt to use Inspect Element properly instead of occasionally briefly clicking in there to check some HTML and then running away from all the scary-looking code lines, and actually, being able to modify the look of anything anywhere on the internet is very satisfying. I find Youtube's 'recommended videos' in the sidebar while I'm trying to watch a video distracting? No problem, I can just get rid of them! I decide I don't like Tumblr blue? It's green now! Maybe I'll fix Wikipedia's hideous new mobile-friendly layout next.