how do you centre the whole forum at 740px

For support and discussion related to templates, themes, and imagesets in phpBB 3.0.
Anti-Spam Guide
spunx
Registered User
Posts: 15
Joined: Wed May 31, 2006 6:45 am

how do you centre the whole forum at 740px

Post by 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 :lol:

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

Tahnks in advance
User avatar
prototech
Former Team Member
Posts: 5406
Joined: Mon Mar 19, 2007 2:04 pm
Location: Southern California

Re: how do you centre the whole forum at 740px

Post by 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');
}
Need help with MOD/style installations or other phpBB problems? Contact me for a quote.
spunx
Registered User
Posts: 15
Joined: Wed May 31, 2006 6:45 am

Re: how do you centre the whole forum at 740px

Post by spunx »

Thanks very much for that Prototech...I'll give it a go and see what happens..
spunx
Registered User
Posts: 15
Joined: Wed May 31, 2006 6:45 am

Re: how do you centre the whole forum at 740px

Post by 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
Registered User
Posts: 15
Joined: Wed May 31, 2006 6:45 am

Re: how do you centre the whole forum at 740px

Post by 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
Registered User
Posts: 355
Joined: Thu Aug 02, 2007 5:25 am
Location: 127.0.0.1

Re: how do you centre the whole forum at 740px

Post by 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
GET YOUR OWN CUSTOM STYLE PM ME

Recent works:
http://www.phpbb.com/community/viewtopi ... 4&t=633545
efficacious
Registered User
Posts: 355
Joined: Thu Aug 02, 2007 5:25 am
Location: 127.0.0.1

Re: how do you centre the whole forum at 740px

Post by 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 :)
GET YOUR OWN CUSTOM STYLE PM ME

Recent works:
http://www.phpbb.com/community/viewtopi ... 4&t=633545
spunx
Registered User
Posts: 15
Joined: Wed May 31, 2006 6:45 am

Re: how do you centre the whole forum at 740px

Post by 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! :lol:
Gleedo
Registered User
Posts: 50
Joined: Sun Dec 30, 2007 12:29 pm

Re: how do you centre the whole forum at 740px

Post by Gleedo »

prototech wrote: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?? :shock:
jasonf1
Registered User
Posts: 46
Joined: Mon Aug 20, 2007 11:10 pm

Re: how do you centre the whole forum at 740px

Post by jasonf1 »

Gleedo
Registered User
Posts: 50
Joined: Sun Dec 30, 2007 12:29 pm

Re: how do you centre the whole forum at 740px

Post by Gleedo »

Sweet!! Thanks for that 8-)
efficacious
Registered User
Posts: 355
Joined: Thu Aug 02, 2007 5:25 am
Location: 127.0.0.1

Re: how do you centre the whole forum at 740px

Post by efficacious »

spunx wrote: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
spunx wrote: 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..
GET YOUR OWN CUSTOM STYLE PM ME

Recent works:
http://www.phpbb.com/community/viewtopi ... 4&t=633545
spunx
Registered User
Posts: 15
Joined: Wed May 31, 2006 6:45 am

Re: how do you centre the whole forum at 740px

Post by spunx »

Ta for that I'll try tomorrow morning..

I've made the image bigger again to show you the cracrash of elements :lol:
efficacious
Registered User
Posts: 355
Joined: Thu Aug 02, 2007 5:25 am
Location: 127.0.0.1

Re: how do you centre the whole forum at 740px

Post by 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
GET YOUR OWN CUSTOM STYLE PM ME

Recent works:
http://www.phpbb.com/community/viewtopi ... 4&t=633545
spunx
Registered User
Posts: 15
Joined: Wed May 31, 2006 6:45 am

Re: how do you centre the whole forum at 740px

Post by 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
Last edited by Thatbitextra on Wed Jan 02, 2008 6:27 am, edited 1 time in total.
Reason: Code goes in [code] BBCode.
Locked

Return to “[3.0.x] Styles Support & Discussion”