Archief - Q: phpbb customizing

Bram · 7 feb 2006

Hawdie hey, kzen begonne om eens te proberen een phpbb forumke te skinnen, kwas mij aant vervelen en tis eens iets anders, tot nu toe zittek hier:

http://www.bramme.vekien.co.uk/forum/

Nu hemmek al gevonde dak voor de header te verandere "overall_header.tpl" moe verandere, dus da gingek nu aan beginne (photoshop headerke mee een ander soortement navigatie).
Tot nu toe hadded de css altijd aangepast via da online formulier da op het administration paneel zit (iets gemakkelijker voor trial and error, dan steeds opnieuw doc te moeten uploaden), maar nu haddek da css document gedownload om nog wa andere dingen te gaan instellen, alleen vinnek daar gelijk m'n kleurkes nergens in terug... zitten die ergens anders opgeslagen toch???

[ImpacT] · 7 feb 2006

Hmm raar dat je dit niet vindt, maar wel overall_header.

Anywayzz, de CSS vind je ook in deze map

\templates\joutemplate\joutemplate.css

Bram · 7 feb 2006

[ImpacT] zei:
Hmm raar dat je dit niet vindt, maar wel overall_header.

Anywayzz, de CSS vind je ook in deze map

\templates\joutemplate\joutemplate.css

jaja, da haddek wel gevonde. sorry, khadet vergete te vermelden: khad dus de CSS gedownload ma alsek die bekeek dan stonden m'n zelf aangepaste kleurkes daar gelijk nie in. Da waren precies nog alle standaard kleurkes van subSilver...
Of hemmek gewoon verkeerd gekeken? kzal mss eerst beter nog k checken...

edit: nope, khemmet opnief gecheckt: http://www.bramme.vekien.co.uk/forum/templates/bramme/bramme.css

Daar staan de standaard kleure van subSilver enkel in... Wa zou der nu gebeure moestek dees edite en opnief uploaden???

Edit2: ok, khem nu gevonde da de kleuren in den online editor staan in het bestand theme_info.cfg... daar sta wel degelijk een verwijzing naar bramme.css, toch probere editen???

[ImpacT] · 7 feb 2006

Gho,

Ik heb in mijn forum gewoon in de basis CSS gewoon nieuwe dingen bijgemaakt en veel zitten te veranderen. Je niveau van CSS moet soms wel wat hoog zijn om alles te vinden, maar na veel zoeken lukt het wel.

http://forum.findagameserver.com

Je moet dit maar eens bekijken, dit is ook een phpBB forum, maar 'k heb het helemaal in de vorm van m'n website gegoten.

Je kan ongeloofelijk veel prullen in de bestanden, zodat de layout zo uitkomt zoals jij het wil, t'is gewoon even wennen aan heel de structuur.

Bram · 7 feb 2006

dees is momenteel de code van m'n header:

Code:

<!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">
{META}
{NAV_LINKS}
<title>{SITENAME} :: {PAGE_TITLE}</title>
<!-- link rel="stylesheet" href="templates/bramme/{T_HEAD_STYLESHEET}" type="text/css" -->
<style type="text/css">
<!--
/*
  NOTE: These CSS definitions are stored within the main page body so that you can use the phpBB2
  theme administration centre. When you have finalised your style you could cut the final CSS code
  and place it in an external file, deleting this section to save bandwidth.
*/
img {border: 0px;}
/* General page style. The scroll bar colours only visible in IE5.5+ */
body { 
	background-color: {T_BODY_BGCOLOR};
	scrollbar-face-color: {T_TR_COLOR2};
	scrollbar-highlight-color: {T_TD_COLOR2};
	scrollbar-shadow-color: {T_TR_COLOR2};
	scrollbar-3dlight-color: {T_TR_COLOR3};
	scrollbar-arrow-color:  {T_BODY_LINK};
	scrollbar-track-color: {T_TR_COLOR1};
	scrollbar-darkshadow-color: {T_TH_COLOR1};
}

