Slicker looking message area

[SweetPotato]

I've been playing around with my messaging pages today and though I'd share the results in case it's of any use.

Basically, I've added some neater looking tabs on the reply/delete options, done something similar for the Inbox/Sent etc tabs, put a border round the message and highlighted the Compose button a bit better:

Here's how she's looking


And here's the CSS in the old editor. Not tried it in the DS.


/* Styling inbox messages*/
.xg_widget_profiles_message ul.page_tabs {
    clear: right;
    margin-bottom: 10px;
    margin-left: 0;
    margin-right: 0;
    margin-top: -5px;
    width: 100%;
    z-index: 1;
}
#message-detail-actions li, #message-reply-actions li {
background-color: #EEEEEE;
border:solid 1px #c1c1c1;
border-radius: 5px 5px 0 0;
-moz-border-radius: 5px 5px 0 0;
-webkit-border-radius: 5px 5px 0 0;
float: left;
padding:5px 7px 2px;
text-shadow: 1px 1px #ffffff;
}
.xg_widget_profiles_message_show .xg_user_generated{
background:#ffffff;
border:solid 1px #c1c1c1;
padding:5px;
}


#message-detail-actions {
    border-width: 0 !important;
    margin: 1.2em 0 1px;
    padding: 0;
}
.xg_widget_profiles_message ul.page_tabs li.this a, ul.page_tabs li.this span.xg_tabs {
    background-color: #EEEEEE;
border-radius: 5px 5px 0 0;
-moz-border-radius: 5px 5px 0 0;
-webkit-border-radius: 5px 5px 0 0;
padding:5px 7px 2px;
text-shadow: 1px 1px #ffffff;
}
#xg_compose_tab {
    background-color: #EEEEEE;
border:solid 1px #C1C1C1;
border-radius: 5px 5px 0 0;
-moz-border-radius: 5px 5px 0 0;
-webkit-border-radius: 5px 5px 0 0;
    bottom: 6px;
    float: right;
    padding:5px 5px 0;
    position: relative;
}


/* Styling inbox messages END*/


More tips on my profile page.

[Michael Thompson]

Another great tip. It seems to be working just fine in the DS. 

[SweetPotato]

glad it works in the DS too

[Vladimir Sebastian Bach™]

Thnx, it's great!

[JFarrow]

fantastic!

[classic]

[Tyler Durbin]

Sniff...sniff...I couldn't get it to work and it looks sooo cool! 

[SweetPotato]

hey Tyler, did you put it in the advanced css?

[Hugh]

Another goodie. Thanks again.

[Armani Rouse]

Hey SP! Happy holidays to everyone!

I tried this out and it looks pretty cool! What I noticed is that it added color as well to the background of the message box when reading a message and the module to the immediate left in my 2 column site is also filled with color! I didnt think this would happen with the code provided but my members seem to think its a cool look so I'd like to apply it to the background of my other modules. Im not sure which line its on but one of these lines of code are not only styling the links and making them more tab like but its also filling the background of the inbox module with whatever color you modify in the code. I'd like to apply this code to other modules on my site. Do you know which of these lines is causing the color fill effect?

[SweetPotato]

Hey Armani, I don't see this effect on modules using this code, and there is nothing in the code that suggests it would do what you're seeing. I reckon you must have some other code that is affecting your site.
Sp

[lorianne]

Love it!  thanks!

[Writer Chick {Diane}]

Very nice, SP.

What would be even nicer is if Ning would give us some flexibility with this essential feature.  There's no way to sort mail---move stuff into different folders, categorize your messages, flag them, etc.  Archiving has good intentions but when you have to wade through pages and pages of archived mail to find one message, it's a nightmare.  smh

It's so unwieldy. I have no clue how a serious business site can stand to use this out-dated system!