Header verändern

Alles zu Styles, Templates, Icons und Smilies für phpBB 3.0.x, sowie allgemeine Designfragen zur Integration von phpBB in bestehende Websites.
phpBB Styles Demo
Forumsregeln
Bei Style spezifischen Fragen ist der Stylename und die Downloadquelle des Styles erforderlich, besser noch die URL vom betroffenen Forum.
Plati
Mitglied
Beiträge: 104
Registriert: 12.11.2007 16:51

Header verändern

Beitrag von Plati »

Die Suchfunktion konnte mir nicht wirklich weiterhelfen, darum hier meine Frage:

Ich möchte im Style "Black Pearl" den Header verändern.
Anstatt dem ganzen, was im Header ist, möchte ich eine Grafik einfügen.

Entweder der schwarz/graue Hintergrund im Header wird ersetzt und alles vor dem Hintergrund entfernt,
oder
der Hintergrund bleibt und die linke Grafik wird durch einen zentrierten neuen Header ersetzt und die Schrift gelöscht.

Wie mache ich das? Ich habe keine Ahnung was möglich oder besser ist, darum frage ich euch. :wink:
Plati
Mitglied
Beiträge: 104
Registriert: 12.11.2007 16:51

Beitrag von Plati »

Bitte helft mir doch. Wie kann ich den Header verändern?
Plati
Mitglied
Beiträge: 104
Registriert: 12.11.2007 16:51

Beitrag von Plati »

Warum kann mir keiner helfen?
Bei Black Pearl ist es doch im Prinzip wie bei Subsilver2, oder? Also bitte helft mir doch, es ist wirklich wichtig.
R_V_D
Mitglied
Beiträge: 43
Registriert: 10.12.2007 11:09
Kontaktdaten:

Beitrag von R_V_D »

ich hänge am gleichen Problem. Ich spiele da jetzt auch schon eine Weile dran rum, aber ich kann da einfach keine Grafiken einfügen, egal wie ichs es mache. Es wird einfach nicht angezeigt, egal ob ich es als Hintergrund oder eigenes Image einbinde.

Finden wirst du das ganze in der overall_header.html. Bei mir beim Pro Silver Style liegt die Datei unter themes. Wird bei dir wohl nicht anders sein. Welche Tags usw wofür zuständig sind ist recht leicht ersichtlich, allerdings lässt sich de Hintergrund einfach nicht in das ändern was ich will. Ich kann nur den normalen, bei mir ist der blau, in dem auch die Suche integriert ist weg machen, indem ich das headerbanner Tag raus nehme, kann aber statt dessen keine Grafik oder so einfügen. Auch wenn ich in der CSS Datei die headerbanner Klasse ändere und da die Grafik einbinde ... nichts tut sich. Zum verrückt werden, nur um so einen simplen Header zu tauschen.
Benutzeravatar
franki
Ehemaliges Teammitglied
Beiträge: 2823
Registriert: 21.10.2007 14:02
Wohnort: Sonsbeck
Kontaktdaten:

Beitrag von franki »

Worauf ist das Style aufgebaut.....auf Prosilver oder subsilver2?
Wenns auf der subsilver2-Basis ist kannst Du das so in die overall_header.html einfügen

Code: Alles auswählen

<div id="wrapheader">

	<div id="logodesc">
		<table width="100%" cellspacing="0">
		<tr>
			<td align="center"><a href="{U_INDEX}">{SITE_LOGO_IMG}</a></td>
		</tr>
		</table>
	</div>
Wenn er auf prosilver basiert

Code: Alles auswählen

<div id="wrap">
	<a id="top" name="top" accesskey="t"></a>
	<div id="page-header">
		<div class="headerbar">
			<div class="inner"><span class="corners-top"><span></span></span>

			<div id="site-description">
				<a href="{U_INDEX}" title="{L_INDEX}" id="logo">{SITE_LOGO_IMG}</a>
				<p style="display: none;"><a href="#start_here">{L_SKIP}</a></p>
			</div>

		<!-- IF S_DISPLAY_SEARCH and not S_IN_SEARCH -->
oder

Code: Alles auswählen

<div id="wrap">
	<a id="top" name="top" accesskey="t"></a>
	<div id="page-header">
		<div class="headerbar">
			<div class="inner"><span class="corners-top"><span></span></span>

			<div id="site-description">
				<a href="{U_INDEX}" title="{L_INDEX}" id="logo"><img src="images/dein_logo.gif" width="920" height="180" alt="" /></a>
				<!--<h1>{SITENAME}</h1>
				<p>{SITE_DESCRIPTION}</p>-->
				<p style="display: none;"><a href="#start_here">{L_SKIP}</a></p>
			</div>


			<span class="corners-bottom"><span></span></span></div>
		</div>
