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

[⚡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.

[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

[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!

[SweetPotato]

Yeah, I know, I'm just sugar-coating it. :-)

[SweetPotato]

Yeah, I know, I'm just sugar-coating it. :-)