/* General font families for common tags */
font,th,td,p { font-family: {T_FONTFACE1} }
a:link,a:active,a:visited { color : {T_BODY_LINK}; }
a:hover		{ text-decoration: underline; color : {T_BODY_HLINK}; }
hr	{ height: 0px; border: solid {T_TR_COLOR3} 0px; border-top-width: 1px;}

/* This is the border line & background colour round the entire page */
.bodyline	{ background-color: {T_TD_COLOR2}; border: 1px {T_TH_COLOR1} solid; }

/* This is the outline round the main forum tables */
.forumline	{ background-color: {T_TD_COLOR2}; border: 2px {T_TH_COLOR2} solid; }

/* Main table cell colours and backgrounds */
td.row1	{ background-color: {T_TR_COLOR1}; }
td.row2	{ background-color: {T_TR_COLOR2}; }
td.row3	{ background-color: {T_TR_COLOR3}; }

/*
  This is for the table cell above the Topics, Post & Last posts on the index.php page
  By default this is the fading out gradiated silver background.
  However, you could replace this with a bitmap specific for each forum
*/
td.rowpic {
		background-color: {T_TD_COLOR2};
		background-image: url(templates/bramme/images/{T_TH_CLASS3});
		background-repeat: repeat-y;
}

/* Header cells - the blue and silver gradient backgrounds */
th	{
	color: {T_FONTCOLOR3}; font-size: {T_FONTSIZE2}px; font-weight : bold; 
	background-color: {T_BODY_LINK}; height: 25px;
	background-image: url(templates/bramme/images/{T_TH_CLASS2});
}

td.cat,td.catHead,td.catSides,td.catLeft,td.catRight,td.catBottom {
			background-image: url(templates/bramme/images/{T_TH_CLASS1});
			background-color:{T_TR_COLOR3}; border: {T_TH_COLOR3}; border-style: solid; height: 28px;
}

/*
  Setting additional nice inner borders for the main table cells.
  The names indicate which sides the border will be on.
  Don't worry if you don't understand this, just ignore it :-)
*/
td.cat,td.catHead,td.catBottom {
	height: 29px;
	border-width: 0px 0px 0px 0px;
}
th.thHead,th.thSides,th.thTop,th.thLeft,th.thRight,th.thBottom,th.thCornerL,th.thCornerR {
	font-weight: bold; border: {T_TD_COLOR2}; border-style: solid; height: 28px;
}
td.row3Right,td.spaceRow {
	background-color: {T_TR_COLOR3}; border: {T_TH_COLOR3}; border-style: solid;
}

th.thHead,td.catHead { font-size: {T_FONTSIZE3}px; border-width: 1px 1px 0px 1px; }
th.thSides,td.catSides,td.spaceRow	 { border-width: 0px 1px 0px 1px; }
th.thRight,td.catRight,td.row3Right	 { border-width: 0px 1px 0px 0px; }
th.thLeft,td.catLeft	  { border-width: 0px 0px 0px 1px; }
th.thBottom,td.catBottom  { border-width: 0px 1px 1px 1px; }
th.thTop	 { border-width: 1px 0px 0px 0px; }
th.thCornerL { border-width: 1px 0px 0px 1px; }
th.thCornerR { border-width: 1px 1px 0px 0px; }

/* The largest text used in the index page title and toptic title etc. */
.maintitle	{
	font-weight: bold; font-size: 22px; font-family: "{T_FONTFACE2}",{T_FONTFACE1};
	text-decoration: none; line-height : 120%; color : {T_BODY_TEXT};
}

/* General text */
.gen { font-size : {T_FONTSIZE3}px; }
.genmed { font-size : {T_FONTSIZE2}px; }
.gensmall { font-size : {T_FONTSIZE1}px; }
.gen,.genmed,.gensmall { color : {T_BODY_TEXT}; }
a.gen,a.genmed,a.gensmall { color: {T_BODY_LINK}; text-decoration: none; }
a.gen:hover,a.genmed:hover,a.gensmall:hover	{ color: {T_BODY_HLINK}; text-decoration: underline; }

