I want to change how my Private Messages are displayed, but am unsure of how to change my DT’s and DD’s to get the desired end result?!
Paul O’ was nice enough to help me code my original PM, and it looks like this…
Screenshot
Sample Code
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<!-- ################## DEBBIE ##################### -->
<!-- Page Stylesheets -->
<style>
/* Basic CSS Reset */
html, body, address, blockquote, div,
form, fieldset, caption,
h1, h2, h3, h4, h5, h6,
hr, ul, li, ol, ul, dl, dt, dd, br,
table, tr, td, th, p, img{
margin: 0;
padding: 0;
}
body{
font-family: Helvetica, Arial, Sans-Serif;
font-weight: normal;
line-height: 1.4em;
font-size: 0.9em;
color: #000;
background: #FFF;
}
fieldset{
border: 1.5px solid #AAA; /**/
}
#viewPM{
width: 760px;
margin: 0 auto;
padding: 30px 0 30px 0;
}
#viewPM fieldset{
padding: 30px 50px 50px 50px;
}
#viewPM legend{
margin: 0 0 0 -1em;
}
#msgWrapper{
border: 1.5px solid #D7D3FF; /**/
}
#msgBarTop,
#msgBarBottom{
margin: 0 0 20px 0;
padding: 0.8em 1em 0.7em 0.7em;
overflow: hidden;
background-color: #D7D3FF;
}
#msgBarBottom{
margin: 50px 0 0 0;
}
#msgBarTop input,
#msgBarBottom input{
margin: 0 0 0 0;
padding: 0;
font-size: 0.9em;
}
#msgBarTop a,
#msgBarBottom a{
float: right;
line-height: 25px;
}
/* HERE IS WHERE I NEED HELP... */
#viewPM dl{
padding: 0;
}
#viewPM dt,
#viewPM dd{
display: inline-block;
width: 84%; /* Can't use 50% because of the whitespace gap between inline blocks and this is the easier fix. */
*display: inline; /* IE6 & 7 inline-block fix - invalid css. */
zoom: 1.0; /* IE6 & 7 fix - invalid css. */
vertical-align: top;
}
#viewPM dt{
width: 13%; /**/
margin: 0 8px 0 0;
font-weight: bold;
text-align: right;
}
#viewPM dd{
padding: 0 0 0.5em 0;
}
#viewPM dd a{
display: inline-block;
margin: 0 15px 0 0;
text-align: left;
vertical-align: top;
}
#viewPM dd#msgBody{
width: 500px;
margin: 10px 0 0 0;
padding: 1em 1em 3em 1em;
border: 1px solid #AAA;
}
#viewPM img{
padding: 0 0 5px 0;
}
</style>
</head>
<body>
<form id="viewPM" action="" method="post">
<fieldset>
<legend>Viewing Sent PM</legend>
<div id='msgWrapper'>
<div id='msgBarTop'>
<a id='returnToInbox' href=''>Trash Folder</a>
</div>
<dl>
<dt>FROM:</dt>
<dd><a href='/account/profile/DoubleDee/about-me'>
DoubleDee
<img id='onlineStatus' src='' width='10' alt='' />
<br />
<img src='/uploads/f21190299a795e9cf3439f7f62c223f79e023ab7.jpg' width='80' alt='' title='' />
</a></dd>
<dt>TO:</dt>
<dd>
<a href=''>
username1
<img id='onlineStatus' src='' width='10' alt='' />
<br />
<img src='/uploads/NoImageAvailable_80x80.png' width='80' alt='' title='' />
</a>
<a href=''>
username2
<img id='onlineStatus' src='' width='10' alt='' />
<br />
<img src='/uploads/NoImageAvailable_80x80.png' width='80' alt='' title='' />
</a>
<a href=''>
username3
<img id='onlineStatus' src='' width='10' alt='' />
<br />
<img src='/uploads/NoImageAvailable_80x80.png' width='80' alt='' title='' />
</a>
</dd>
<dt>BCC:</dt>
<dd>
<a href=''>
username4
<img id='onlineStatus' src='' width='10' alt='' />
</a>
<a href=''>
username5
<img id='onlineStatus' src='' width='10' alt='' />
</a>
</dd>
<dt>DATE:</dt>
<dd>Thursday, Jan 16, 2014 @ 6:31:59 pm</dd>
<dt>SUBJECT:</dt>
<dd>TO: u1, u2, u3 BCC: u4, u5</dd>
<dt></dt>
<dd id='msgBody'><p>Testing View-PM queries...</p></dd>
</dl>
<div id='msgBarBottom'>
<a id='returnToInbox' href=''>Trash Folder</a>
</div>
</div>
</fieldset>
</form>
</body>
</html>
This looks awesome, but the Sender of the PM needs to know who was on the “To:” list and who was on the “Bcc:” list, so I would like to change things as follows…
1.) The “To:” and “Bcc:” Recipients should be all on one line/row
2.) The “To:” and “Bcc:” labels should appear to the left of the corresponding Thumbnails for said sub-lists
3.) Currently, you can only PM up to 5 people total (To + Bcc), but it would be dreamy if this new design would scale if that number increases.
So, if I started allowing people to PM 10 people, then when my code got to the 6th Thumbnail, things would just wrap around to the left and underneath the first row.
4.) The design should also be flexible in allowing the # of Recipients on the “To:” list and the “Bcc:” list to change.
For example, any of these combinations should display the same…
[COLOR="#FF0000"][b]TO:[/b][/COLOR] User1 (pic), User2 (pic), User3 (pic) [COLOR="#FF0000"][b]BCC:[/b][/COLOR] User4 (pic)
[COLOR="#FF0000"][b]TO:[/b][/COLOR] User1 (pic), User2 (pic) [COLOR="#FF0000"][b]BCC:[/b][/COLOR] User3 (pic), User4 (pic)
[COLOR="#FF0000"][b]TO:[/b][/COLOR] User1 (pic) [COLOR="#FF0000"][b]BCC:[/b][/COLOR] User2 (pic), User3 (pic), User4 (pic)
Screenshot of Desired New PM
I think one thing that is throwing me off is how I ended up creating a Two-Column-esque layout using width: 13% and 84%…
While that works for the “From:”, “Date:” and “Subject:” lines, it doesn’t seems to work with the modified “To:” line which will now append the “Bcc:” list as well.
Sorry for the long OP, but I have been yelled at before for not providing working samples, so I figured I’d give you guys LOTS to work with!! 
Can I easily accomplish what I described above?? :-/
This one is out of my league!!
Sincerely,
Debbie
