danlev on DeviantArt

Deviation Actions

danlev's avatar

Message Center Condensed Style

By
Published:
2.8K Views

Description

Here's a screenshot of a CSS userstyle I created for the Message Center for my own personal tastes. I've been loving using it, so I wanted to share to see what others thought. It still has a ways to go, but it's difficult pushing the limits of CSS and the structure of the page.

What I changed:
- Removed message type headings
- Removed unnecessary margins, spacing, and max heights
- Removed unnecessary icons and links
- Removed message type filters on the left-column navigation
- Removed controls (remove message, unwatch, report as spam, reply to comment, original comment, etc) until you hover over a message
- Removed "new note" button (this should be done on the "Notes" page to consolidate note activity)
- Condensed pagination controls to simply previous and/or next buttons

Issues:
- It's unclear which section of messages pagination applies to
- Message border colors / background colors are all different. Trying to consolidate these into one style is tough.
- Spacing issues with right-aligned message controls

NEW Version
Image size
1091x2358px 603.88 KB
Created using AI tools
Comments7
Join the community to add your comment. Already a deviant? Log In
KenSaunders's avatar
This is cool.
I like the deviations display a lot. It's much cleaner.

I very rarely use the sidebar in the message center so I've done this which essentially collapses the sidebar until hovered over.

.f.messages-left {
width: 1px!important;
}

.f.messages-left:hover {
width: 170px !important;
}

"It's unclear which section of messages pagination applies to"
I believe that's .nav2 strong, .nav2 a,.nav2 del but you'd probably want to focus on the message center alone, for all in fact.
@-moz-document url("deviantart.com/messages/")
Removed http:www


"Spacing issues with right-aligned message controls"
Explore the .mcviews code (.view-list-thumb, .stack-switch, etc).

This helps a bit

.mcviews .dvl {
display: none!important;
}

"Message border colors / background colors are all different. Trying to consolidate these into one style is tough."
I wrote this a long time ago and so I forgot if I checked it in other areas of the site, but this works.

.ch-ctrl.mc-ctrl {
border: 1px solid #FFFFFF!important;
background: #D6DED4!important;
}