LG Franki
R_V_D
Mitglied
Beiträge: 43
Registriert: 10.12.2007 11:09
Kontaktdaten:

Beitrag von R_V_D »

bei mir baut es auf pro silver auf. Der erste Codeabschnitt, den du dazu geschrieben hast entspricht aber genau dem was ich hier stehen habe, das ist also mein Urspungscode, den ich ändern will. Ich will ja nicht das phpBB Logo ändern. Da ist ja das site_logo_img für zuständig.
Ich möchte nstatt dem normalen blauen Hintergrund meinen normalen Banner da haben.
Das headerbar Tag liegt in der common.css und sieht standsardmäßig so aus:

Code: Alles auswählen

.headerbar {
	background: #ebebeb none repeat-x 0 0;
	color: #FFFFFF;
	margin-bottom: 4px;
	padding: 0 5px;
}
es ändert sich aber nichts daran wenn ich das so habe:

Code: Alles auswählen

.headerbar {
	background-image: url(meine grafik);
	margin-bottom: 4px;
	padding: 0 5px;
}
In deinem zweiten Codebeispiel ändert man doch nur die phpBB Grafik oder?
Benutzeravatar
franki
Ehemaliges Teammitglied
Beiträge: 2823
Registriert: 21.10.2007 14:02
Wohnort: Sonsbeck
Kontaktdaten:

Beitrag von franki »

Bei der letzten Codeangabe von mir hab ich folgenden Header....
overall_header.jpg

//edit
Versuche mal folgendes
Style "black_pearl_phpbb3_1_2_6"

<----------------------------finde----------------------------------->

Code: Alles auswählen

<div id="top_logo">
<table width="100%" cellspacing="0" cellpadding="0" border="0">
<tr>
<td height="150" align="left" valign="middle"><a href="{U_INDEX}">{SITE_LOGO_IMG}</a></td>
<td align="center" valign="middle"><h1>{SITENAME}</h1><span class="gen">{SITE_DESCRIPTION}</span></td>
<td align="right" valign="top">&nbsp;</td>
</tr>
</table>
</div>
<--------------------------------ändern in--------------------------------->

Code: Alles auswählen

<div id="top_logo">
<table width="100%" cellspacing="0" cellpadding="0" border="0">
<tr>
<td width="100%" height="150" align="center" valign="middle"><a href="{U_INDEX}">{SITE_LOGO_IMG}</a></td>
</tr>
</table>
</div>
Zuletzt geändert von franki am 02.01.2008 14:12, insgesamt 1-mal geändert.
LG Franki
R_V_D
Mitglied
Beiträge: 43
Registriert: 10.12.2007 11:09
Kontaktdaten:

Beitrag von R_V_D »

Und diese Searchmachine hast du statt dem eigentlichen Header oder wie? tut mir leid, bei der Seite bekomm ichs aber jetzt garnicht nachvollzogen was sich durch den Code ändert. Ich probier ihn einfach mal aus. Auf jeden Fall schonmal danke für die Mühe.

edit: in der overall_header? Da sind bei mir keine Tabellen. Im ganzen sieht die Datei ohne Änderungen so aus:

Code: Alles auswählen

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.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-style-type" content="text/css" />
<meta http-equiv="content-language" content="{S_USER_LANG}" />
<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>

