zusätzliches gif "einbauen"

[NoAlk68]

Ein freundliches Hallo @all,


wir benutzen ein Forum der Version phpBB3.0.9

Nun steht ja die Advents-und Vorweihnachtszeit vor der Tür und ich möchte im "Kopf" des Forums einen Adventskranz einbauen (gif-Datei). Zur Veranschaulichung habe ich mal einen "jetzt" screenshot dabei

http://dl.dropbox.com/u/27801232/weihna ... silver.PNG

und etwas gebastelt, wie ich es mir hinterher ungefähr vorstelle

http://dl.dropbox.com/u/27801232/weihna ... _kranz.png

Es handelt sich hierbei um subsilver2. Ich möchte das Ganze in subsilver2 und prosilver einbasteln und nach der Weihnachtszeit wieder entfernen.

Nun zu meinen Fragen. Wohin muss ich die gif-Datei laden? Und welche Datei muss ich wie editieren, damit mir das Bildchen dann im Style wie gezeigt dargestellt wird? Das spätere entfernen dürfte nicht das Problem sein, da ich mir die entsprechende Datei ja vor'm editieren kopieren und später wieder austauschen kann. Ich habe die Suche genutzt, aber leider nichts entsprechendes gefunden. Ich hoffe, ich habe mein Anliegen verständlich ausgedrückt und bedanke mich schon mal im Voraus.



Gruss Thomas

[Crizzo]

Hi,

das sind jeweils folgende Dateien: overall_header.html, die findest du im "template"-Ordner von prosilver und "subsilver2".
Dort fügst du dann bei prosilver an dieser Stelle ein:

Code: Alles auswählen

<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 class="skiplink"><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="get" 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_SEARCH_HIDDEN_FIELDS}
				</fieldset>
				</form>
			</div>
		<!-- ENDIF -->

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

Wo genau, musst du mal probieren. Nimmst einfach mal ein <img scr="" alt="" />. Ich würde es mal hier danach einfügen:

Code: Alles auswählen

<p class="skiplink"><a href="#start_here">{L_SKIP}</a></p>

und per class="kranz" und per CSS dann nach rechts schieben:

Code: Alles auswählen

.kranz {
float: right;
}

Packst du einfach in die content.css ganz ans Ende.
Kann allerdings auch mit der <div id="search-box"> kollidieren, musst du mal testen, wie sich das macht.

subsilver2:
Suche nach diesem Code:

Code: Alles auswählen

<table width="100%" cellspacing="0">
		<tr>
			<td><a href="{U_INDEX}">{SITE_LOGO_IMG}</a></td>
			<td width="100%" align="center"><h1>{SITENAME}</h1><span class="gen">{SITE_DESCRIPTION}</span></td>
		</tr>
		</table>

Ergänze im 2. <td>-Element nach dem </span> dein <img>. Sieht dann so aus:

Code: Alles auswählen

<table width="100%" cellspacing="0">
		<tr>
			<td><a href="{U_INDEX}">{SITE_LOGO_IMG}</a></td>
			<td width="100%" align="center"><h1>{SITENAME}</h1><span class="gen">{SITE_DESCRIPTION}</span><img src="{T_THEME_PATH}/images/kranz.gif" alt="Kranz" class="kranz" /></td>
		</tr>
		</table>

Auch dort muss dann der CSS-Code ergänzt werden, hier allerdings in der Datei: \styles\subsilver2\theme\stylesheet.css, auch dort einfach ganz ans Ende.

Die Grafik speicherst du dann hier: \phpBB3\styles\prosilver\theme\images\ respektive da: \phpBB3\styles\subsilver2\theme\images\.


Grüße
Blackhawk

[Talk19zehn]

Hello,

eine andere ergänzende Idee für subsilver2, um einen "Versatz" innerhalb der Tabelle zu vermeiden:

Keinerlei Ergänzung in dem Verzeichnis ..\styles\subsilver2\theme\stylesheet.css

und lediglich den Bereich in der overall_header.html ggf. wie folgt aufbauen ( Bildchen natürlich entsprechend dem Hinweis abspeichern...) :

Code: Alles auswählen

<div id="logodesc">
		<table width="100%" cellspacing="0">
		<tr>
			<td><a href="{U_INDEX}">{SITE_LOGO_IMG}</a></td>
			<td width="100%" align="center"><h1>{SITENAME}</h1><span class="gen">{SITE_DESCRIPTION}</span></td><td><img src="{T_THEME_PATH}/images/kranz.gif" alt="Weihnachtskranz" /></td>
		</tr>
		</table>
	</div>

LG

[NoAlk68]

Hallo ihr Zwei,

