how do you centre the whole forum at 740px

[spunx]

A simple question...I hope

I and my forum members hate the default styles...I'm using Sniper Blue now but want to start customising it...

The first thing I want to do is frame the forum in a grey key line box at 740 px wide centred and with a black background.

Can anyone point me in the direction of how to do it before my board members mutiny

http://www.punk77.co.uk/talkpunk/index.php

Tahnks in advance

[prototech]

Open overall_header.html.
Find:

Code: Select all

<div id="wrapheader">

Before, add:

Code: Select all

<div id="wrap">

Open overall_footer.html.
Find:

Code: Select all

</body>

Before, add:

Code: Select all

</div>

Open stylesheet.css.
Find:

Code: Select all

body {
	/* Text-Sizing with ems: http://www.clagnut.com/blog/348/ */
	font-family: "Lucida Grande", Verdana, Helvetica, Arial, sans-serif;
	color: #323D4F;
	background-color: #DCE1E5;
	background-attachment: fixed;
	background-image: url('images/bg.gif');
	font-size: 62.5%; /* This sets the default font size to be equivalent to 10px */
	margin: 0
}

Replace with:

Code: Select all

body {
	/* Text-Sizing with ems: http://www.clagnut.com/blog/348/ */
	font-family: "Lucida Grande", Verdana, Helvetica, Arial, sans-serif;
	color: #323D4F;
	background-color: #000000;
	font-size: 62.5%; /* This sets the default font size to be equivalent to 10px */
	margin: 0;
}


#wrap {
  width: 740px;
  margin: 0 auto;
  border: 1px solid #636363;
  background-attachment: fixed;
	background-image: url('./images/bg.gif');
}

[spunx]

Thanks very much for that Prototech...I'll give it a go and see what happens..

[spunx]

Its sort of done it

http://www.punk77.co.uk/talkpunk/index.php

The Forum has shrunk slightly but theres no key line and the the header is still stretchy...I'll have a play !

[spunx]

I've seen a few people post similar questions about reducing the width and its really strange that it seems to be impossible to do ie everything except the header will reduce or it doesn't reduced to 740 and so on.

[efficacious]

you might try changing the width setting on the header inside overall_header.html

i noticed that it says 740 you should probably add "px" to that.

thats the only thing i can see that might be wrong

[efficacious]

also get rid of the 0 in the margin: css

should be

Code: Select all

#wrap {
  width: 740px;
  margin:auto;
  border: 1px solid #636363;
  background-attachment: fixed;
  background-image: url('./images/bg.gif');
}

this is the section with the 740 :

Code: Select all

<div id="logodesc">
		<div align="center">
		<table width="740" cellspacing="0">

		<tr>
			<td width="98%" align="center"><a href="http://www.punk77.co.uk/talkpunk/"><img src="http://www.punk77.co.uk/talkpunk/styles/Sniper_Blue/imageset/site_logo.png" width="740" height="90" alt="TalkPunk" />
		</tr>
		</table>
		</div>
	</div>

this part has the 740:

Code: Select all

<div id="logodesc">
		<div align="center">
		<table width=/***"740" ***/cellspacing="0">

this part is missing an ending <td> tag :

Code: Select all