<!--
	phpBB style name: prosilver
	Based on style:   prosilver (this is the default phpBB3 style)
	Original author:  Tom Beddard ( http://www.subBlue.com/ )
	Modified by:      
	
	NOTE: This page was generated by phpBB, the free open-source bulletin board package.
	      The phpBB Group is not responsible for the content of this page and forum. For more information
	      about phpBB please visit http://www.phpbb.com
-->

<script type="text/javascript">
// <![CDATA[
	var jump_page = '{LA_JUMP_PAGE}:';
	var on_page = '{ON_PAGE}';
	var per_page = '{PER_PAGE}';
	var base_url = '{A_BASE_URL}';
	var style_cookie = 'phpBBstyle';
	var onload_functions = new Array();
	var onunload_functions = new Array();

	<!-- IF S_USER_PM_POPUP -->
		if ({S_NEW_PM})
		{
			popup('{UA_POPUP_PM}', 400, 225, '_phpbbprivmsg');
		}
	<!-- ENDIF -->

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

	/**
	* New function for handling multiple calls to window.onload and window.unload by pentapenguin
	*/
	window.onload = function()
	{
		for (i = 0; i <= onload_functions.length; i++)
		{
			eval(onload_functions[i]);
		}
	}

	window.onunload = function()
	{
		for (i = 0; i <= onunload_functions.length; i++)
		{
			eval(onunload_functions[i]);
		}
	}

// ]]>
</script>
<script type="text/javascript" src="{T_TEMPLATE_PATH}/styleswitcher.js"></script>
<script type="text/javascript" src="{T_TEMPLATE_PATH}/forum_fn.js"></script>

<link href="{T_THEME_PATH}/print.css" rel="stylesheet" type="text/css" media="print" title="printonly" />
<link href="{T_STYLESHEET_LINK}" rel="stylesheet" type="text/css" media="screen, projection" />

<link href="{T_THEME_PATH}/normal.css" rel="stylesheet" type="text/css" title="A" />
<link href="{T_THEME_PATH}/medium.css" rel="alternate stylesheet" type="text/css" title="A+" />
<link href="{T_THEME_PATH}/large.css" rel="alternate stylesheet" type="text/css" title="A++" />

<!-- IF S_CONTENT_DIRECTION eq 'rtl' -->
	<link href="{T_THEME_PATH}/bidi.css" rel="stylesheet" type="text/css" media="screen, projection" />
<!-- ENDIF -->

</head>

<body id="phpbb" class="section-{SCRIPT_NAME} {S_CONTENT_DIRECTION}">

<div id="wrap">
	<a id="top" name="top" accesskey="t"></a>
	<div id="page-header">
		<div class="headerbar">
			<div class="inner"><span class="corners-top"><span></span></span>

			<div id="site-description">
				<a href="{U_INDEX}" title="{L_INDEX}" id="logo">{SITE_LOGO_IMG}</a>
				<h1>{SITENAME}</h1>
				<p>{SITE_DESCRIPTION}</p>
				<p style="display: none;"><a href="#start_here">{L_SKIP}</a></p>
			</div>

		<!-- IF S_DISPLAY_SEARCH and not S_IN_SEARCH -->
			<div id="search-box">
				<form action="{U_SEARCH}" method="post" id="search">
				<fieldset>
					<input name="keywords" id="keywords" type="text" maxlength="128" title="{L_SEARCH_KEYWORDS}" class="inputbox search" value="<!-- IF SEARCH_WORDS-->{SEARCH_WORDS}<!-- ELSE -->{L_SEARCH_MINI}<!-- ENDIF -->" onclick="if(this.value=='{LA_SEARCH_MINI}')this.value='';" onblur="if(this.value=='')this.value='{LA_SEARCH_MINI}';" /> 
					<input class="button2" value="{L_SEARCH}" type="submit" /><br />
					<a href="{U_SEARCH}" title="{L_SEARCH_ADV_EXPLAIN}">{L_SEARCH_ADV}</a> {S_HIDDEN_FIELDS}
				</fieldset>
				</form>
			</div>
		<!-- ENDIF -->

			<span class="corners-bottom"><span></span></span></div>
		</div>

		<div class="navbar">
			<div class="inner"><span class="corners-top"><span></span></span>

			<ul class="linklist navlinks">
				<li class="icon-home"><a href="{U_INDEX}" accesskey="h">{L_INDEX}</a> <!-- BEGIN navlinks --> <strong>‹</strong> <a href="{navlinks.U_VIEW_FORUM}">{navlinks.FORUM_NAME}</a><!-- END navlinks --></li>

				<li class="rightside"><a href="#" onclick="fontsizeup(); return false;" class="fontsize" title="{L_CHANGE_FONT_SIZE}">{L_CHANGE_FONT_SIZE}</a></li>

				<!-- IF U_EMAIL_TOPIC --><li class="rightside"><a href="{U_EMAIL_TOPIC}" title="{L_EMAIL_TOPIC}" class="sendemail">{L_EMAIL_TOPIC}</a></li><!-- ENDIF -->
				<!-- IF U_EMAIL_PM --><li class="rightside"><a href="{U_EMAIL_PM}" title="{L_EMAIL_PM}" class="sendemail">{L_EMAIL_PM}</a></li><!-- ENDIF -->
				<!-- IF U_PRINT_TOPIC --><li class="rightside"><a href="{U_PRINT_TOPIC}" title="{L_PRINT_TOPIC}" accesskey="p" class="print">{L_PRINT_TOPIC}</a></li><!-- ENDIF -->
				<!-- IF U_PRINT_PM --><li class="rightside"><a href="{U_PRINT_PM}" title="{L_PRINT_PM}" accesskey="p" class="print">{L_PRINT_PM}</a></li><!-- ENDIF -->
			</ul>

			<!-- IF not S_IS_BOT and S_USER_LOGGED_IN -->
			<ul class="linklist leftside">
				<li class="icon-ucp">
					<a href="{U_PROFILE}" title="{L_PROFILE}" accesskey="u">{L_PROFILE}</a>
						<!-- IF S_DISPLAY_PM --> (<a href="{U_PRIVATEMSGS}">{PRIVATE_MESSAGE_INFO}</a>)<!-- ENDIF --> &bull; 
					<a href="{U_SEARCH_SELF}">{L_SEARCH_SELF}</a>
					<!-- IF U_RESTORE_PERMISSIONS --> &bull;
					<a href="{U_RESTORE_PERMISSIONS}">{L_RESTORE_PERMISSIONS}</a>
					<!-- ENDIF -->
				</li>
			</ul>
			<!-- ENDIF -->

			<ul class="linklist rightside">
				<li class="icon-faq"><a href="{U_FAQ}" title="{L_FAQ_EXPLAIN}">{L_FAQ}</a></li>
				<!-- IF not S_IS_BOT -->
					<!-- IF S_DISPLAY_MEMBERLIST --><li class="icon-members"><a href="{U_MEMBERLIST}" title="{L_MEMBERLIST_EXPLAIN}">{L_MEMBERLIST}</a></li><!-- ENDIF -->
					<!-- IF not S_USER_LOGGED_IN --><li class="icon-register"><a href="{U_REGISTER}">{L_REGISTER}</a></li><!-- ENDIF -->
					<li class="icon-logout"><a href="{U_LOGIN_LOGOUT}" title="{L_LOGIN_LOGOUT}" accesskey="l">{L_LOGIN_LOGOUT}</a></li>
				<!-- ENDIF -->
			</ul>

			<span class="corners-bottom"><span></span></span></div>
		</div>

	</div>

	<a name="start_here"></a>
	<div id="page-body">
		
		 <!-- IF S_BOARD_DISABLED and S_USER_LOGGED_IN and (U_MCP or U_ACP) --> 
		<div id="message" class="rules">
			<div class="inner"><span class="corners-top"><span></span></span>
				<strong>{L_INFORMATION}:</strong> {L_BOARD_DISABLED}
			<span class="corners-bottom"><span></span></span></div>
		</div>
		<!-- ENDIF -->
Zuletzt geändert von R_V_D am 02.01.2008 14:16, insgesamt 1-mal geändert.
Benutzeravatar
franki
Ehemaliges Teammitglied
Beiträge: 2823
Registriert: 21.10.2007 14:02
Wohnort: Sonsbeck
Kontaktdaten:

Beitrag von franki »

R_V_D hat geschrieben:Und diese Searchmachine hast du statt dem eigentlichen Header oder wie? tut mir leid, bei der Seite bekomm ichs aber jetzt garnicht nachvollzogen was sich durch den Code ändert. Ich probier ihn einfach mal aus. Auf jeden Fall schonmal danke für die Mühe.
overall_header_vorher.jpg
overall_header_vorher.jpg

Plati hat geschrieben:Die Suchfunktion konnte mir nicht wirklich weiterhelfen, darum hier meine Frage:

Ich möchte im Style "Black Pearl" den Header verändern.
Das ist der Style nach dem Du gefragt hast.
Die overall_header die Du geschickzt hast ist nicht von dem Style.

Das ist der original Ausschnitt

Code: Alles auswählen

<div id="top_logo"> 
<table width="100%" cellspacing="0" cellpadding="0" border="0"> 
<tr> 
<td height="150" align="left" valign="middle"><a href="{U_INDEX}">{SITE_LOGO_IMG}</a></td> 
<td align="center" valign="middle"><h1>{SITENAME}</h1><span class="gen">{SITE_DESCRIPTION}</span></td> 
<td align="right" valign="top">&nbsp;</td> 
</tr> 
</table> 
</div>
Zuletzt geändert von franki am 02.01.2008 14:21, insgesamt 1-mal geändert.
LG Franki
R_V_D
Mitglied
Beiträge: 43
Registriert: 10.12.2007 11:09
Kontaktdaten:

Beitrag von R_V_D »

meinst du mich? Ich habe kein black pearl. Meine overall_header sieht momentan so aus und wenn du mal hier guckst, so soeht das dann aus. Da wo es jetzt weiß ist soll mein Banner hin

edit: steht doch auch in dem Code, den ich hier rein geschrieben habe, dass es pro silver ist

edit2: jetzt versteh ich deine gedanken glaube ich. ich bin nicht plati, ich hab kein blackpearl ich habe aber auch geschrieben, dass ich pro silver habe. kannst du mir jetzt vielleicht eher helfen?
Antworten

Zurück zu „[3.0.x] Styles, Templates und Grafiken“