single line layout...

User avatar
spaceace
Site Owner
Posts: 991
Joined: Wed Dec 16, 2009 8:30 pm
Location: Ontario, Canada
Flag: Canada

single line layout...

Post by spaceace »

replace the contents of ajax_chat.css with the following...

for phpBB 3.1.x version
ajax_chat.css
Code: Select all
#act_indicator {
	visibility:hidden;
	vertical-align:text-bottom;
	margin-left: -18px;
	cursor: wait;
}

#bbpalette {
	display: inline;
}

#check_indicator{
	vertical-align:text-bottom;
	margin-right: -2px;
	margin-bottom: 2px;
	cursor: help;
}

#chat {
	width: 100%;
}

#chat-header {
	width: 100%;
}

#whois_online {
	text-align: left;
	margin-left: 10px;
}

#fc {
	margin: 0 auto;
	height: 20px;
	width: 20px;
	border-style:solid;
	border-width:1px;
}

#chat_colour_palette {
	display: none;
	text-align: center;
	padding-bottom: 5px;
}

#chat_colour_palette table {
	margin: 0 auto;
}

#chat_bbcodes {
	display: none;
}

.select_color {
	margin: 0 auto;
}

.shouts {
	float: left;
	width: 84%;
	height: 250px;
	overflow: auto;
	overflow-x: hidden;
	margin-left: 0.5%;
}

.chat_online_off {
	width: 100%;
	height: 250px;
	overflow: auto;
	overflow-x: hidden;
}

.whois_online_off {
	visibility: hidden;
	position: fixed;
}

.whois {
	display: block;
	width: 15%;
	height: 250px;
	overflow: auto;
	text-align: center;
	white-space:nowrap;
}

.whois h3 {
	margin: 2px 0;
}

.whois_chatting {
	display: block;
	width: 98%;
	border-bottom: 1px solid #CCCCCC;
	font-weight: bold;
	text-transform: uppercase;
	font-size: 1.0em;
	margin: 0 auto 4px;
}

.whois_online {
	display: block;
	width: 90%;
	text-align: left;
	margin: 6px auto;
}

.archive {
	float: left;
	width: 100%;
	overflow: auto;
	overflow-x: hidden;
}

.chat-postbody {
	padding: 0;
	line-height: 1em;
	width: 100%;
	clear: both;
	min-height: 20px;
}

#chat .post {
	margin-bottom: 0;
	padding: 2px 10px;
}

#chat .post-buttons {
	margin-top: 0;
}

.chat dd {
	border: none !important;
}

.chat-postbody .content {
	font-size: 1.3em;
}

.chatform {
	width: 100% !important;
	text-align: center;
	padding: 2px;
}

.chat-postbody ul.profile-icons {
	float: right;
	width: auto;
	padding: 0;
}

.chat-postbody ul.profile-icons li {
	margin: 0 3px;
}

.chat_rules {
	padding: 2px 6px 4px;
	font-size: 1.1em;
}

.span_chat_rule {
	font-weight: bold;
	font-size: 1.1em;
	color: #AA0000;
}

.chat-header-link {
	text-align: center;
}

.main {
	height: 400px;
	overflow: auto;
}

.users {
	width: 90%;
	text-align: left;
	margin-left: auto;
	margin-right: auto;
}

.user {
	width: 95%;
	font-size: 1.2em;
	font-family: Verdana, Arial, Helvetica, sans-serif;
}

.chatinput {
	width: 60% !important;
	margin-bottom: 4px;
}

.message {
	line-height: 1.4em;
	font-size: 1.2em;
	margin-left: 17%;
	padding-top: 4px;
}

.chat-postprofile {
	width: 15%;
	min-width: 160px;
	float: left;
	display: inline;
}

.chat-profile-width {
	min-width: 175px;
	display: inline;
}

.chat-time {
	font-size: 0.9em;
}

.status_img {
	vertical-align: middle;
}

.chat-icon {
	background-position: 0 50%;
	background-repeat: no-repeat;
	background-image: url("./images/icon_chat.png");
	padding: 6px 0 6px 21px;
}

.chat-icon-link {
	background-image: url("./images/icon_chat.png");
	padding-left: 4px;
}

.chat-avatars {
	float: left;
	position: relative;
	margin-right: 10px;
	outline: none;
	z-index: 0;
}

.chat-names {
	margin-left: 10px;
}

div.chat-avatars:hover {
	background-color: transparent;
	z-index: 50;
}

.chat-avatars span {
	position: absolute;
	left: 0px;
	display: none;
	text-decoration: none;
}

.chat-avatars span img {
	border-width: 0;
}

div.chat-avatars:hover span {
	position:absolute;
	display:block;
	top: -4px;
	left: 40px;
	padding: 2px 2px 0;
	background: transparent;
	width: 300px;
}