/* The register, login, search etc links at the top of the page */
.mainmenu		{ font-size : {T_FONTSIZE2}px; color : {T_BODY_TEXT} }
a.mainmenu		{ text-decoration: none; color : {T_BODY_LINK};  }
a.mainmenu:hover{ text-decoration: underline; color : {T_BODY_HLINK}; }

/* Forum category titles */
.cattitle		{ font-weight: bold; font-size: {T_FONTSIZE3}px ; letter-spacing: 1px; color : {T_BODY_LINK}}
a.cattitle		{ text-decoration: none; color : {T_BODY_LINK}; }
a.cattitle:hover{ text-decoration: underline; }

/* Forum title: Text and link to the forums used in: index.php */
.forumlink		{ font-weight: bold; font-size: {T_FONTSIZE3}px; color : {T_BODY_LINK}; }
a.forumlink 	{ text-decoration: none; color : {T_BODY_LINK}; }
a.forumlink:hover{ text-decoration: underline; color : {T_BODY_HLINK}; }

/* Used for the navigation text, (Page 1,2,3 etc) and the navigation bar when in a forum */
.nav			{ font-weight: bold; font-size: {T_FONTSIZE2}px; color : {T_BODY_TEXT};}
a.nav			{ text-decoration: none; color : {T_BODY_LINK}; }
a.nav:hover		{ text-decoration: underline; }

/* titles for the topics: could specify viewed link colour too */
.topictitle,h1,h2	{ font-weight: bold; font-size: {T_FONTSIZE2}px; color : {T_BODY_TEXT}; }
a.topictitle:link   { text-decoration: none; color : {T_BODY_LINK}; }
a.topictitle:visited { text-decoration: none; color : {T_BODY_VLINK}; }
a.topictitle:hover	{ text-decoration: underline; color : {T_BODY_HLINK}; }

/* Name of poster in viewmsg.php and viewtopic.php and other places */
.name			{ font-size : {T_FONTSIZE2}px; color : {T_BODY_TEXT};}

/* Location, number of posts, post date etc */
.postdetails		{ font-size : {T_FONTSIZE1}px; color : {T_BODY_TEXT}; }

/* The content of the posts (body of text) */
.postbody { font-size : {T_FONTSIZE3}px; line-height: 18px}
a.postlink:link	{ text-decoration: none; color : {T_BODY_LINK} }
a.postlink:visited { text-decoration: none; color : {T_BODY_VLINK}; }
a.postlink:hover { text-decoration: underline; color : {T_BODY_HLINK}}

/* Quote & Code blocks */
.code { 
	font-family: {T_FONTFACE3}; font-size: {T_FONTSIZE2}px; color: {T_FONTCOLOR2};
	background-color: {T_TD_COLOR1}; border: {T_TR_COLOR3}; border-style: solid;
	border-left-width: 1px; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px
}

.quote {
	font-family: {T_FONTFACE1}; font-size: {T_FONTSIZE2}px; color: {T_FONTCOLOR1}; line-height: 125%;
	background-color: {T_TD_COLOR1}; border: {T_TR_COLOR3}; border-style: solid;
	border-left-width: 1px; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px
}

/* Copyright and bottom info */
.copyright		{ font-size: {T_FONTSIZE1}px; font-family: {T_FONTFACE1}; color: {T_FONTCOLOR1}; letter-spacing: -1px;}
a.copyright		{ color: {T_FONTCOLOR1}; text-decoration: none;}
a.copyright:hover { color: {T_BODY_TEXT}; text-decoration: underline;}

/* Form elements */
input,textarea, select {
	color : {T_BODY_TEXT};
	font: normal {T_FONTSIZE2}px {T_FONTFACE1};
	border-color : {T_BODY_TEXT};
}

/* The text input fields background colour */
input.post, textarea.post, select {
	background-color : {T_TD_COLOR2};
}