schon Mal ein dickes Dankeschön für die Hilfe . Ich werde mich dann die Tage mal daran machen. Hört sich ja doch ein wenig kompliziert an. Aber wir haben noch ein zusätzliches "Bastelforum", um solche Dinge auszuprobieren . Ich werde dann berichten. Nochmals ein dickes Dankeeeeee .


Gruß Thomas


edit: ich habe nun schon Mal ein wenig probiert. Und zwar die zweite und augenscheinlich einfachere Variante. Ich habe einfach den kompletten dargestellten code ganz an's Ende der overall_header.html kopiert.

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="keywords" content="" />
<meta name="description" content="" />
    <link rel="shortcut icon" type="image/x-icon" href="./images/favicon.ico" />
{META}
<title>{SITENAME} &bull; <!-- IF S_IN_MCP -->{L_MCP} &bull; <!-- ELSEIF S_IN_UCP -->{L_UCP} &bull; <!-- ENDIF -->{PAGE_TITLE}</title>

<!-- IF S_ENABLE_FEEDS -->
	<!-- IF S_ENABLE_FEEDS_OVERALL --><link rel="alternate" type="application/atom+xml" title="{L_FEED} - {SITENAME}" href="{U_FEED}" /><!-- ENDIF -->
	<!-- IF S_ENABLE_FEEDS_NEWS --><link rel="alternate" type="application/atom+xml" title="{L_FEED} - {L_FEED_NEWS}" href="{U_FEED}?mode=news" /><!-- ENDIF -->
	<!-- IF S_ENABLE_FEEDS_FORUMS --><link rel="alternate" type="application/atom+xml" title="{L_FEED} - {L_ALL_FORUMS}" href="{U_FEED}?mode=forums" /><!-- ENDIF -->
	<!-- IF S_ENABLE_FEEDS_TOPICS --><link rel="alternate" type="application/atom+xml" title="{L_FEED} - {L_FEED_TOPICS_NEW}" href="{U_FEED}?mode=topics" /><!-- ENDIF -->
	<!-- IF S_ENABLE_FEEDS_TOPICS_ACTIVE --><link rel="alternate" type="application/atom+xml" title="{L_FEED} - {L_FEED_TOPICS_ACTIVE}" href="{U_FEED}?mode=topics_active" /><!-- ENDIF -->
	<!-- IF S_ENABLE_FEEDS_FORUM and S_FORUM_ID --><link rel="alternate" type="application/atom+xml" title="{L_FEED} - {L_FORUM} - {FORUM_NAME}" href="{U_FEED}?f={S_FORUM_ID}" /><!-- ENDIF -->
	<!-- IF S_ENABLE_FEEDS_TOPIC and S_TOPIC_ID --><link rel="alternate" type="application/atom+xml" title="{L_FEED} - {L_TOPIC} - {TOPIC_TITLE}" href="{U_FEED}?f={S_FORUM_ID}&t={S_TOPIC_ID}" /><!-- ENDIF -->
<!-- ENDIF -->

<!--
	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 style_cookie_settings = '{A_COOKIE_SETTINGS}';
	var onload_functions = new Array();
	var onunload_functions = new Array();

	<!-- IF S_USER_PM_POPUP and S_NEW_PM -->
			var url = '{UA_POPUP_PM}';
			window.open(url.replace(/&/g, '&'), '_phpbbprivmsg', 'height=225,resizable=yes,scrollbars=yes, width=400');
	<!-- 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 (var i = 0; i < onload_functions.length; i++)
		{
			eval(onload_functions[i]);
		}
	}

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