.chat li.row:hover {
	background-color: transparent !important;
}

.chat_sound {
	visibility: hidden;
	position: absolute;
}

.chatnavbar {
	margin: 6px 0 4px 0;
	padding: 5px 10px;
}

.input_message {
	padding: 10px;
}

.chat-postbody .message blockquote, .chat-postbody .codebox {
	margin-right: 30px;
	margin-bottom: 4px;
}

.chat .button {
	padding: 0 8px;
	height: auto;
	margin-bottom: 3px;
}

.chat a:hover {
	text-decoration: none !important;
}

.font_cookie_delete {
	margin: 2px auto 0 auto !important;
	width: 90px;
}

.details {
	color: #AA0000;
}

.nobg {
	background: none !important;
	border: none !important;
}

@media only screen and (max-width: 900px), only screen and (max-device-width: 900px) {
	.whois {
		width: 100%;
		height: auto;
		text-align: left;
		padding: 6px 0 0;
	}
	.whois_chatting {
		display: inline;
		border: none;
		margin: 0;
	}
	.whois_online {
		display: inline;
		margin: 0 4px;
	}
	.shouts {
		width: 100%;
		height:150px;
	}
	#whois_online {
		display: -webkit-flex; /* Safari */
		-webkit-flex-wrap: wrap; /* Safari 6.1+ */
		display: inline-flex;
		flex-wrap: wrap;
	}
}

@media only screen and (max-width: 550px), only screen and (max-device-width: 550px) {
	.shouts {
		width: 100%;
		height:250px;
	}
	.chat-avatars {
		display: none;
	}
	.chat-postprofile {
		min-width: 80px;
		float: left;
		display: inline;
	}
	.chatnavbar {
		padding: 2px;
	}
	#bbpalette {
		display: none;
	}
	#whois_online {
		display: -webkit-flex; /* Safari */
		-webkit-flex-wrap: wrap; /* Safari 6.1+ */
		display: inline-flex;
		flex-wrap: wrap;
	}
}

/* ABBC3 Compatibility */

.abbc3_buttons_row {
	width: inherit !important;
}

#abbc3_buttons {
	margin-top: 0 !important;
}

#color_palette_placeholder {
	width: 100%;
	margin: 0 auto;
}

#color_palette_placeholder table {
	width: 100%;
	margin: 0 auto;
}

#chat_bbcodes #bbcode_wizard {
	position: inherit;
}

/* bootlike additions */

.bordernav {
	border: 1px solid #E7E7E7;
}

#chat .post {
	padding-bottom: 3px;
	border-radius: 4px;
}

.chat .btnbl {
	padding: 2px 10px;
}

.smfont {
	font-size: inherit;
}

.chat.panel {
	margin-bottom: 3px;
}
for phpBB 3.2.x version
Code: Select all
#act_indicator {
	visibility:hidden;
	margin-left: -14px;
	cursor: wait;
}

#bbpalette {
	display: inline;
}

#check_indicator{
	cursor: help;
}

#chat {
	width: 100%;
}

#chat-header {
	width: 100%;
}

#whois_online {
	text-align: left;
	margin-left: 10px;
}

#fc {
	margin: 0 auto;
	height: 20px;
	width: 20px;
	border-style:solid;
	border-width:1px;
}

#chat_colour_palette {
	display: none;
	text-align: center;
	padding-bottom: 5px;
}

#chat_colour_palette table {
	margin: 0 auto;
}

#chat_bbcodes {
	display: none;
}

.select_color {
	margin: 0 auto;
}

.shouts {
	float: left;
	width: 84%;
	height: 250px;
	overflow: auto;
	overflow-x: hidden;
	margin-left: 0.5%;
}

.chat_online_off {
	width: 100%;
	height: 250px;
	overflow: auto;
	overflow-x: hidden;
}

.whois_online_off {
	visibility: hidden;
	position: fixed;
}

.whois {
	display: block;
	width: 15%;
	height: 250px;
	overflow: auto;
	text-align: center;
	white-space:nowrap;
}

.whois h3 {
	margin: 2px 0;
}

.whois_chatting {
	display: block;
	width: 98%;
	border-bottom: 1px solid #CCCCCC;
	font-weight: bold;
	text-transform: uppercase;
	font-size: 1.0em;
	margin: 0 auto 4px;
}

.whois_online {
	display: block;
	width: 90%;
	text-align: left;
	margin: 6px auto;
}

.archive {
	float: left;
	width: 100%;
	overflow: auto;
	overflow-x: hidden;
}

.chat-postbody {
	padding: 0;
	line-height: 1em;
	width: 100%;
	clear: both;
	min-height: 20px;
}

#chat .post {
	margin-bottom: 0;
	padding: 2px 10px;
}

.chat dd {
	border: none !important;
}

.chat-postbody .content {
	font-size: 1.3em;
}