<td width="98%" align="center"><a href="http://www.punk77.co.uk/talkpunk/"><img src="http://www.punk77.co.uk/talkpunk/styles/Sniper_Blue/imageset/site_logo.png" width="740" height="90" alt="TalkPunk" />/*****THERE SHOULD BE AN ENDING </td> here

there are also lots of other tables that have just 740 and not 740px

hope that helps

[spunx]

OK well we're getting there so muchos thanks to you efficacious....I so wanted to get this done I got up at 5.30 am this morning after a couple of hours sleep and its a mighty step forward.

But I've still got a couple of problems again with the header that may be someone can help with. The log in log out stuff etc in blue hyperlinks, currently in the red header, gets pushed out and sits obscured underneath the black breadcrumb bar. To temporarily solve this I've had to squish the image in the header. Any ideas how to solve this?

Secondly the repetition of the black bars of Forum Topics Posts Last post is really annoying and not good usability.

How do I just get one bar at the top and thats it. Then I can have the name of the Topics in a black bar and clearly visible.

Oh and a Happy New Year to everyone....hope its a good one for you!

[Gleedo]

Open overall_header.html.
Find:

Code: Select all

<div id="wrapheader">

I need to so the same but a slightly wider fixed width. I have started off by copying the default ProSilver skin into its own folder and renamed the name in all 4 .cfg files to be the new name (same as folder i copied into) and uploaded etc.

The strange thing is, i do not have that code above in my overall_header.html file??

[jasonf1]

Try this tutorial....

http://www.easytutorials.org/prosilver_fixed_width.html

[Gleedo]

Try this tutorial....

http://www.easytutorials.org/prosilver_fixed_width.html

Sweet!! Thanks for that

[efficacious]

OK well we're getting there so muchos thanks to you efficacious....I so wanted to get this done I got up at 5.30 am this morning after a couple of hours sleep and its a mighty step forward.

But I've still got a couple of problems again with the header that may be someone can help with. The log in log out stuff etc in blue hyperlinks, currently in the red header, gets pushed out and sits obscured underneath the black breadcrumb bar. To temporarily solve this I've had to squish the image in the header. Any ideas how to solve this?

take your fix off so i can see the problem plz

Secondly the repetition of the black bars of Forum Topics Posts Last post is really annoying and not good usability.
How do I just get one bar at the top and thats it. Then I can have the name of the Topics in a black bar and clearly visible.

find this code:(Its in forumlist_body.html)

Code: Select all

<tr>
	<th colspan="2">&nbsp;{L_FORUM}&nbsp;</th>
	<th width="50">&nbsp;{L_TOPICS}&nbsp;</th>
	<th width="50">&nbsp;{L_POSTS}&nbsp;</th>
	<th>&nbsp;{L_LAST_POST}&nbsp;</th>
</tr>

In your style it repeats evertime.. in the default subsilver2 it doesn't repeat...so we need to get it back to that point...

grab that code from the file and CUT/PASTE - BEFORE this code (on a new line)

Code: Select all

<!-- BEGIN forumrow -->

so your ending result looks like this:

Code: Select all

<table class="tablebg" cellspacing="1" width="100%">
<tr>
	<td class="cat" colspan="5" align="{S_CONTENT_FLOW_END}"><!-- IF not S_IS_BOT and U_MARK_FORUMS --><a class="nav" href="{U_MARK_FORUMS}">{L_MARK_FORUMS_READ}</a><!-- ENDIF -->&nbsp;</td>
</tr>
<tr>
	<th colspan="2">&nbsp;{L_FORUM}&nbsp;</th>
	<th width="50">&nbsp;{L_TOPICS}&nbsp;</th>
	<th width="50">&nbsp;{L_POSTS}&nbsp;</th>
	<th>&nbsp;{L_LAST_POST}&nbsp;</th>
</tr>
<!-- BEGIN forumrow -->
	<!-- IF forumrow.S_IS_CAT -->

this may look sorta diff on your style i can't be certain cuz i don't have your files..

[spunx]

Ta for that I'll try tomorrow morning..

I've made the image bigger again to show you the cracrash of elements

[efficacious]

ok one last thing i need you to post your overall_header.html file and your index_body.html
post forumlist_body.html and stylesheet.css as well, just to be accurate

[spunx]

Ok here's the lot as it stands at the mo...

Overall header

Code: Select all

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="{S_CONTENT_DIRECTION}" lang="{S_USER_LANG}" xml:lang="{S_USER_LANG}">
<head>

<meta http-equiv="content-type" content="text/html; charset={S_CONTENT_ENCODING}" />
<meta http-equiv="content-language" content="{S_USER_LANG}" />
<meta http-equiv="content-style-type" content="text/css" />
<meta http-equiv="imagetoolbar" content="no" />
<meta name="resource-type" content="document" />
<meta name="distribution" content="global" />
<meta name="copyright" content="2002-2006 phpBB Group" />
<meta name="keywords" content="" />
<meta name="description" content="" />
{META}
<title>{SITENAME} &bull; <!-- IF S_IN_MCP -->{L_MCP} &bull; <!-- ELSEIF S_IN_UCP -->{L_UCP} &bull; <!-- ENDIF -->{PAGE_TITLE}</title>

<link rel="stylesheet" href="{T_STYLESHEET_LINK}" type="text/css" />

<script type="text/javascript">
// <![CDATA[
<!-- IF S_USER_PM_POPUP -->
	if ({S_NEW_PM})
	{
		popup('{UA_POPUP_PM}', 450, 225, '_phpbbprivmsg');
	}
<!-- ENDIF -->

function popup(url, width, height, name)
{
	if (!name)
	{
		name = '_popup';
	}

	window.open(url.replace(/&/g, '&'), name, 'height=' + height + ',resizable=yes,left=250,top=100,scrollbars=yes,width=' + width);
	return false;
}

function jumpto()
{
	var page = prompt('{LA_JUMP_PAGE}:', '{ON_PAGE}');
	var perpage = '{PER_PAGE}';
	var base_url = '{A_BASE_URL}';

	if (page !== null && !isNaN(page) && page > 0)
	{
		document.location.href = base_url.replace(/&/g, '&') + '&start=' + ((page - 1) * perpage);
	}
}

/**
* Find a member
*/
function find_username(url)
{
	popup(url, 760, 570, '_usersearch');
	return false;
}

