[3.2] background image fade

Alles zu Styles, Templates, Icons und Smilies für phpBB 3.3, sowie allgemeine Designfragen zur Integration von phpBB in bestehende Websites.
Forumsregeln
Bei Style spezifischen Fragen ist der Stylename und die Downloadquelle des Styles erforderlich sowie die URL vom betroffenen Forum.
Antworten
Benutzeravatar
Minusbrain
Mitglied
Beiträge: 163
Registriert: 23.09.2008 19:15
Wohnort: AC

[3.2] background image fade

Beitrag von Minusbrain »

Hallöchen in die Runde :)

Ich würde gerne im Background einen auf CSS basierenden image fade erzeugen wie er hier dargestellt wird. https://codepen.io/taniarascia/pen/jBvKVL

Wie genau könnte man das bei phpbb einbinden? Gibt ja doch einige Dateien und ich hege im Moment die Vermutung dass dass im overal header platziert werden müsste.

Ziel ist es, dass alle 30 Sekunden ein langsamer Bilderwechsel auftritt.

Diese Spielerei hat keine Prio, also alles ganz entspannt. :D

Beste Grüße
Minus
§1. Nur wer Toleranz Grenzen setzt weiß Freiheit zu schätzen.
§2. Kunst und Schaffenskraft lässt sich genauso leicht kritisieren wie es für den Kritiker schwer ist besseres zu leisten.
ZNC
Mitglied
Beiträge: 229
Registriert: 21.05.2014 13:48
Wohnort: Köln

Re: [3.2] background image fade

Beitrag von ZNC »

Auch Hallöchen Minusbrain ( :D ),
wie Du das Codeschnipsel wo platzieren willst, da kann ich Dir nicht weiterhelfen, aber vielleicht ist die nachfolgende grobe Strukturübersicht Dir hilfreich. Mir hilft sie, um zu sehen, wo ich etwas in welchen Templates haben will. Ich habe die wichtigsten Templates-Aufrufe mit <!-- ZNC [Templatename].html Beginn/Ende --> gekennzeichnet.

Code: Alles auswählen

<!DOCTYPE html>
<html dir="ltr" lang="de">
<head></head>
<body>
<!-- ZNC overall_header.html Beginn -->
<div id="wrap" class="wrap">
	<a id="top" class="top-anchor" accesskey="t"></a>
	<div id="page-header">
		<div class="headerbar" role="banner">
			<div class="inner">
				<div id="site-description" class="site-description">
					<a id="logo" class="logo" href="dummy.php" title="Foren-Übersicht"><span class="site_logo"></span></a>
					<h1>Balik avi</h1>
					<p>Angler-Forum</p>
					<p class="skiplink"><a href="#start_here">Zum Inhalt</a></p>
				</div>
				<!-- SUCHE: id: wrap > id: page-header > class: headerbar > class: inner > id: search-box -->
				<div id="search-box" class="search-box search-header" role="search">
					<form action="dummy.php" method="get" id="search">
						...
					</form>
				</div>
			</div>
		</div>
<!-- ZNC navbar_header.html Beginn -->
		<div class="navbar" role="navigation">
			<div class="inner">
				<ul id="nav-main" class="nav-main linklist" role="menubar">
					<li id="quick-links" class="quick-links dropdown-container responsive-menu" data-skip-responsive="true">
						<a href="#" class="dropdown-trigger">
							... Schnellzugriff
						</a>
						<div class="dropdown">
							<div class="pointer"><div class="pointer-inner"></div></div>
							<ul class="dropdown-contents" role="menu">
								... (Eigene Beiträge, Neue Beiträge, Ungelesene Beiträge, Unbeantwortete Themen, Aktive Themen, Suche, Mitglieder, Das Team)
							</ul>
						</div>
					</li>
					<li data-last-responsive="true">
						... FAQ
					</li>
					<li data-last-responsive="true">
						... Adm.
					</li>
					<li data-last-responsive="true">
						... Mod.
					</li>
					<li id="username_logged_in" class="rightside " data-skip-responsive="true">
						<div class="header-profile dropdown-container">
							... Name des eingeloggten Users
							<div class="dropdown">
								<ul class="dropdown-contents" role="menu">
									... Persönlicher Bereich, Profil, Abmelden
								</ul>
							</div>
						</div>
					</li>
					<li class="rightside" data-skip-responsive="true">
						... Private Nachrichten
					</li>
					<li class="dropdown-container dropdown-right rightside" data-skip-responsive="true">
						... Benachrichtigungen
						<div id="notification_list" class="dropdown dropdown-extended notification_list">
							...
						</div>
					</li>
				</ul>
				<ul id="nav-breadcrumbs" class="nav-breadcrumbs linklist navlinks" role="menubar">
					<li class="breadcrumbs">
						... Foren-Übersicht, Forum 1, Forum 2
					</li>
					<li class="rightside responsive-search">
						... Suche
					</li>
				</ul>
			</div>
		</div>
<!-- ZNC navbar_header.html Ende -->
	</div>
	<a id="start_here" class="anchor"></a>
	<div id="page-body" class="page-body" role="main">