.chatform {
	width: 100% !important;
	text-align: center;
	padding: 2px;
}

.chat-postbody ul.profile-icons {
	float: right;
	width: auto;
	padding: 0;
}

.chat-postbody ul.profile-icons li {
	margin: 0 3px;
}

.chat_rules {
	padding: 2px 6px 4px;
	font-size: 1.1em;
}

.span_chat_rule {
	font-weight: bold;
	font-size: 1.1em;
	color: #AA0000;
}

.chat-header-link {
	text-align: center;
}

.main {
	height: 400px;
	overflow: auto;
}

.users {
	width: 90%;
	text-align: left;
	margin-left: auto;
	margin-right: auto;
}

.user {
	width: 95%;
	font-size: 1.2em;
	font-family: Verdana, Arial, Helvetica, sans-serif;
}

.chatinput {
	width: 60% !important;
	margin-bottom: 4px;
}

.message {
	line-height: 1.4em;
	font-size: 1.2em;
	margin-left: 17%;
	padding-top: 4px;
}

.chat-postprofile {
	width: 15%;
	min-width: 160px;
	float: left;
	display: inline;
}

.chat-profile-width {
	min-width: 175px;
	display: inline;
}

.chat-time {
	font-size: 0.9em;
}

.status_img {
	vertical-align: middle;
}

.chat-icon {
	font-size: 1.8em;
	vertical-align: middle;
}

.chat-quick-link-icon {
	font-size: 1.5em;
	vertical-align: middle;
}

.chat-icon-link {
	background-image: url("./images/icon_chat.png");
	padding-left: 4px;
}

.chat-avatars {
	float: left;
	position:relative;
	margin-right: 10px;
	outline: none;
	z-index: 0;
}

.chat-names {
	margin-left: 10px;
}

div.chat-avatars:hover {
	background-color: transparent;
	z-index: 50;
}

.chat-avatars span {
	position: absolute;
	left: 0px;
	display: none;
	text-decoration: none;
}

.chat-avatars span img {
	border-width: 0;
}

div.chat-avatars:hover span {
	position:absolute;
	display:block;
	top: -4px;
	left: 40px;
	padding: 2px 2px 0;
	background: transparent;
}

.chat li.row:hover {
	background-color: transparent !important;
}

.chat_sound {
	visibility: hidden;
	position: absolute;
}

.chatnavbar {
	margin: 6px 0 4px 0;
	padding: 5px 10px;
}

.input_message {
	padding: 10px;
}

.chat-postbody .message blockquote, .chat-postbody .codebox {
	margin-right: 30px;
	margin-bottom: 4px;
}

.chat .button {
	padding: 0 8px;
	height: auto;
	margin-bottom: 3px;
}

.chat a:hover {
	text-decoration: none !important;
}

.font_cookie_delete {
	margin: 2px auto 0 auto !important;
	width: 90px;
}

.details {
	color: #AA0000;
}

.nobg {
	background: none !important;
	border: none !important;
}

@media only screen and (max-width: 900px), only screen and (max-device-width: 900px) {
	.whois {
		width: 100%;
		height: auto;
		text-align: left;
		padding: 6px 0 0;
	}
	.whois_chatting {
		display: inline;
		border: none;
		margin: 0;
	}
	.whois_online {
		display: inline;
		margin: 0 4px;
	}
	.shouts {
		width: 100%;
		height:150px;
	}
	#whois_online {
		display: -webkit-flex; /* Safari */
		-webkit-flex-wrap: wrap; /* Safari 6.1+ */
		display: inline-flex;
		flex-wrap: wrap;
	}
}

@media only screen and (max-width: 550px), only screen and (max-device-width: 550px) {
	.shouts {
		width: 100%;
		height:250px;
	}
	.chat-avatars {
		display: none;
	}
	.chat-postprofile {
		min-width: 80px;
		float: left;
		display: inline;
	}
	.chatnavbar {
		padding: 2px;
	}
	#bbpalette {
		display: none;
	}
	#whois_online {
		display: -webkit-flex; /* Safari */
		-webkit-flex-wrap: wrap; /* Safari 6.1+ */
		display: inline-flex;
		flex-wrap: wrap;
	}
}

/* ABBC3 Compatibility */

.abbc3_buttons_row {
	width: inherit !important;
}

#abbc3_buttons {
	margin-top: 0 !important;
}

#color_palette_placeholder {
	width: 100%;
	margin: 0 auto;
}

#color_palette_placeholder table {
	width: 100%;
	margin: 0 auto;
}

#chat_bbcodes #bbcode_wizard {
	position: inherit;
}

if you like my work and would like to contribute to my development of styles, please donate by using the donate button in the header.

Image

Need hosting? Click this text to check out ICDSOFT
Top

Return to “Ajax Chat Support”