Page 1 of 1

SOLVED Modifying Div Layout to Incoporate Forum

Posted: Mon Aug 11, 2008 2:17 am
by cariel
All right, I'm not the most talented of web designers to say the least, however, I have this wonderful layout that I've been able to integrate a phpbb into. However, I can't seem to make it look all right in IE as well as Firefox. Most of the visitors will be using these web browsers. I know that it is due to using divs, but I tried using tables and it looked worse than this.

What I'm aiming for is fixing the css stylesheet so that the forum will be the same width as the top graphic (1000px)

Any help would be divine!

Code: Select all

html {
	height: 100%}
	
body {	FONT-SIZE: 10px; COLOR: #B3BDBF; FONT-FAMILY: Tahoma; BACKGROUND-IMAGE:url('templates/Conundrum/images/bg1.jpg'); BACKGROUND-REPEAT:repeat-x; background-color:#353535; TEXT-ALIGN: center;
	height: 100%;
	padding: 0;
	margin: 0}
	
table {
	width: 80%;
	padding: 0}

form, .checkbox, input.radio, .helpline, p {
	margin: 0;
	padding: 0;
	border: 0}
	
input.button {
	margin: 0;
	padding: 1px 3px;
	background-color: #ddd;
	border: 1px outset}



.avatar img {
	background-color: #fff;
	border: 3px solid #fff}
	
html>body .avatar img {
	padding: 3px;
	background-color: #fff;
	border: 1px solid #dbdbdb}



#forum {
	width: 1000px;
	height: 100%;
	background-color: #434343;
	margin: 0 auto}
	
#bodyline {
	width: 1000px;
	padding: 10px 0;
	vertical-align: top;
	text-align: left}



#top_image {
	text-align: center}

#top_image img {
	border: 0;
	width: 1000px;
	height: 304px}



#menu {
	height: 18px;
	line-height: 18px;
	padding: 0 3px 1px}
	
#menu #left a {
	padding-right: 10px}
	
#menu #right a {
	padding-left: 10px}

.mainmenu {
	line-height: 18px}




div.spacing {
	height: 10px;
	clear: both}



.postbuttons img {
	border: 0;
	margin-right: 10px}



.pad0-0-4 {
	padding: 0 0 4px}
	
.pad0-0-10 {
	padding: 0 0 10px}

.pad4 {
	padding: 4px}
	
.pad25 {
	padding: 25px}

.pad60 {
	padding: 60px}

div.timezone {
	padding: 0 3px}

div.copyright {
	padding: 5px}

.quote, .code {
	margin: 10px;
	padding: 10px}

.quote .inside_quote, .code .inside_code {
	padding: 10px}

div.hr {
	height: 1px;
	background-color: #ccc;
	margin: 5px 0}
	
div.hr hr {
	display: none}