input { text-indent : 2px; }

/* The buttons used for bbCode styling in message post */
input.button {
	background-color : {T_TR_COLOR1};
	color : {T_BODY_TEXT};
	font-size: {T_FONTSIZE2}px; font-family: {T_FONTFACE1};
}

/* The main submit button option */
input.mainoption {
	background-color : {T_TD_COLOR1};
	font-weight : bold;
}

/* None-bold submit button */
input.liteoption {
	background-color : {T_TD_COLOR1};
	font-weight : normal;
}

/* This is the line in the posting page which shows the rollover
  help line. This is actually a text box, but if set to be the same
  colour as the background no one will know ;)
*/
.helpline { background-color: {T_TR_COLOR2}; border-style: none; }

/* Import the fancy styles for IE only (NS4.x doesn't use the @import function) */
@import url("templates/bramme/formIE.css"); 
-->
</style>
<!-- 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 bgcolor="{T_BODY_BGCOLOR}" text="{T_BODY_TEXT}" link="{T_BODY_LINK}" vlink="{T_BODY_VLINK}">

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

<table width="100%" cellspacing="0" cellpadding="10" border="0" align="center"> 
	<tr> 
		<td class="bodyline"><table width="750" height="200" border="0" cellpadding="0" cellspacing="0">
	<tr>
		<td colspan="17">
			<img src="images/header_01.gif" width="750" height="181" alt=""></td>
	</tr>
	<tr>
		<td rowspan="2">
			<img src="images/header_02.gif" width="130" height="19" alt=""></td>
		<td>
			<a href="{U_REGISTER}" alt="{L_REGISTER}"><img src="images/register.gif" width="49" height="18" alt=""></a></td>
		<td rowspan="2">
			<img src="images/header_04.gif" width="27" height="19" alt=""></td>
		<td>
			<a href="{U_FAQ}" alt="{L_FAQ}"><img src="images/faq.gif" width="33" height="18" alt=""></a></td>
		<td rowspan="2">
			<img src="images/header_06.gif" width="19" height="19" alt=""></td>
		<td>
			<a href="{U_SEARCH}" alt="{L_SEARCH}"><img src="images/search.gif" width="43" height="18" alt=""></a></td>
		<td rowspan="2">
			<img src="images/header_08.gif" width="19" height="19" alt=""></td>
		<td>
			<a href="{U_MEMBERLIST}" alt="{L_MEMBERLIST}"><img src="images/members.gif" width="55" height="18" alt=""></a></td>
		<td rowspan="2">
			<img src="images/header_10.gif" width="20" height="19" alt=""></td>
		<td>
			<a href="{U_USERGROUPS}" alt="{L_USERGROUPS}"><img src="images/usergroups.gif" width="65" height="18" alt=""></a></td>
		<td rowspan="2">
			<img src="images/header_12.gif" width="20" height="19" alt=""></td>
		<td>
			<a href="{U_PRIVATEMSGS}" alt="{L_PRIVATE_MESSAGE_INFO}"><img src="images/header_13.gif" width="19" height="18" alt=""></a></td>
		<td rowspan="2">
			<img src="images/header_14.gif" width="23" height="19" alt=""></td>
		<td>
			<a href="{U_PROFILE}" alt="{L_PROFILE}"><img src="images/profile.gif" width="39" height="18" alt=""></a></td>
		<td rowspan="2">
			<img src="images/header_16.gif" width="16" height="19" alt=""></td>
		<td>
			<a href="{U_LOGIN_LOGOUT}" alt="{L_LOGIN_LOGOUT}"><img src="images/logout.gif" width="42" height="18" alt=""></a></td>
		<td rowspan="2">
			<img src="images/header_18.gif" width="131" height="19" alt=""></td>
	</tr>
	<tr>
		<td>
			<img src="images/header_19.gif" width="49" height="1" alt=""></td>
		<td>
			<img src="images/header_20.gif" width="33" height="1" alt=""></td>
		<td>
			<img src="images/header_21.gif" width="43" height="1" alt=""></td>
		<td>
			<img src="images/header_22.gif" width="55" height="1" alt=""></td>
		<td>
			<img src="images/header_23.gif" width="65" height="1" alt=""></td>
		<td>
			<img src="images/header_24.gif" width="19" height="1" alt=""></td>
		<td>
			<img src="images/header_25.gif" width="39" height="1" alt=""></td>
		<td>
			<img src="images/header_26.gif" width="42" height="1" alt=""></td>
	</tr>