// ]]>
</script>
<script type="text/javascript" src="{T_SUPER_TEMPLATE_PATH}/styleswitcher.js"></script>
<script type="text/javascript" src="{T_SUPER_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++" />
<link href="{T_THEME_PATH}/bbcodebox3.css" rel="stylesheet" type="text/css" />
<!-- 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 class="skiplink"><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="get" 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_SEARCH_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>&#8249;</strong> <a href="{navlinks.U_VIEW_FORUM}">{navlinks.FORUM_NAME}</a><!-- END navlinks --></li>

				<li class="rightside"><a href="#" onclick="fontsizeup(); return false;" onkeypress="return fontsizeup(event);" 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="e">{L_PROFILE}</a>
						<!-- IF S_DISPLAY_PM --> (<a href="{U_PRIVATEMSGS}">{PRIVATE_MESSAGE_INFO}</a>)<!-- ENDIF -->
					<!-- IF S_DISPLAY_SEARCH --> &bull;
					<a href="{U_SEARCH_SELF}">{L_SEARCH_SELF}</a>
					<!-- ENDIF -->
					<!-- 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 and S_REGISTER_ENABLED and not (S_SHOW_COPPA or S_REGISTRATION) --><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="x">{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="information" 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 -->
	<div id="logodesc">
      <table width="100%" cellspacing="0">
      <tr>
         <td><a href="{U_INDEX}">{SITE_LOGO_IMG}</a></td>
         <td width="100%" align="center"><h1>{SITENAME}</h1><span class="gen">{SITE_DESCRIPTION}</span></td><td><img src="{T_THEME_PATH}/images/kranz1.gif" alt="Weihnachtskranz" /></td>
      </tr>
      </table>
   </div>

Mein Adventskranz ist nun auch vorhanden. Allerdings ist nun unser zentrales Logo und die Zeile "testen bis der Arzt kommt" doppelt gemoppelt. Sicherlich ein Fehler meinerseits. Wäre schön, wenn ihr nochmal helfen könntet. Das zentrale Logo und der Satz (roter Pfeil) müssten dort weg. Der Idealfall wäre natürlich, wenn ich den Kranz an die Stelle beim schwarzen Pfeil platzieren könnte. Aber wenn die rot markierten Dinge dort weg kommen, wäre ich auch schon zufrieden

http://dl.dropbox.com/u/27801232/doppelt.png



Gruß Thomas


edit2: bei subsilver2 habe ich es nun hinbekommen . Bei prosilver breche ich mir leider noch die Ohren .

[Talk19zehn]

Hello NoAlk68,

edit2: bei subsilver2 habe ich es nun hinbekommen . Bei prosilver breche ich mir leider noch die Ohren .

wenn du die weihnachtliche Grafik nicht anhand der o.g. Idee im Style Prosilver so richtig integrieren kannst, schlage ich vor, diese Bildchen ggf. mit Z-Index einzubauen. Das wäre ggf. einfacher denn je? So spart man sich evtl. weitere eventuell komplizierte Umbaumaßnahmen.

Beispiel:
Das Bild liegt in dem Verzeichnis .... Dein Style / Theme / Images und sollte möglichst einen transparenten Hintergrund haben.

Die Abstandsmaße "top" und "right" sind nur sinnbildlich gemeint!!
In der overall_header.html fügst du nach

Code: Alles auswählen

<div id="page-header">

ein:

Code: Alles auswählen

<div style="position: absolute; top: 30px; right: 438px; z-index: 1;"><img src="{T_THEME_PATH}/images/stern27.gif" alt="Advent" /></div>

[ externes Bild ]

Oder gar mehrfach stapeln und eine Überlappung in der Anzeige erzeugen (?): Finde ich persönlich ganz schön, da es nicht so ganz alltäglich ist.
Die Abstandsmaße "top" und "right" sind auch hier nur sinnbildlich genannt und von daher entsprechend einer eigenen Headergestaltung bzw. in Abhängigkeit der Bildgröße anzupassen.

Code: Alles auswählen

<div style="position: absolute; top: 42px; right: 449px; z-index: 1;"><img src="{T_THEME_PATH}/images/stern27.gif" alt="Advent" /></div>
<div style="position: absolute; top: 27px; right: 477px; z-index: 2;"><img src="{T_THEME_PATH}/images/stern22.gif" alt="Advent" /></div>
<div style="position: absolute; top: 46px; right: 474px; z-index: 3;"><img src="{T_THEME_PATH}/images/stern24.gif" alt="Advent" /></div>
<div style="position: absolute; top: 32px; right: 463px; z-index: 4;"><img src="{T_THEME_PATH}/images/stern28.gif" alt="Advent" /></div>

Nur ein Beispiel von vielen:
[ externes Bild ]


Viele Grüße


Edit:
Es können sich kleinere Abweichungen der Abstände in den jeweiligen Browsern ergeben. Bitte die kleineren Auflösungen beachten....

Uuups

.

[NoAlk68]

Heyyyyyy, super.......hat einwandfrei funktioniert. Ein ganz dickes Dankeschön

http://dl.dropbox.com/u/27801232/kranzsc.PNG



Gruß Thomas

[Talk19zehn]

Heyyyyyy, super.......hat einwandfrei funktioniert. Ein ganz dickes Dankeschön

...(...)...

Nicht dafür und doch freut es mich für dich, NoAlk68

Das Teilchen zur Integrierung von zusätzlichen Bildern, sei es mittles Z-Index mehrfach oder nicht mehrfach gestapelt ließe sich ja nicht nur zur Weihnachtszeit einsetzen.
Ich nutze es ganz gern zum Anlass für ein Fest nicht ohne Anlass bzw. für ein dem Board-Thema entsprechenden Look..... Das können auch Sonderzeichen sein....

Beste Grüße