/**
* Mark/unmark checklist
* id = ID of parent container, name = name prefix, state = state [true/false]
*/
function marklist(id, name, state)
{
	var parent = document.getElementById(id);
	if (!parent)
	{
		eval('parent = document.' + id);
	}

	if (!parent)
	{
		return;
	}

	var rb = parent.getElementsByTagName('input');
	
	for (var r = 0; r < rb.length; r++)
	{
		if (rb[r].name.substr(0, name.length) == name)
		{
			rb[r].checked = state;
		}
	}
}

<!-- IF ._file -->

	/**
	* Play quicktime file by determining it's width/height
	* from the displayed rectangle area
	*
	* Only defined if there is a file block present.
	*/
	function play_qt_file(obj)
	{
		var rectangle = obj.GetRectangle();

		if (rectangle)
		{
			rectangle = rectangle.split(',')
			var x1 = parseInt(rectangle[0]);
			var x2 = parseInt(rectangle[2]);
			var y1 = parseInt(rectangle[1]);
			var y2 = parseInt(rectangle[3]);

			var width = (x1 < 0) ? (x1 * -1) + x2 : x2 - x1;
			var height = (y1 < 0) ? (y1 * -1) + y2 : y2 - y1;
		}
		else
		{
			var width = 200;
			var height = 0;
		}

		obj.width = width;
		obj.height = height + 16;

		obj.SetControllerVisible(true);

		obj.Play();
	}
<!-- ENDIF -->

// ]]>
</script>

</head>
<body class="{S_CONTENT_DIRECTION}">

<a name="top"></a>

<div id="wrap">