</table></td>
			</tr>
		</table>

		<br />

We hemmek gedaan: de standaard tabel mee de links van phpbb vervangen door een table van imageready mee daarin m'n links.

De images in de juiste folder geupload, ma nu toont em bepaalde images nie ==> wtf???

Ander probleem: nie langer gecentreerd + algemene structuur om zeep...

[ImpacT] · 7 feb 2006

We hemmek gedaan: de standaard tabel mee de links van phpbb vervangen door een table van imageready mee daarin m'n links.

We zijn hier geen debug sectie, maar "imageready" sorry, maar dat heeft geen nut, 'k zou dan eerst fatsoenlijk HTML & CSS gaan leren eer je gaat prullen met de code enzow.

Als je images niet te zien zijn, ga even na wat hun source is en dan weet je ook direct waar je die image mist en waar je hem moet uploaden.

Bram · 8 feb 2006

[ImpacT] zei:
We zijn hier geen debug sectie, maar "imageready" sorry, maar dat heeft geen nut, 'k zou dan eerst fatsoenlijk HTML & CSS gaan leren eer je gaat prullen met de code enzow.

Als je images niet te zien zijn, ga even na wat hun source is en dan weet je ook direct waar je die image mist en waar je hem moet uploaden.

waarom zouk m'n tabel in godsnaam moete gaan herschrijve??? dedie die van imageready komt doet toch perfect zijn ding??? Maar soit ja, als het te lastig is om eens ff te helpen debuggen, ook al is het maar html, dan laat ik het wel zo...

[ImpacT] · 8 feb 2006

SveltestSword zei:
waarom zouk m'n tabel in godsnaam moete gaan herschrijve??? dedie die van imageready komt doet toch perfect zijn ding??? Maar soit ja, als het te lastig is om eens ff te helpen debuggen, ook al is het maar html, dan laat ik het wel zo...

Kalm aan eh... als ge niet naar goeie raad wilt luisteren is't uw probleem. Heel uw code ff gaan debuggen, sorry ... again, we zijn geen debug station hier.

Bram · 8 feb 2006

[ImpacT] zei:
Kalm aan eh... als ge niet naar goeie raad wilt luisteren is't uw probleem. Heel uw code ff gaan debuggen, sorry ... again, we zijn geen debug station hier.

mijn excuses, twas nie m'n bedoeling om aggressief ofzo over te komen... Kvon het alleen spijtig da het zowas van "ugh nee merci da is nu ff te lastig" omdak het wel al heb zien gebeure da mensen hele blokken php zetten en die dan wel ontbugged worden...

Anyhow, tis me zelf gelukt, de links marcheren zelfs

(ergens een </table> teveel gezet)

nu alleen nog vinden om de fixed width van de forums zelf wa te verkleinen... alhoewel, da ziennek nog wel...

Zou der een mogelijkheid zijn om de forums zelf op 100% te laten staan, ma dan bv de width van de faq? en al de rest iets lager te zetten? want nie ziet het er af en toe nogal maf uit...

Nu alleen nog de knoppen vervangen...

Archief - Q: phpbb customizing

Bram

Legacy Member

[ImpacT]

Legacy Member

Bram

Legacy Member

[ImpacT]

Legacy Member

Bram

Legacy Member

[ImpacT]

Legacy Member

Bram

Legacy Member

[ImpacT]

Legacy Member

Bram

Legacy Member