input.post, textarea.post, select, input.postfile {
	margin: 0;
	border: 1px solid #666}

input.post, textarea.post, input.postfile {
	padding: 2px 3px}

input.post {
	height: 19px}

html>body input.post {
	height: 12px}

.helpline {
	background-color: #ebebeb}



.postmini {
	width: 25px}
	
.postsmall {
	width: 90px}
	
.postmedium {
	width: 150px}
	
.postbig {
	width: 225px}
	
.postbiggest {
	width: 450px}



.block {
	display: block}

.clear {
	clear: both}

.left {
	float: left;
	text-align: left}
	
.right {
	float: right;
	text-align: right}
	
.txtcenter {
	text-align: center}

.txtmiddle {
	text-align: center;
	vertical-align: middle}

.txtright {
	text-align: right}

.txttop {
	vertical-align: top}
	
.txtbottom {
	vertical-align: bottom}
	
.txtleft {
	text-align: left}
	

	
td.row1	{
	background-color: #efefef}
	
td.row2 {
	background-color: #dee3e7}
	
td.row3 {
	background-color: #d1d7dc}



td, th, input, select, textarea, .message {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-style: normal;
	font-weight: normal;
	text-transform: none;
	text-decoration: none;
	color: #111;
	font-size: 10px;
	line-height: 13px}

td a {
	color: #050A04;
	text-decoration: underline}	

td a:hover {
	color: #050A04;
	text-decoration: none}

tr.lines_1 th .nav, tr.lines_3 th .nav, .nav {
	font-size: 11px;
	line-height: 13px;
	font-weight: bold}		

tr.lines_1 th .nav a, tr.lines_3 th .nav a, .nav a {
	color: #050A04;
	text-decoration: none}

tr.lines_1 th .nav a:hover, tr.lines_3 th .nav a:hover, .nav a:hover {
	color: #050A04;
	text-decoration: underline}

.code {
	background-color: #fefefe;
	border: 2px solid #d6d6d6;
	font-family: Courier, 'Courier New', sans-serif;
	font-style: normal;
	font-weight: normal;
	text-transform: none;
	text-decoration: none;
	color: #0000b4;
	font-size: 11px;
	line-height: 13px}

.code a {
	color: #0000b4;
	text-decoration: underline}	

.code a:hover {
	color: #0000b4;
	text-decoration: none}

.quote {
	background-color: #fefefe;
	border: 2px solid #d6d6d6;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-style: normal;
	font-weight: normal;
	text-transform: none;
	text-decoration: none;
	color: #555;
	font-size: 10px;
	line-height: 13px}

.quote a {
	color: #555;
	text-decoration: underline}	

.quote a:hover {
	color: #555;
	text-decoration: none}
	
.edited {
	font-style: italic}




tr.toplines th {
	line-height: 24px;
	height: 24px;
	font-weight: bold;
	text-align: center;
	border: 1px solid #000;
	border-width: 1px 0;
	padding: 0 10px}

tr.lines_1 th {
	border: 1px solid #000;
	border-width: 1px 0;
	padding: 5px 2px 6px}

tr.lines_3 th {
	border: 1px solid #000;
	border-width: 1px 0;
	padding: 3px 2px}



table.index_body td.one img {
	width: 46px;
	height: 25px}
	
table.index_body td.one {
	padding: 4px;
	text-align: center}
	
table.index_body td.two {
	padding: 4px;
	width: 100%}
	
table.index_body td.three {
	padding: 4px;
	text-align: center;
	white-space: nowrap}

table.index_body_icons td img {
	vertical-align: middle}
	
table.index_body_icons td {
	white-space: nowrap;
	text-align: center}



table.groupcp td.one {
	padding: 4px 7px;
	width: 150px;
	height: 26px}
	
table.groupcp td.two {
	padding: 4px 5px 4px 4px}
	
table.groupcp td.three {
	padding: 4px 7px;
	height: 26px}



table.memberlist td.one {
	padding: 4px 7px;
	height: 26px}



table.modcp td.one img {
	width: 19px;
	height: 18px}
	
table.modcp td.one {
	padding: 4px;
	text-align: center}
	
table.modcp td.two {
	padding: 8px 4px;
	width: 100%}
	
table.modcp td.three {
	padding: 4px;
	text-align: center;
	white-space: nowrap}

table.modcp td.four {
	padding: 4px;
	white-space: nowrap;
	width: 150px}

table.modcp td.five {
	padding: 4px}

table.modcp td.six {
	padding: 4px 7px;
	vertical-align: top;
	font-weight: bold;
	text-align: left;
	width: 150px;
	height: 100px}
	
table.modcp td.seven {
	padding: 4px 7px;
	vertical-align: top;
	text-align: left;
	width: 470px}
	
table.modcp td.eight {
	padding: 4px 7px}

table.modcp td.nine {
	padding: 4px 7px;
	height: 18px;
	line-height: 18px}



table.posting_body td.one {
	padding: 4px 7px;
	width: 150px;
	height: 26px}
	
table.posting_body td.two {
	padding: 4px 5px 4px 4px}
	
table.posting_body td.three {
	padding: 4px 7px;
	vertical-align: top;
	width: 150px}

table.posting_body td.four {
	padding: 4px 5px 4px 4px;
	vertical-align: top}
	
table.posting_body td.four div {
	padding-bottom: 3px}

table.posting_body td.five {
	padding: 4px 7px}

table.posting_body td.six {
	padding: 4px 7px;
	height: 130px}
	
table.posting_body td.seven {
	padding: 4px 5px 4px 4px;
	vertical-align: top}

table.posting_body td.eight {
	padding: 4px 7px;
	vertical-align: top;
	font-weight: bold;
	width: 135px;
	text-align: left}
	
table.posting_body td.nine {
	padding: 4px 7px 10px;
	vertical-align: top;
	text-align: left}



table.privmsgs td.one img {
	width: 19px;
	height: 18px}
	
table.privmsgs td.one {
	padding: 4px;
	text-align: center}
	
table.privmsgs td.two {
	padding: 8px 4px;
	width: 100%}
	
table.privmsgs td.three {
	padding: 4px;
	text-align: center;
	white-space: nowrap}




table.profile td.one {
	padding: 4px 7px;
	width: 50%;
	height: 26px}
	
table.profile td.two {
	padding: 4px 5px 4px 4px}
	
table.profile td.three {
	padding: 4px 7px;
	height: 26px}



table.profile_view_body tr {
	height: 18px;
	text-align: right}



table.viewtopic td.one {
	padding: 4px 7px;
	font-weight: bold}

table.viewtopic td.two {
	padding: 4px 5px 4px 2px;
	height: 20px}
	
table.viewtopic td.three {
	padding: 4px 7px;
	vertical-align: top;
	width: 150px}
	
table.viewtopic td.four {
	padding: 2px 5px 4px;	
	vertical-align: top;
	height: 130px}
	
table.viewtopic td.four table {
	height: 100%;
	width: 560px}
	
table.viewtopic td.five {
	padding: 4px 7px;
	height: 18px;
	line-height: 18px}
	
table.viewtopic td.six {
	padding: 4px 5px}



table.viewforum td.one img {
	width: 19px;
	height: 18px}
	
table.viewforum td.one {
	padding: 4px;
	text-align: center}
	
table.viewforum td.two {
	padding: 4px;
	width: 100%}
	
table.viewforum td.three {
	padding: 4px;
	text-align: center;
	white-space: nowrap}



table.forumicons {
	width: 0}
	
table.forumicons td {
	white-space: nowrap}
	
table.forumicons td img {
	width: 19px;
	height: 18px}



table.search td.one {
	padding: 4px 7px;
	width: 50%;
	vertical-align: top}
	
table.search td.two {
	padding: 4px 5px 4px 4px}

table.search td.two div {
	padding-top: 3px}
	
table.search td.three {
	padding: 4px 7px;
	text-align: right}

table.search td.four {
	padding: 4px;
	width: 150px}

table.search td.five {
	padding: 8px 4px}

table.search td.six {
	padding: 4px;
	vertical-align: top}

table.search td.seven img {
	width: 19px;
	height: 18px}
	
table.search td.seven {
	padding: 4px;
	text-align: center}
	
table.search td.eight {
	padding: 4px}
	
table.search td.nine {
	padding: 4px;
	text-align: center}
	
table.search td.ten {
	padding: 4px;
	text-align: center;
	white-space: nowrap}



table.simple_header {
	background-color: #fff;
	height: 100%}
	
table.simple_header td {
	vertical-align: top}



table.viewonline td.one {
	padding: 8px 4px}
	
table.viewonline td.two {
	padding: 8px 4px;
	text-align: center}

	

h2 {
	font-size: 11px;
	line-height: 26px;
	height: 26px;
	font-weight: bold;
	color: #050A04;
	margin: 0;
	padding: 0 4px}
	
h3 {
	font-size: 11px;
	line-height: 13px;
	font-weight: bold;
	text-decoration: none;
	color: #050A04;
	margin: 0}

h2 a, h3 a {
	text-decoration: none;
	color: #050A04}
	
h2 a:hover, h3 a:hover, .copyright a:hover {
	color: #050A04;
	text-decoration: underline}

.mainmenu a, tr.lines_1 th a, tr.lines_3 th a, .timezone a, .copyright a, .blacklink a {
	color: #111;
	text-decoration: none}

.mainmenu a:hover, tr.lines_1 th a:hover, tr.lines_3 th a:hover, .timezone a:hover, .blacklink a:hover {
	color: #111;
	text-decoration: underline}

H1 {
	MARGIN-TOP: 0px; PADDING: 0px; PADDING-LEFT: 3px; FONT-SIZE: 8px; FONT-FAMILY: Tahoma; COLOR: #8DC814; TEXT-ALIGN: center; TEXT-TRANSFORM: uppercase; BORDER-BOTTOM: 1px solid #B6B6B6; LETTER-SPACING: 0px;
}
H2 {
	MARGIN-BOTTOM: 10px; PADDING: 2px; padding-left: 5px; FONT-SIZE: 9px; COLOR: #A6A6A6; FONT-FAMILY: Georgia; TEXT-ALIGN: center; TEXT-TRANSFORM: lowercase;
}

H3 {PADDING: 2px; padding-left: 3px; font-size: 8px; color: #999999; background-color:#242424; font-family: Tahoma; tex-align: center; text-transform: uppercase;}

#footer {
	CLEAR: both; HEIGHT: 40px; text-align:center; PADDING:5px;
}
A {
	FONT-WEIGHT: bold; TEXT-TRANSFORM: none; TEXT-DECORATION: none; CURSOR: default;
}
A:link {
	COLOR: #DBDBDB;
}
A:visited {
	COLOR: #DBDBDB;
}
A:hover {
	COLOR: #050A04;
}
A:active {
	COLOR: #DBDBDB;
}
img { 
	BORDER: 0px; 
}
a img { border:3px solid #658412;
}

a:hover img { border:3px solid #434343;
}
b { 
	COLOR: #BCBCBC;
}
i { 
	COLOR: #888888;
}

s {color: #171717}
u { 
	COLOR:#8DC814; border-bottom: 1px dotted #171717;
}
hr {
	TEXT-ALIGN: center; WIDTH:100%;	COLOR: #545454;
}
blockquote {	
	TEXT-ALIGN: justify; BORDER-LEFT: 4px solid #8DC814; BACKGROUND-COLOR:#949494; COLOR: #292929; PADDING: 5px; MARGIN: 20px;
}
textarea, input, select, button, submit {
	background-color: #353535; BORDER: 1px solid #252525; FONT-FAMILY: verdana; FONT-SIZE: 8pt; COLOR: #EEEEEE; MARGIN-TOP: 0px; MARGIN-BOTTOM: 0px;
}
.copyright {
	text-align: center;
	letter-spacing: -1px}
	
	* {
	PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-TOP: 0px
}
UL {
	PADDING-LEFT: 30px; MARGIN-LEFT: 0px
}
P {
	MARGIN: 1em 0px
}
BODY {
	FONT-SIZE: 10px; COLOR: #B3BDBF; FONT-FAMILY: Tahoma; BACKGROUND-IMAGE:url('templates/Conundrum/images/bg1.jpg'); BACKGROUND-REPEAT:repeat-x; background-color:#353535; TEXT-ALIGN: center
}

#layout {
margin: 0px auto;}

#container {
	MARGIN: 0px ; margin-top: 374px; TEXT-ALIGN: left; BACKGROUND-IMAGE: url(templates/Conundrum/images/bg2.jpg); BACKGROUND-REPEAT:repeat-y;}
#sidebar {
	FLOAT: left; WIDTH: 50px; PADDING-RIGHT: 0px; margin-top: 2px; margin-left: 0px; PADDING-LEFT: 27px; PADDING-TOP: 0px; PADDING-BOTTOM: 0px; TEXT-ALIGN: justify
}
#content {
	FLOAT: right; WIDTH: 1000px; PADDING-RIGHT: 0px; margin-right: 0px; PADDING-LEFT: 8px; PADDING-TOP: 0px; PADDING-BOTTOM: 0px; TEXT-ALIGN: justify
}

H1 {
	MARGIN-TOP: 0px; PADDING: 0px; PADDING-LEFT: 3px; FONT-SIZE: 8px; FONT-FAMILY: Tahoma; COLOR: #8DC814; TEXT-ALIGN: center; TEXT-TRANSFORM: uppercase; BORDER-BOTTOM: 1px solid #B6B6B6; LETTER-SPACING: 0px;
}
H2 {
	MARGIN-BOTTOM: 10px; PADDING: 2px; padding-left: 5px; FONT-SIZE: 9px; COLOR: #A6A6A6; FONT-FAMILY: Georgia; TEXT-ALIGN: center; TEXT-TRANSFORM: lowercase;
}

H3 {PADDING: 2px; padding-left: 3px; font-size: 8px; color: #999999; background-color:#242424; font-family: Tahoma; tex-align: center; text-transform: uppercase;}

#footer {
	CLEAR: both; HEIGHT: 40px; text-align:center; PADDING:5px;
}
A {
	FONT-WEIGHT: bold; TEXT-TRANSFORM: none; TEXT-DECORATION: none; CURSOR: default;
}
A:link {
	COLOR: #DBDBDB;
}
A:visited {
	COLOR: #DBDBDB;
}
A:hover {
	COLOR: #050A04;
}
A:active {
	COLOR: #DBDBDB;
}
img { 
	BORDER: 0px; 
}
a img { border:3px solid #658412;
}

a:hover img { border:3px solid #434343;
}
b { 
	COLOR: #BCBCBC;
}
i { 
	COLOR: #888888;
}

s {color: #171717}
u { 
	COLOR:#8DC814; border-bottom: 1px dotted #171717;
}
hr {
	TEXT-ALIGN: center; WIDTH: 100%;	COLOR: #545454;
}
blockquote {	
	TEXT-ALIGN: justify; BORDER-LEFT: 4px solid #8DC814; BACKGROUND-COLOR:#949494; COLOR: #292929; PADDING: 5px; MARGIN: 20px;
}
textarea, input, select, button, submit {
	background-color: #353535; BORDER: 1px solid #252525; FONT-FAMILY: verdana; FONT-SIZE: 8pt; COLOR: #EEEEEE; MARGIN-TOP: 0px; MARGIN-BOTTOM: 0px;
}
I've decided to go with a slightly different layout

Re: Modifying Div Layout to Incoporate Forum

Posted: Mon Aug 11, 2008 8:22 am
by Greenweaver
Link to board please?

Re: Modifying Div Layout to Incoporate Forum

Posted: Mon Aug 11, 2008 3:20 pm
by cariel
I just added tables within a different layout: http://damages.dramatic-personae.net/forums/

Re: Modifying Div Layout to Incoporate Forum

Posted: Tue Aug 12, 2008 4:09 am
by Greenweaver
Ok, so let's give this a try. Copy the code for each file and replace them as appropriate.

overall_header.tpl - Replace everything with this code:

Code: Select all

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html dir="{S_CONTENT_DIRECTION}">
<head>
<meta http-equiv="Content-Type" content="text/html; charset={S_CONTENT_ENCODING}"> 
<meta http-equiv="Content-Style-Type" content="text/css">
<script type="text/javascript">
<!--
/***********************************************
* Ultimate Fade-In Slideshow (v1.5): © Dynamic Drive (http://www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit http://www.dynamicdrive.com/ for this script and 100s more.
***********************************************/
 
var slideshow=new Array()
//SET IMAGE PATHS. Extend or contract array as needed
slideshow[0]=["templates/Conundrum/images/layout2.jpg", "", ""]
slideshow[1]=["templates/Conundrum/images/layout3.jpg", "", ""]
slideshow[2]=["templates/Conundrum/images/layout4.jpg", "", ""]
 
var fadebgcolor="#000000"
 
////NO need to edit beyond here/////////////
 
var fadearray=new Array() //array to cache fadeshow instances
var fadeclear=new Array() //array to cache corresponding clearinterval pointers
 
var dom=(document.getElementById) //modern dom browsers
var iebrowser=document.all
 
function fadeshow(theimages, fadewidth, fadeheight, borderwidth, delay, pause, displayorder){
this.pausecheck=pause
this.mouseovercheck=0
this.delay=delay
this.degree=10 //initial opacity degree (10%)
this.curimageindex=0
this.nextimageindex=1
fadearray[fadearray.length]=this
this.slideshowid=fadearray.length-1
this.canvasbase="canvas"+this.slideshowid
this.curcanvas=this.canvasbase+"_0"
if (typeof displayorder!="undefined")
theimages.sort(function() {return 0.5 - Math.random();}) //thanks to Mike (aka Mwinter) :)
this.theimages=theimages
this.imageborder=parseInt(borderwidth)
this.postimages=new Array() //preload images
for (p=0;p<theimages.length;p++){
this.postimages[p]=new Image()
this.postimages[p].src=theimages[p][0]
}
 
var fadewidth=fadewidth+this.imageborder*2
var fadeheight=fadeheight+this.imageborder*2
 
if (iebrowser&&dom||dom) //if IE5+ or modern browsers (ie: Firefox)
document.write('<div id="master'+this.slideshowid+'" style="border-width:0px;position:relative;width:'+fadewidth+'px;height:'+fadeheight+'px;overflow:hidden;"><div id="'+this.canvasbase+'_0" style="border-width:0px;position:absolute;width:'+fadewidth+'px;height:'+fadeheight+'px;top:0;left:0;filter:progid:DXImageTransform.Microsoft.alpha(opacity=10);-moz-opacity:10;-khtml-opacity:10;background-color:'+fadebgcolor+'"></div><div id="'+this.canvasbase+'_1" style="border-width:0px;position:absolute;width:'+fadewidth+'px;height:'+fadeheight+'px;top:0;left:0;filter:progid:DXImageTransform.Microsoft.alpha(opacity=10);-moz-opacity:10;background-color:'+fadebgcolor+'"></div></div>')
else
document.write('<div style="border-width:0px"><img style="border-width:0px" border="0" name="defaultslide'+this.slideshowid+'" src="'+this.postimages[0].src+'"></div>')
 
if (iebrowser&&dom||dom) //if IE5+ or modern browsers such as Firefox
this.startit()
else{
this.curimageindex++
setInterval("fadearray["+this.slideshowid+"].rotateimage()", this.delay)
}
}

function fadepic(obj){
if (obj.degree<100){
obj.degree+=10
if (obj.tempobj.filters&&obj.tempobj.filters[0]){
if (typeof obj.tempobj.filters[0].opacity=="number") //if IE6+
obj.tempobj.filters[0].opacity=obj.degree
else //else if IE5.5-
obj.tempobj.style.filter="alpha(opacity="+obj.degree+")"
}
else if (obj.tempobj.style.MozOpacity)
obj.tempobj.style.MozOpacity=obj.degree/101
else if (obj.tempobj.style.KhtmlOpacity)
obj.tempobj.style.KhtmlOpacity=obj.degree/100
}
else{
clearInterval(fadeclear[obj.slideshowid])
obj.nextcanvas=(obj.curcanvas==obj.canvasbase+"_0")? obj.canvasbase+"_0" : obj.canvasbase+"_1"
obj.tempobj=iebrowser? iebrowser[obj.nextcanvas] : document.getElementById(obj.nextcanvas)
obj.populateslide(obj.tempobj, obj.nextimageindex)
obj.nextimageindex=(obj.nextimageindex<obj.postimages.length-1)? obj.nextimageindex+1 : 0
setTimeout("fadearray["+obj.slideshowid+"].rotateimage()", obj.delay)
}
}
 
fadeshow.prototype.populateslide=function(picobj, picindex){
var slideHTML=""
if (this.theimages[picindex][1]!="") //if associated link exists for image
slideHTML='<a style="border-width:0px;" href="'+this.theimages[picindex][1]+'" target="'+this.theimages[picindex][2]+'">'
slideHTML+='<img src="'+this.postimages[picindex].src+'" border="0" style="border-width:0px">'
if (this.theimages[picindex][1]!="") //if associated link exists for image
slideHTML+='</a>'
picobj.innerHTML=slideHTML
}
 
 
fadeshow.prototype.rotateimage=function(){
if (this.pausecheck==1) //if pause onMouseover enabled, cache object
var cacheobj=this
if (this.mouseovercheck==1)
setTimeout(function(){cacheobj.rotateimage()}, 100)
else if (iebrowser&&dom||dom){
this.resetit()
var crossobj=this.tempobj=iebrowser? iebrowser[this.curcanvas] : document.getElementById(this.curcanvas)
crossobj.style.zIndex++
fadeclear[this.slideshowid]=setInterval("fadepic(fadearray["+this.slideshowid+"])",50)
this.curcanvas=(this.curcanvas==this.canvasbase+"_0")? this.canvasbase+"_1" : this.canvasbase+"_0"
}
else{
var ns4imgobj=document.images['defaultslide'+this.slideshowid]
ns4imgobj.src=this.postimages[this.curimageindex].src
}
this.curimageindex=(this.curimageindex<this.postimages.length-1)? this.curimageindex+1 : 0
}
 
fadeshow.prototype.resetit=function(){
this.degree=10
var crossobj=iebrowser? iebrowser[this.curcanvas] : document.getElementById(this.curcanvas)
if (crossobj.filters&&crossobj.filters[0]){
if (typeof crossobj.filters[0].opacity=="number") //if IE6+
crossobj.filters(0).opacity=this.degree
else //else if IE5.5-
crossobj.style.filter="alpha(opacity="+this.degree+")"
}
else if (crossobj.style.MozOpacity)
crossobj.style.MozOpacity=this.degree/101
else if (crossobj.style.KhtmlOpacity)
crossobj.style.KhtmlOpacity=obj.degree/100
}
 
 
fadeshow.prototype.startit=function(){
var crossobj=iebrowser? iebrowser[this.curcanvas] : document.getElementById(this.curcanvas)
this.populateslide(crossobj, this.curimageindex)
if (this.pausecheck==1){ //IF SLIDESHOW SHOULD PAUSE ONMOUSEOVER
var cacheobj=this
var crossobjcontainer=iebrowser? iebrowser["master"+this.slideshowid] : document.getElementById("master"+this.slideshowid)
crossobjcontainer.onmouseover=function(){cacheobj.mouseovercheck=1}
crossobjcontainer.onmouseout=function(){cacheobj.mouseovercheck=0}
}
this.rotateimage()
}

function MM_preloadImages() { //v3.0
  var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
    var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
    if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}

function MM_swapImgRestore() { //v3.0
  var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}

function MM_findObj(n, d) { //v4.01
  var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
    d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
  if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
  for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
  if(!x && d.getElementById) x=d.getElementById(n); return x;
}

function MM_swapImage() { //v3.0
  var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
   if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
//-->
</script>
<script language="JavaScript" type="text/JavaScript">
<!--
function MM_reloadPage(init) {  //reloads the window if Nav4 resized
  if (init==true) with (navigator) {if ((appName=="Netscape")&&(parseInt(appVersion)==4)) {
    document.MM_pgW=innerWidth; document.MM_pgH=innerHeight; onresize=MM_reloadPage; }}
  else if (innerWidth!=document.MM_pgW || innerHeight!=document.MM_pgH) location.reload();
}
MM_reloadPage(true);
//-->
</script>
{META}
{NAV_LINKS} 
<title>{SITENAME} :: {PAGE_TITLE}</title>
<link rel="stylesheet" href="templates/ndesign/{T_HEAD_STYLESHEET}" type="text/css">

<!-- BEGIN switch_enable_pm_popup -->
<script language="Javascript" type="text/javascript">
<!--
	if ( {PRIVATE_MESSAGE_NEW_FLAG} )
	{
		window.open('{U_PRIVATEMSGS_POPUP}', '_phpbbprivmsg', 'HEIGHT=225,resizable=yes,WIDTH=400');;
	}
//-->
</script>
<!-- END switch_enable_pm_popup -->
</head>
<body>
<a name="top"></a>
<table width="1000" height="100%" border="0" align="center" cellpadding="0" cellspacing="0">
  <tr> 
    <td background="templates/ndesign/images/bgforum.jpg" valign="top">
		<table width="980" border="0" align="center" cellpadding="0" cellspacing="0">
      		<tr> 
        		<td><table width="100%" border="0" align="center" cellpadding="0" cellspacing="0">
						<tr>
								<td align="center" valign="top"><table width="100%" border=0 cellpadding=0 cellspacing=0>
												<tr>
														<td align="center"><script type="text/javascript">
										//new fadeshow(IMAGES_ARRAY_NAME, slideshow_width, slideshow_height, borderwidth, delay, pause (0=no, 1=yes), optionalRandomOrder)
										new fadeshow(slideshow, 379, 304, 0, 3000, 1, "R")
										</script>
																<img src="templates/Conundrum/images/header.jpg" border="0" usemap="#Map"/>
																		<map name="Map">
																						<area shape="rect" coords="98,211,191,224" href="http://lemmonicedesigns.net" target="new" alt="lemonice designs">
																						<area shape="rect" coords="81,185,139,198" href="http://damages.dramatic-personae.net">
																						<area shape="rect" coords="140,196,183,211" href="mailto:cariel[at]dramatic-personaet[dot]net" alt="Cariel">
																						<area shape="rect" coords="107,37,171,52" href="http://damages.dramatic-personae.net" target="new" alt="Instinctive Damages Fan Resource">
																		</map>														</td>
														</tr>
								</table></td>
						</tr>
						<tr>
								<td valign="top" ><div id="top_nav">
												<ul>
														<li><a href="{U_INDEX}">{L_INDEX}</a></li>
														<li><a href="{U_FAQ}">FAQ</a></li>
														<li><a href="{U_SEARCH}">Search</a></li>
														<li><a href="{U_MEMBERLIST}">Members</a></li>
														<li><a href="{U_GROUP_CP}">Groups</a></li>
														<li><a href="{U_PROFILE}">Profile</a></li>
														<li> <a href="{U_REGISTER}">Register</a></li>
												</ul>
								</div></td>
						</tr>
						<tr>
								<td align="center" valign="top" style="padding-top:5px;"><p align="right"><span class="mainmenu"><a href="{U_PRIVATEMSGS}" class="mainmenu"><img alt="{PRIVATE_MESSAGE_INFO}" src="templates/ndesign/images/icon_mini_message.gif" hspace="3" align="ABSMIDDLE" border="0" />{PRIVATE_MESSAGE_INFO}</a>&nbsp; 
										&nbsp;<a href="{U_LOGIN_LOGOUT}" class="mainmenu"><img alt="{L_LOGIN_LOGOUT}" src="templates/ndesign/images/icon_mini_login.gif" hspace="3" align="ABSMIDDLE" border="0" />{L_LOGIN_LOGOUT}</a>&nbsp;</span></p></td>
						</tr>
				</table></td>
      		</tr>
    </table>
index_body.tpl - Replace everything with this code:

Code: Select all

<table width="980" border="0" align="center" cellpadding="0" cellspacing="0">
  <tr> 
    <td background="templates/ndesign/images/bgforum.jpg"> <table width="100%" border="0" align="center" cellpadding="0" cellspacing="0">
    		<tr> 
    				<td><table width="100%" cellspacing="0" cellpadding="2" border="0" align="center">
    						<tr> 
    								<td align="left" valign="bottom"><span class="gensmall">
    										<!-- BEGIN switch_user_logged_in -->
    										{LAST_VISIT_DATE}<br />
    										<!-- END switch_user_logged_in -->
    										{CURRENT_TIME}<br /></span><span class="nav"><a href="{U_INDEX}" class="nav">{L_INDEX}</a></span></td>
			<td align="right" valign="bottom" class="gensmall">
					<!-- BEGIN switch_user_logged_in -->
					<a href="{U_SEARCH_NEW}" class="gensmall">{L_SEARCH_NEW}</a><br /><a href="{U_SEARCH_SELF}" class="gensmall">{L_SEARCH_SELF}</a><br />
					<!-- END switch_user_logged_in -->
					<a href="{U_SEARCH_UNANSWERED}" class="gensmall">{L_SEARCH_UNANSWERED}</a></td>
  		</tr>
		</table>
		
<table width="100%" cellpadding="2" cellspacing="1" border="0" class="forumline">
		<tr> 
				<th colspan="2" class="thCornerL" height="25" nowrap="nowrap">&nbsp;{L_FORUM}&nbsp;</th>
			<th width="50" class="thTop" nowrap="nowrap">&nbsp;{L_TOPICS}&nbsp;</th>
			<th width="50" class="thTop" nowrap="nowrap">&nbsp;{L_POSTS}&nbsp;</th>
			<th class="thCornerR" nowrap="nowrap">&nbsp;{L_LASTPOST}&nbsp;</th>
  		</tr>
		<!-- BEGIN catrow -->
		<tr> 
				<td class="catLeft" colspan="2" height="28"><span class="cattitle"><a href="{catrow.U_VIEWCAT}" class="cattitle">{catrow.CAT_DESC}</a></span></td>
			<td class="rowpic" colspan="3" align="right">&nbsp;</td>
  		</tr>
		<!-- BEGIN forumrow -->
		<tr> 
				<td class="row1" align="center" valign="middle" height="50"><img src="{catrow.forumrow.FORUM_FOLDER_IMG}" alt="{catrow.forumrow.L_FORUM_FOLDER_ALT}" title="{catrow.forumrow.L_FORUM_FOLDER_ALT}" /></td>
			<td class="row1" width="100%" height="50"><span class="forumlink"> <a href="{catrow.forumrow.U_VIEWFORUM}" class="forumlink">{catrow.forumrow.FORUM_NAME}</a><br />
					</span> <span class="genmed">{catrow.forumrow.FORUM_DESC}<br />
							</span><span class="gensmall">{catrow.forumrow.L_MODERATOR} {catrow.forumrow.MODERATORS}</span></td>
			<td class="row2" align="center" valign="middle" height="50"><span class="gensmall">{catrow.forumrow.TOPICS}</span></td>
			<td class="row2" align="center" valign="middle" height="50"><span class="gensmall">{catrow.forumrow.POSTS}</span></td>
			<td class="row2" align="center" valign="middle" height="50" nowrap="nowrap"> <span class="gensmall">{catrow.forumrow.LAST_POST}</span></td>
  		</tr>
		<!-- END forumrow -->
		<!-- END catrow -->
		</table>
		
<table width="100%" cellspacing="0" border="0" align="center" cellpadding="2">
		<tr> 
				<td align="left"><span class="gensmall"><a href="{U_MARK_READ}" class="gensmall">{L_MARK_FORUMS_READ}</a></span></td>
			<td align="right"><span class="gensmall">{S_TIMEZONE}</span></td>
  		</tr>
		</table>
		
<table width="100%" cellpadding="3" cellspacing="1" border="0" class="forumline">
		<tr> 
				<td class="catHead" colspan="2" height="28"><span class="cattitle"><a href="{U_VIEWONLINE}" class="cattitle">{L_WHO_IS_ONLINE}</a></span></td>
  		</tr>
		<tr> 
				<td class="row1" align="center" valign="middle" rowspan="2"><img src="templates/ndesign/images/whosonline.gif" alt="{L_WHO_IS_ONLINE}" /></td>
			<td class="row1" align="left" width="100%"><span class="gensmall">{TOTAL_POSTS}<br />{TOTAL_USERS}<br />{NEWEST_USER}</span>					</td>
  		</tr>
		<tr> 
				<td class="row1" align="left"><span class="gensmall">{TOTAL_USERS_ONLINE} &nbsp; [ {L_WHOSONLINE_ADMIN} ] &nbsp; [ {L_WHOSONLINE_MOD} ]<br />{RECORD_USERS}<br />{LOGGED_IN_USER_LIST}</span></td>
  		</tr>
		</table>
		
<table width="100%" cellpadding="1" cellspacing="1" border="0">
		<tr>
				<td align="left" valign="top"><span class="gensmall">{L_ONLINE_EXPLAIN}</span></td>
		</tr>
		</table>
		
		<!-- BEGIN switch_user_logged_out -->
		<form method="post" action="{S_LOGIN_ACTION}">
			<table width="100%" cellpadding="3" cellspacing="1" border="0" class="forumline">
				<tr> 
					<td class="catHead" height="28"><a name="login"></a><span class="cattitle">{L_LOGIN_LOGOUT}</span></td>
				</tr>
				<tr> 
					<td class="row1" align="center" valign="middle" height="28"><span class="gensmall">{L_USERNAME}: 
						<input class="post" type="text" name="username" size="10" />
						&nbsp;&nbsp;&nbsp;{L_PASSWORD}: 
						<input class="post" type="password" name="password" size="10" maxlength="32" />
						&nbsp;&nbsp; &nbsp;&nbsp;{L_AUTO_LOGIN} 
						<input class="text" class="noborder" type="checkbox" name="autologin" />
						&nbsp;&nbsp;&nbsp; 
						<input type="submit" class="mainoption" name="login" value="{L_LOGIN}" />
						</span>
					</td>
				</tr>
			</table>
		</form>
		<!-- END switch_user_logged_out -->
    						
		<br clear="all" />
    						
		<table class="foldersline" cellspacing="3" border="0" align="center" cellpadding="0">
			<tr> 
				<td width="20" align="center"><img src="templates/ndesign/images/folder_new_big.gif" alt="{L_NEW_POSTS}"/></td>
				<td><span class="gensmall">{L_NEW_POSTS}</span></td>
				<td>&nbsp;&nbsp;</td>
				<td width="20" align="center"><img src="templates/ndesign/images/folder_big.gif" alt="{L_NO_NEW_POSTS}" /></td>
				<td><span class="gensmall">{L_NO_NEW_POSTS}</span></td>
				<td>&nbsp;&nbsp;</td>
				<td width="20" align="center"><img src="templates/ndesign/images/folder_locked_big.gif" alt="{L_FORUM_LOCKED}" /></td>
				<td><span class="gensmall">{L_FORUM_LOCKED}</span></td>
  			</tr>
		</table>		
	</td>
</tr>
</table>

</td>
</tr>
</table>
overall_footer.tpl - Replace everything with this code:

Code: Select all

<table width="980" border="0" align="center" cellpadding="0" cellspacing="0">
	<tr> 
		<td background="ndesign/bgforum.jpg"><table width="100%" border="0" align="center" cellpadding="0" cellspacing="0">
    <tr> 
    	<td>
		<div align="center" style="padding-bottom: 10px;" class="copyright">{ADMIN_LINK}<br />
		<!--
	We request you retain the full copyright notice below including the link to www.phpbb.com.
	This not only gives respect to the large amount of time given freely by the developers
	but also helps build interest, traffic and use of phpBB 2.0. If you cannot (for good
	reason) retain the full copyright we request you at least leave in place the 
	Powered by phpBB {PHPBB_VERSION} line, with phpBB linked to www.phpbb.com. If you refuse
	to include even this then support on our forums may be affected. 
	The phpBB Group : 2002
// -->
		Template by <a href="http://www.ndesign-studio.com">N.Design Studio</a> | Powered by <a href="http://www.phpbb.com/" target="_phpbb">phpBB</a> &copy; 2001, 2002 phpBB Group<br />
		{TRANSLATION_INFO}</div><!-- BEGIN switch_abq_footer -->
		<div align="center"><span class="copyright"><br>
		{ABQ_FOOTER}
		</span></div>
		<!-- END switch_abq_footer -->    						
		</td>
    </tr>
</table>
</td>
</tr>
</table>

</tr>
</td>
</table>
</body>
</html>
See how that goes and let me know how you get on.

Re: Modifying Div Layout to Incoporate Forum

Posted: Tue Aug 12, 2008 2:52 pm
by cariel
Now the graphics aren't in line and the flash-jpgs cause my browser to crash =(

When I use IE, it shows the error as Line 409, Char 5, tempobj.filters is null or not an object, Code 0


OK I fixed that and added

Code: Select all

</td><td>
so the images will be in line.

Re: SOLVED Modifying Div Layout to Incoporate Forum

Posted: Tue Aug 12, 2008 5:50 pm
by Greenweaver
Style reset and resolved.