Page 1 of 1

Private Message System

Posted: Tue Mar 27, 2012 3:18 pm
by tyrenzo
Okay i have been following the tutorials on youtube for this private messaging system. First problem i have encountered is the divs in place. Trying to confirm the error messages the divs are always in the top left of the screen no matter where i place them. Is there a chance you can send me the source code for this tutorial so i can look over it?

Ps great tutorials, i loved them

Cheers

Re: Private Message System

Posted: Tue Mar 27, 2012 5:32 pm
by jacek
You mean the formatting of the page ? If so here is the CSS that I used
html, body {
	margin:			0px;
	padding:		0px;
	font-family:	Tahoma, Geneva, Verdana, sans-serif;
}

body {
	background:		#222;
}

h1 {
	margin:		0px 0px 8px 0px;
	padding:	0px;
	font-size:	26px;
}

a:link, a:visited {
	text-decoration:	underline;
	color:				#333;
}

a:hover, a:active {
	text-decoration:	none;
}

a:active {
	color:	#666;
}

form div {
	margin:		4px 0px 0px 0px;
}

form div label {
	display:	block;
	font-size:	14px;
}

#wrap {
	margin:		100px auto;
	padding:	10px;
	width:		800px;
	background:	#fff;
	border:		solid 1px #000;
	
	border-radius:			5px;
	-moz-border-radius:		5px;
	-webkit-border-radius:	5px;
	
	box-shadow:			0px 0px 10px 0px #000;
	-moz-box-shadow:	0px 0px 10px 0px #000;
	-webkit-box-shadow:	0px 0px 10px 0px #000;
}

div.msg {
	margin:		10px 0px 0px 0px;
	padding:	8px;
	
	border-radius:			4px;
	-moz-border-radius:		4px;
	-webkit-border-radius:	4px;
}

div.error {
	border:		solid 1px #900;
	
	background: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxkZWZzPjxsaW5lYXJHcmFkaWVudCBpZD0iZ3JhZGllbnQiIHgxPSIwJSIgeTE9IjAlIiB4Mj0iMCUiIHkyPSIxMDAlIj48c3RvcCBvZmZzZXQ9IjAlIiBzdHlsZT0ic3RvcC1jb2xvcjpyZ2JhKDI1NSwyMzgsMjM4LDEpOyIgLz48c3RvcCBvZmZzZXQ9IjEwMCUiIHN0eWxlPSJzdG9wLWNvbG9yOnJnYmEoMjU1LDIxNSwyMTUsMSk7IiAvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IGZpbGw9InVybCgjZ3JhZGllbnQpIiBoZWlnaHQ9IjEwMCUiIHdpZHRoPSIxMDAlIiAvPjwvc3ZnPg==);
	background: -o-linear-gradient(top, rgba(255,238,238,1), rgba(255,215,215,1));
	background: -moz-linear-gradient(top, rgba(255,238,238,1), rgba(255,215,215,1));
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0, rgba(255,238,238,1)), color-stop(1, rgba(255,215,215,1)));
	filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr=#FFFFEEEE,EndColorStr=#FFFFD7D7);
	-ms-filter: "progid:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr=#FFFFEEEE,EndColorStr=#FFFFD7D7)"
}

div.success {
	border:	solid 1px #090;
	
	background: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxkZWZzPjxsaW5lYXJHcmFkaWVudCBpZD0iZ3JhZGllbnQiIHgxPSIwJSIgeTE9IjAlIiB4Mj0iMCUiIHkyPSIxMDAlIj48c3RvcCBvZmZzZXQ9IjAlIiBzdHlsZT0ic3RvcC1jb2xvcjpyZ2JhKDIzOCwyNTUsMjM4LDEpOyIgLz48c3RvcCBvZmZzZXQ9IjEwMCUiIHN0eWxlPSJzdG9wLWNvbG9yOnJnYmEoMjA4LDI1NSwyMDgsMSk7IiAvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IGZpbGw9InVybCgjZ3JhZGllbnQpIiBoZWlnaHQ9IjEwMCUiIHdpZHRoPSIxMDAlIiAvPjwvc3ZnPg==);
	background: -o-linear-gradient(top, rgba(238,255,238,1), rgba(208,255,208,1));
	background: -moz-linear-gradient(top, rgba(238,255,238,1), rgba(208,255,208,1));
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0, rgba(238,255,238,1)), color-stop(1, rgba(208,255,208,1)));
	filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr=#FFEEFFEE,EndColorStr=#FFD0FFD0);
	-ms-filter: "progid:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr=#FFEEFFEE,EndColorStr=#FFD0FFD0)"
}

div.conversations div, div.messages div {
	margin:		10px 0px 0px 0px;
	padding:	4px;
	background:	#eee;
	border:		solid 1px #ccc;
}

div.conversations div h2, div.conversations div p {
	padding:	0px;
}

div.conversations div h2 {
	margin:			0px 0px 2px 0px;
	font-weight:	normal;
}

div.conversations div.unread h2 {
	font-weight:	bold;
}

div.conversations div p {
	margin:		4px 0px 0px 0px;
}

div.messages div p {
	padding:	2px;
}

div.messages div p.name {
	margin:		0px 0px 0px 0px;
}

div.messages div.unread p.name {
	font-weight:	bold;
}

div.messages div p.text {
	margin:		0px 0px 0px 10px;
}
Not sure why you would want to copy my terrible design though ;)