<div id="wrapheader">

	<div id="logodesc">
		<div align="center">
		<table width="740px" cellspacing="0">
		<tr>
			<td width="740px" align="center"><a href="http://www.punk77.co.uk/talkpunk/"><img src="http://www.punk77.co.uk/talkpunk/styles/Sniper_Blue/imageset/site_logo.png" width="740px" height="90" alt="TalkPunk" /></td>
		</tr>
		</table>
		</div>
	</div>

	<div id="menubar">
		<div align="center">
		<table width="740px" cellspacing="0">
		<tr>
			<td class="gensmall" width="483">
				<p align="left">
				<img src="{T_THEME_PATH}/images/icon_mini_faq.gif" width="12" height="13" alt="*" /> <a class="nav" href="{U_FAQ}">{L_FAQ}</a>
				<!-- IF S_DISPLAY_SEARCH -->&nbsp;&nbsp;<img src="{T_THEME_PATH}/images/icon_mini_search.gif" width="12" height="13" alt="*" /> <a class="nav" href="{U_SEARCH}">{L_SEARCH}</a><!-- ENDIF -->
				<!-- IF not S_IS_BOT -->
					<!-- IF S_DISPLAY_MEMBERLIST -->&nbsp;&nbsp;<img src="{T_THEME_PATH}/images/icon_mini_members.gif" width="12" height="13" alt="*" /> <a class="nav" href="{U_MEMBERLIST}">{L_MEMBERLIST}</a><!-- ENDIF -->
					<!-- IF S_USER_LOGGED_IN -->&nbsp;&nbsp;<img src="{T_THEME_PATH}/images/icon_mini_profile.gif" width="12" height="13" alt="*" /> <a class="nav" href="{U_PROFILE}">{L_PROFILE}</a><!-- ENDIF -->
				<!-- ENDIF -->
			</td>
			<td class="timebar" align="{S_CONTENT_FLOW_END}">
			<p align="left">{CURRENT_TIME}</td>
		</tr>
		</table>
		</div>
	</div>

	<div id="datebar">
		<div align="center">
		<table width="740px" cellspacing="0">
		<tr>
			<td class="gensmall" width="414">				
			<p align="left">				<!-- IF not S_IS_BOT --><a href="{U_LOGIN_LOGOUT}"><img src="{T_THEME_PATH}/images/icon_mini_login.gif" width="12" height="13" alt="*" /> {L_LOGIN_LOGOUT}</a>&nbsp;<!-- ENDIF --><!-- IF U_RESTORE_PERMISSIONS -->&nbsp;<a href="{U_RESTORE_PERMISSIONS}"><img src="{T_THEME_PATH}/images/icon_mini_login.gif" width="12" height="13" alt="*" /> {L_RESTORE_PERMISSIONS}</a><!-- ENDIF -->
				<!-- IF S_BOARD_DISABLED and S_USER_LOGGED_IN --> &nbsp;<span style="color: red;">{L_BOARD_DISABLED}</span><!-- ENDIF -->
				<!-- IF not S_IS_BOT -->
					<!-- IF S_USER_LOGGED_IN -->
						<!-- IF S_DISPLAY_PM --> &nbsp;<a href="{U_PRIVATEMSGS}"><img src="{T_THEME_PATH}/images/icon_mini_message.gif" width="12" height="13" alt="*" /> {PRIVATE_MESSAGE_INFO}<!-- IF PRIVATE_MESSAGE_INFO_UNREAD -->, {PRIVATE_MESSAGE_INFO_UNREAD}<!-- ENDIF --></a><!-- ENDIF -->
					<!-- ELSE --> &nbsp;<a href="{U_REGISTER}"><img src="{T_THEME_PATH}/images/icon_mini_register.gif" width="12" height="13" alt="*" /> {L_REGISTER}</a>
					<!-- ENDIF -->
				<!-- ENDIF -->
<!-- IF S_USER_LOGGED_IN --><br />{LAST_VISIT_DATE}<!-- ENDIF --></td>
			<td class="gensmall" align="{S_CONTENT_FLOW_END}">	<!-- IF S_DISPLAY_SEARCH -->
	<p class="searchbar" align="left">
		<span style="float: {S_CONTENT_FLOW_END};"><a href="{U_SEARCH_UNANSWERED}">{L_SEARCH_UNANSWERED}</a> | <a href="{U_SEARCH_ACTIVE_TOPICS}">{L_SEARCH_ACTIVE_TOPICS}</a></span>
		<!-- IF S_USER_LOGGED_IN --><br />
		<span style="float: {S_CONTENT_FLOW_END};"><a href="{U_SEARCH_NEW}">{L_SEARCH_NEW}</a> | <a href="{U_SEARCH_SELF}">{L_SEARCH_SELF}</a></span>
		<!-- ENDIF -->
	</p>
	<!-- ENDIF -->
</td>
		</tr>
		</table>
		</div>
	</div>

</div>

<div id="wrapcentre">

	<!-- INCLUDE breadcrumbs.html -->

	<br /></div>
<p><span lang="en-gb">&nbsp;&nbsp;&nbsp; </span></p>

Stylesheet