<!-- ZNC overall_header.html Ende -->
		<h2 class="forum-title"><a href="dummy.php">Kuzey Denizi: Hollanda</a></h2>
		<div>
			<div style="display: none !important;">Nordsee: Niederlande<br /></div>	
		</div>
		<div class="action-bar bar-top">
			Neues Thema
			<!-- SUCHE: id: wrap > id: page-body > class: action-bar bar-top > class: search-box -->
			<div class="search-box" role="search">
				<form method="get" id="forum-search" action="dummy.php">
					...
				</form>
			</div>
			<div class="pagination">
				... Themen als gelesen markieren, x Themen, Seite 1 von 1
			</div>
		</div>
		<div class="forumbg">
			<div class="inner">
				<ul class="topiclist">
					<li class="header">
						<dl class="row-item">
							... Themen, Antworten, Zugriffe, Letzter Beitrag
						</dl>
					</li>
				</ul>
				<ul class="topiclist topics">
					<li class="row bg1">
						<dl class="row-item topic_read">
							<dt title="Keine ungelesenen Beiträge">
								<div class="list-inner">
									... Topic 1
								</div>
							</dt>
							<dd class="posts">... Antworten</dd>
							<dd class="views">... Zugriffe</dd>
							<dd class="lastpost">... Letzter Beitrag ...</dd>
						</dl>
					</li>
					<li class="row bg2">
						<dl class="row-item topic_read">
							<dt title="Keine ungelesenen Beiträge">
								<div class="list-inner">
									... Topic 2
								</div>
							</dt>
							<dd class="posts">... Antworten</dd>
							<dd class="views">... Zugriffe</dd>
							<dd class="lastpost">... Letzter Beitrag ...</dd>
						</dl>
					</li>
				</ul>
			</div>
		</div>
		<div class="action-bar bar-bottom">
			<a href="dummy.php" class="button" title="Neues Thema erstellen">
				... Neues Thema
			</a>
			<form method="post" action="dummy.php">
				<div class="dropdown-container dropdown-container-left dropdown-button-control sort-tools">
					... Anzeige- und Sortierungs-Einstellungen
					<div class="dropdown hidden">
						<div class="dropdown-contents">
							<fieldset class="display-options">
								... Anzeigen, Sortiere nach, Richtung
							</fieldset>
						</div>
					</div>
				</div>
			</form>
			<div class="pagination">
				... Themen als gelesen markieren, X Themen, Seite 1 von 1
			</div>
		</div>
		<div class="action-bar actions-jump">
			<p class="jumpbox-return">
				... Zurück zur Foren-Übersicht
			</p>
			<div class="jumpbox dropdown-container dropdown-container-right dropdown-up dropdown-left dropdown-button-control" id="jumpbox">
				<span title="Gehe zu" class="button button-secondary dropdown-trigger dropdown-select">
					... Gehe zu
				</span>
				<div class="dropdown">
					<ul class="dropdown-contents">
						<li><a href="dummy.php" class="jumpbox-cat-link">Forum X</a></li>
					</ul>
				</div>
			</div>
		</div>
		<div class="stat-block online-list">
			<h3>... Wer ist online?</h3> ...
		</div>
		<div class="stat-block permissions">
			<h3>Berechtigungen in diesem Forum</h3> ...
		</div>
<!-- ZNC overall_footer.html Beginn -->
	</div>
	<div id="page-footer" class="page-footer" role="contentinfo">
		<div class="navbar" role="navigation">
			<div class="inner">
				<ul id="nav-footer" class="nav-footer linklist" role="menubar">
					<li class="breadcrumbs">... Foren-Übersicht</li>
					<li class="rightside">... Alle Zeiten sind UTC+01:00</li>
					<li class="rightside">... Alle Cookies des Boards löschen</li>
					<li class="rightside" data-last-responsive="true">... Mitglieder</li>
					<li class="rightside" data-last-responsive="true">... Das Team</li>
					<li class="rightside" data-last-responsive="true">... Kontakt</li>
				</ul>
			</div>
		</div>
		<div class="copyright">
			Powered by phpBB, Deutsche Übersetzung durch phpBB.de, Administrations-Bereich
		</div>
		<div id="darkenwrapper" class="darkenwrapper" data-ajax-error-title="AJAX-Fehler" data-ajax-error-text="Bei der Verarbeitung deiner Anfrage ist ein Fehler aufgetreten." data-ajax-error-text-abort="Der Benutzer hat die Anfrage abgebrochen." data-ajax-error-text-timeout="Bei deiner Anfrage ist eine Zeitüberschreitung aufgetreten. Bitte versuche es erneut." data-ajax-error-text-parsererror="Bei deiner Anfrage ist etwas falsch gelaufen und der Server hat eine ungültige Antwort zurückgegeben.">
			...
		</div>
		<div id="phpbb_alert" class="phpbb_alert" data-l-err="Fehler" data-l-timeout-processing-req="Bei der Anfrage ist eine Zeitüberschreitung aufgetreten.">
			...
		</div>
		<div id="phpbb_confirm" class="phpbb_alert">
			...
		</div>
	</div>
</div>
<div>
	<a id="bottom" class="anchor" accesskey="z"></a>
</div>
...
</body>
<!-- ZNC overall_footer.html Ende -->
</html>
Der, die, das, wer, wie. was ... wer nicht fragt bleibt dumm. :D
Antworten

Zurück zu „Styles, Templates und Grafiken“