[3.3] Wie erstelle ich einen sogenannten Childstyle

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
chris1278
Mitglied
Beiträge: 3860
Registriert: 12.11.2007 06:20
Wohnort: Euskirchen
Kontaktdaten:
Kontaktdaten von chris1278

[3.3] Wie erstelle ich einen sogenannten Childstyle

Beitrag von chris1278 »

Also ich gebe hier mal eine kleine Anleitung wie man einen Style einfach erstellen kann.

Ausführliche Anweisungen bzw. Anleitungen findet Ihr >>> hier <<<

Erstmal sei kurz erklärt, was ein sogenannter Childstyle oder auch Schwester Style ist.

Man kann natürlich hingehen und den Inhalt von Prosilver in einen neuen Ordner kopieren und dann diesen modifizieren. Dies hat aber den Nachteil, dass, wenn sich an dem Code einzelner Dateien was ändert, man diese auch bei den einzelnen Updates mit übernehmen muss, selbst wenn diese Datei keine der gemachten Änderungen beinhaltet.

Bei einem sogenannten Childstyle ist es so, dass man einen kompletten Style als Grundgerüst voraussetzt, auf den eben diese Änderungen aufbaut.

In der Erklärung hier setze ich den Style Prosilver als Grundgerüst ein, da dieser ja auch Standard ist.

Weil wenn man dies dann so macht, braucht man lediglich die Dateien bei einem Update im Auge zu behalten die man auch benutzt.

Die entsprechenden Codeänderungen findet ihr hier

So als Erstes erstellen wir mal eine Ordnerstruktur.


Wir nennen unseren Style jetzt Einfachheit halber mal progold

Wir legen nun im Ordner Styles den Ordner progold an. In diesem Ordner erstellen wir zwei weitere Ordner. Der Erste nennt sich template und der zweite nennt sich theme.

Der Ordner template wird später unsere template Dateien enthalten.

Der Ordner theme wird die css dateien und evtl. Bilddateien enthalten sofern benötigt.

Wenn Ihr diese Ordern erstellt habt sollten diese in etwa so aussehen.

forenroot
->styles
----|>progold
-----------|>template
-----------|>theme

KIch kann hier leider keine Bilder hochladen wie die anderen auch also muss ich mir da leider so behelfen.


Damit unser Style auch vom Forum gefunden wird erstellen wir eine Datei namens style.cfg und speichern diese im Ordner ../styles/progold ab.

Diese Datei hat folgenden Inhalt:

Code: Alles auswählen

#
# phpBB Style Configuration File
#
# This file is part of the phpBB Forum Software package.
#
# @copyright (c) phpBB Limited <https://www.phpbb.com>
# @license GNU General Public License, version 2 (GPL-2.0)
#
# For full copyright and license information, please see
# the docs/CREDITS.txt file.
#
# At the left is the name, please do not change this
# At the right the value is entered
#
# Values get trimmed, if you want to add a space in front or at the end of
# the value, then enclose the value with single or double quotes.
# Single and double quotes do not need to be escaped.
#
#

# General Information about this style
name = progold
copyright = © phpBB Limited, 2007
style_version = 3.3.15
phpbb_version = 3.3.15

# Defining a different template bitfield
# template_bitfield = //g=

# Parent style
# Set value to empty or to this style's name if this style does not have a parent style
parent = prosilver
Folgende Einträge haben hier folgende Bedeutung:

Name = <- Hier kommt der Name des Styles rein, in unserem Fall progold

copyright = <- Hier kannst du deinen Namen oder einen Persönlichen Nick Eintragen. Da du ja der Autor des styles bist bzw. es ja dann deine Individuellen Änderungen sind.

style_version = <- Hier kannst du eine individuelle Versionsnummer angeben, diese sollte so aufgebaut sein wie auch die Versionsnummer des Forums. Beispiel 1.2.3

phpbb_version = Hier solltest du die Versionsnummer angeben, welche sich auf die Versionsnummer des Forums bezieht. z. B. wenn du den Style für phpbb 3.3.11 programmierst, sollte dort 3.3.1 stehen. Im aktuellen Fall steht dort 3.3.15, weil die aktuellste Forenversion 3.3.15 ist.

Und last but not least haben wir noch das Feld parent = und zwar da es nicht mit einer Raute unterdrückt wird (was bei einem childstyle nicht sinnvoll wäre) wird hier angegeben welcher Style das Grundgerüst stellt. Und hier steht Prosilver.

Als nächstes erstellen wir drei weitere Dateien. Diese kommen dann in den Ordner ../styles/progold/template/

1. overall_header.html

Dies mit folgendem Inhalt:

Code: Alles auswählen

<!DOCTYPE html>
<html dir="{S_CONTENT_DIRECTION}" lang="{S_USER_LANG}">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1" />
{META}
<title><!-- IF UNREAD_NOTIFICATIONS_COUNT -->({UNREAD_NOTIFICATIONS_COUNT}) <!-- ENDIF --><!-- IF not S_VIEWTOPIC and not S_VIEWFORUM -->{SITENAME} - <!-- ENDIF --><!-- IF S_IN_MCP -->{L_MCP} - <!-- ELSEIF S_IN_UCP -->{L_UCP} - <!-- ENDIF -->{PAGE_TITLE}<!-- IF S_VIEWTOPIC or S_VIEWFORUM --> - {SITENAME}<!-- ENDIF --></title>

<!-- IF S_ENABLE_FEEDS -->
	<!-- IF S_ENABLE_FEEDS_OVERALL --><link rel="alternate" type="application/atom+xml" title="{L_FEED} - {SITENAME}" href="{{ path('phpbb_feed_index') }}"><!-- ENDIF -->
	<!-- IF S_ENABLE_FEEDS_NEWS --><link rel="alternate" type="application/atom+xml" title="{L_FEED} - {L_FEED_NEWS}" href="{{ path('phpbb_feed_news') }}"><!-- ENDIF -->
	<!-- IF S_ENABLE_FEEDS_FORUMS --><link rel="alternate" type="application/atom+xml" title="{L_FEED} - {L_ALL_FORUMS}" href="{{ path('phpbb_feed_forums') }}"><!-- ENDIF -->
	<!-- IF S_ENABLE_FEEDS_TOPICS --><link rel="alternate" type="application/atom+xml" title="{L_FEED} - {L_FEED_TOPICS_NEW}" href="{{ path('phpbb_feed_topics') }}"><!-- ENDIF -->
	<!-- IF S_ENABLE_FEEDS_TOPICS_ACTIVE --><link rel="alternate" type="application/atom+xml" title="{L_FEED} - {L_FEED_TOPICS_ACTIVE}" href="{{ path('phpbb_feed_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="{{ path('phpbb_feed_forum', { forum_id : 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="{{ path('phpbb_feed_topic', { topic_id : S_TOPIC_ID } ) }}"><!-- ENDIF -->
	<!-- EVENT overall_header_feeds -->
<!-- ENDIF -->

<!-- IF U_CANONICAL -->
	<link rel="canonical" href="{U_CANONICAL}">
<!-- ENDIF -->

<!--
	phpBB style name: 	progold
	Based on style:   	prosilver (this is the default phpBB3 style)
	Original author:  	Tom Beddard ( http://www.subBlue.com/ )
	Modified by:		name des Autors
-->

<!-- IF S_ALLOW_CDN -->
<script>
	WebFontConfig = {
		google: {
			families: ['Open+Sans:300,300i,400,400i,600,600i,700,700i,800,800i&subset=cyrillic,cyrillic-ext,greek,greek-ext,latin-ext,vietnamese']
		}
	};

	(function(d) {
		var wf = d.createElement('script'), s = d.scripts[0];
		wf.src = 'https://cdn.jsdelivr.net/npm/webfontloader@1.6.28/webfontloader.min.js';
		wf.async = true;
		s.parentNode.insertBefore(wf, s);
	})(document);
</script>
<!-- ENDIF -->
<link href="{ROOT_PATH}styles/prosilver/theme/normalize.css?assets_version={T_ASSETS_VERSION}" rel="stylesheet">
<link href="{ROOT_PATH}styles/prosilver/theme/base.css?assets_version={T_ASSETS_VERSION}" rel="stylesheet">
<link href="{ROOT_PATH}styles/prosilver/theme/utilities.css?assets_version={T_ASSETS_VERSION}" rel="stylesheet">
<link href="{ROOT_PATH}styles/prosilver/theme/common.css?assets_version={T_ASSETS_VERSION}" rel="stylesheet">
<link href="{ROOT_PATH}styles/prosilver/theme/links.css?assets_version={T_ASSETS_VERSION}" rel="stylesheet">
<link href="{ROOT_PATH}styles/prosilver/theme/content.css?assets_version={T_ASSETS_VERSION}" rel="stylesheet">
<link href="{ROOT_PATH}styles/prosilver/theme/buttons.css?assets_version={T_ASSETS_VERSION}" rel="stylesheet">
<link href="{ROOT_PATH}styles/prosilver/theme/cp.css?assets_version={T_ASSETS_VERSION}" rel="stylesheet">
<link href="{ROOT_PATH}styles/prosilver/theme/forms.css?assets_version={T_ASSETS_VERSION}" rel="stylesheet">
<link href="{ROOT_PATH}styles/prosilver/theme/icons.css?assets_version={T_ASSETS_VERSION}" rel="stylesheet">
<link href="{ROOT_PATH}styles/prosilver/theme/colours.css?assets_version={T_ASSETS_VERSION}" rel="stylesheet">
<link href="{ROOT_PATH}styles/prosilver/theme/responsive.css?assets_version={T_ASSETS_VERSION}" rel="stylesheet">

<link href="{T_FONT_AWESOME_LINK}" rel="stylesheet">
<link href="{T_STYLESHEET_LINK}" rel="stylesheet">
<!-- IF S_CONTENT_DIRECTION eq 'rtl' -->
	<link href="{ROOT_PATH}styles/prosilver/theme/bidi.css?assets_version={T_ASSETS_VERSION}" rel="stylesheet">
<!-- ENDIF -->

<!-- IF S_PLUPLOAD -->
	<link href="{ROOT_PATH}styles/prosilver/theme/plupload.css?assets_version={T_ASSETS_VERSION}" rel="stylesheet">
<!-- ENDIF -->

<!-- IF S_COOKIE_NOTICE -->
	<link href="{T_ASSETS_PATH}/cookieconsent/cookieconsent.min.css?assets_version={T_ASSETS_VERSION}" rel="stylesheet">
<!-- ENDIF -->

<!--[if lte IE 9]>
	<link href="{ROOT_PATH}styles/prosilver/theme/tweaks.css?assets_version={T_ASSETS_VERSION}" rel="stylesheet">
<![endif]-->


<!-- EVENT overall_header_head_append -->

{$STYLESHEETS}

<!-- EVENT overall_header_stylesheets_after -->

</head>
<body id="phpbb" class="nojs notouch section-{SCRIPT_NAME} {S_CONTENT_DIRECTION} {BODY_CLASS}">

<!-- EVENT overall_header_body_before -->

<div id="wrap" class="wrap">
	<a id="top" class="top-anchor" accesskey="t"></a>
	<div id="page-header">
		<div class="headerbar" role="banner">
		<!-- EVENT overall_header_headerbar_before -->
			<div class="inner">

			<div id="site-description" class="site-description">
		<a id="logo" class="logo" href="{% if U_SITE_HOME %}{{ U_SITE_HOME }}{% else %}{{ U_INDEX }}{% endif %}" title="{% if U_SITE_HOME %}{{ L_SITE_HOME }}{% else %}{{ L_INDEX }}{% endif %}">
					<span class="site_logo"></span>
				</a>
				<h1>{SITENAME}</h1>
				<p>{SITE_DESCRIPTION}</p>
				<p class="skiplink"><a href="#start_here">{L_SKIP}</a></p>
			</div>

			<!-- EVENT overall_header_searchbox_before -->
			<!-- IF S_DISPLAY_SEARCH and not S_IN_SEARCH -->
			<div id="search-box" class="search-box search-header" role="search">
				<form action="{U_SEARCH}" method="get" id="search">
				<fieldset>
					<input name="keywords" id="keywords" type="search" maxlength="128" title="{L_SEARCH_KEYWORDS}" class="inputbox search tiny" size="20" value="{SEARCH_WORDS}" placeholder="{L_SEARCH_MINI}" />
					<button class="button button-search" type="submit" title="{L_SEARCH}">
						<i class="icon fa-search fa-fw" aria-hidden="true"></i><span class="sr-only">{L_SEARCH}</span>
					</button>
					<a href="{U_SEARCH}" class="button button-search-end" title="{L_SEARCH_ADV}">
						<i class="icon fa-cog fa-fw" aria-hidden="true"></i><span class="sr-only">{L_SEARCH_ADV}</span>
					</a>
					{S_SEARCH_HIDDEN_FIELDS}
				</fieldset>
				</form>
			</div>
			<!-- ENDIF -->
			<!-- EVENT overall_header_searchbox_after -->

			</div>
			<!-- EVENT overall_header_headerbar_after -->
		</div>
		<!-- EVENT overall_header_navbar_before -->
		<!-- INCLUDE navbar_header.html -->
	</div>

	<!-- EVENT overall_header_page_body_before -->

	<a id="start_here" class="anchor"></a>
	<div id="page-body" class="page-body" role="main">
		<!-- IF S_BOARD_DISABLED and S_USER_LOGGED_IN and (U_MCP or U_ACP) -->
		<div id="information" class="rules">
			<div class="inner">
				<strong>{L_INFORMATION}{L_COLON}</strong> {L_BOARD_DISABLED}
			</div>
		</div>
		<!-- ENDIF -->

		<!-- EVENT overall_header_content_before -->
Dort findet ihr dann folgenden Codeblock den ihr anpassen könnt.

Code: Alles auswählen

<!--
	phpBB style name: 	progold
	Based on style:   	prosilver (this is the default phpBB3 style)
	Original author:  	Tom Beddard ( http://www.subBlue.com/ )
	Modified by:		name des Autors
-->
Der Name des Styles und des Author könnt ihr entsprechend durch eure Infos erstezen.


2. simple_header.html

Code: Alles auswählen

<!DOCTYPE html>
<html dir="{S_CONTENT_DIRECTION}" lang="{S_USER_LANG}">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1" />
{META}
<title>{SITENAME} &bull; <!-- IF S_IN_MCP -->{L_MCP} &bull; <!-- ELSEIF S_IN_UCP -->{L_UCP} &bull; <!-- ENDIF -->{PAGE_TITLE}</title>

<!-- IF S_ALLOW_CDN -->
<script>
	WebFontConfig = {
		google: {
			families: ['Open+Sans:300,300i,400,400i,600,600i,700,700i,800,800i&subset=cyrillic,cyrillic-ext,greek,greek-ext,latin-ext,vietnamese']
		}
	};

	(function(d) {
		var wf = d.createElement('script'), s = d.scripts[0];
		wf.src = 'https://cdn.jsdelivr.net/npm/webfontloader@1.6.28/webfontloader.min.js';
		wf.async = true;
		s.parentNode.insertBefore(wf, s);
	})(document);
</script>
<!-- ENDIF -->
<link href="{ROOT_PATH}styles/prosilver/theme/normalize.css?assets_version={T_ASSETS_VERSION}" rel="stylesheet">
<link href="{ROOT_PATH}styles/prosilver/theme/base.css?assets_version={T_ASSETS_VERSION}" rel="stylesheet">
<link href="{ROOT_PATH}styles/prosilver/theme/utilities.css?assets_version={T_ASSETS_VERSION}" rel="stylesheet">
<link href="{ROOT_PATH}styles/prosilver/theme/common.css?assets_version={T_ASSETS_VERSION}" rel="stylesheet">
<link href="{ROOT_PATH}styles/prosilver/theme/links.css?assets_version={T_ASSETS_VERSION}" rel="stylesheet">
<link href="{ROOT_PATH}styles/prosilver/theme/content.css?assets_version={T_ASSETS_VERSION}" rel="stylesheet">
<link href="{ROOT_PATH}styles/prosilver/theme/buttons.css?assets_version={T_ASSETS_VERSION}" rel="stylesheet">
<link href="{ROOT_PATH}styles/prosilver/theme/cp.css?assets_version={T_ASSETS_VERSION}" rel="stylesheet">
<link href="{ROOT_PATH}styles/prosilver/theme/forms.css?assets_version={T_ASSETS_VERSION}" rel="stylesheet">
<link href="{ROOT_PATH}styles/prosilver/theme/icons.css?assets_version={T_ASSETS_VERSION}" rel="stylesheet">
<link href="{ROOT_PATH}styles/prosilver/theme/colours.css?assets_version={T_ASSETS_VERSION}" rel="stylesheet">
<link href="{ROOT_PATH}styles/prosilver/theme/responsive.css?assets_version={T_ASSETS_VERSION}" rel="stylesheet">

<link href="{T_FONT_AWESOME_LINK}" rel="stylesheet">
<link href="{T_STYLESHEET_LINK}" rel="stylesheet">
<!-- IF S_CONTENT_DIRECTION eq 'rtl' -->
	<link href="{ROOT_PATH}styles/prosilver/theme/bidi.css?assets_version={T_ASSETS_VERSION}" rel="stylesheet">
<!-- ENDIF -->

<!-- IF S_PLUPLOAD -->
	<link href="{ROOT_PATH}styles/prosilver/theme/plupload.css?assets_version={T_ASSETS_VERSION}" rel="stylesheet">
<!-- ENDIF -->

<!-- IF S_COOKIE_NOTICE -->
	<link href="{T_ASSETS_PATH}/cookieconsent/cookieconsent.min.css?assets_version={T_ASSETS_VERSION}" rel="stylesheet">
<!-- ENDIF -->

<!--[if lte IE 9]>
	<link href="{ROOT_PATH}styles/prosilver/theme/tweaks.css?assets_version={T_ASSETS_VERSION}" rel="stylesheet">
<![endif]-->

<!-- DEFINE $POPUP = 1 -->

<!-- EVENT simple_header_head_append -->

{$STYLESHEETS}

<!-- EVENT simple_header_stylesheets_after -->

</head>

<body id="phpbb" class="nojs {S_CONTENT_DIRECTION} {BODY_CLASS}">

<!-- EVENT simple_header_body_before -->

<div id="wrap" class="wrap">
	<a id="top" class="top-anchor" accesskey="t"></a>
	<div id="page-body" class="page-body" role="main">
Wie man an beiden Dateien shon sehen kann werden bevor die informationen zum neuen Style benutzt werden erst die css Dateien aus dem Prosilver geladen.

Das hat den Vorteil das ihr nur noch eine css Datei laden müsst mit dem Childstyle die dann eure änderungen enthalten.

Beispiel: Ihr wollt bei eurem Stye das die Schriftfarbe des body Elements die Farbe rot hat anstelle von dem gräulichen Ton den Prosilver nutzt.
Dann ladet ihr in der einen css Datei für den Body einfach:

Code: Alles auswählen

body {
	color: #FF0000;
}

Dann würde das grüliche Rot erscheinen. Weil der body wert der Farbe den des Prosilver Wertes überschreiben würde. Da die Css Datei eures Styles erst nach den css Dateien des Prosilver geladen werden.

Sollte ein wert dennoch nicht übernommen werden kann man auch ein !important dranhängen.

Um bei dem Beispiel mit der body schriftfarbe zu bleiben sähe der code dann so aus:

Code: Alles auswählen

body {
	color: #FF0000 !important;
}
3. simple_footer.html

Code: Alles auswählen

	</div>

	<div class="copyright" role="contentinfo">
		<p class="footer-row">
			<span class="footer-copyright">{{ CREDIT_LINE }}</span>
		</p>
		{% if TRANSLATION_INFO %}
			<p class="footer-row">
				<span class="footer-copyright">{{ TRANSLATION_INFO }}</span>
			</p>
		{% endif %}
		{% if DEBUG_OUTPUT %}
			<p class="footer-row">
				<span class="footer-info">{{ DEBUG_OUTPUT }}</span>
			</p>
		{% endif %}
	</div>

	<div id="darkenwrapper" class="darkenwrapper" data-ajax-error-title="{L_AJAX_ERROR_TITLE}" data-ajax-error-text="{L_AJAX_ERROR_TEXT}" data-ajax-error-text-abort="{L_AJAX_ERROR_TEXT_ABORT}" data-ajax-error-text-timeout="{L_AJAX_ERROR_TEXT_TIMEOUT}" data-ajax-error-text-parsererror="{L_AJAX_ERROR_TEXT_PARSERERROR}">
		<div id="darken" class="darken">&nbsp;</div>
	</div>
	<div id="loading_indicator" class="loading_indicator"></div>

	<div id="phpbb_alert" class="phpbb_alert" data-l-err="{L_ERROR}" data-l-timeout-processing-req="{L_TIMEOUT_PROCESSING_REQ}">
		<a href="#" class="alert_close">
			<i class="icon fa-times-circle fa-fw" aria-hidden="true"></i>
		</a>
		<h3 class="alert_title">&nbsp;</h3><p class="alert_text"></p>
	</div>
	<div id="phpbb_confirm" class="phpbb_confirm phpbb_alert">
		<a href="#" class="alert_close">
			<i class="icon fa-times-circle fa-fw" aria-hidden="true"></i>
		</a>
		<div class="alert_text"></div>
	</div>
</div>

<script src="{T_JQUERY_LINK}"></script>
<!-- IF S_ALLOW_CDN --><script>window.jQuery || document.write('\x3Cscript src="{T_ASSETS_PATH}/javascript/jquery-3.6.0.min.js?assets_version={T_ASSETS_VERSION}">\x3C/script>');</script><!-- ENDIF -->
<script src="{T_ASSETS_PATH}/javascript/core.js?assets_version={T_ASSETS_VERSION}"></script>
<!-- INCLUDEJS forum_fn.js -->
<!-- INCLUDEJS ajax.js -->

<!-- EVENT simple_footer_after -->

{$SCRIPTS}

{% EVENT simple_footer_body_after %}

</body>
</html>
Damit wir auch eigene css Angaben laden können müssen wir noch 2 Dateien erstellen. Diese kommen dann in den Ordner ../styles/progold/theme/

1. stylesheet.css

Mit folgendem Inhalt:

Code: Alles auswählen

/*  phpBB3 Style Sheet
    --------------------------------------------------------------
	Style name:			progold
	Based on style:		prosilver (the default phpBB 3.3.x style)
	Original author:	Tom Beddard ( http://www.subblue.com/ )
	Modified by:		name des Authors
    --------------------------------------------------------------
*/

@import url("progold.css?hash=12345");
Auch hier kann im Oberen Teil wieder der Style name und der Name des Authors angepasst werden.

Desweiteren geben wir einen import befehl mit welche unsere css Datei laden tut in der sich unsere Anweisungen enthalten. Imn dem fall ist das die datei progold.css Dieser enthält einen hashwert. Sobald man änderungen an der css datei macht kann man diesen ändern. Im optimalen wäre es wenn er den crc32 wert der entsprechenden css datei hat aber eine einfache zahlen oder Buchstaben combo tun es hier auch.

2. progold.css

Wir stellen diese mal mit dem Inhalt

Code: Alles auswählen

body {
	color: #FF0000;
}

Damit wäre eigentlich schon beschrieben wie man ein Grundgerüst eines Styles aufbauen kann.

Es gibt natürlich auch noch andere Methoden die css Angaben von Prosilver einzuladen aber dies ist in meinen Augen der simpelste weg.


Dies hat hier den Vorteil das die Sachen die nicht im progold enthalten sind einfach vom Prosilver übernommen werden und nur die Sachen die von uns geändert werden überschrieben werden.


Wenn man jetzt in einer html datei des styles was ändern möchte benötigt man nur diese datei.

Nehmen wir mal an wir möchten was ändern was auf der Seite ist die kommt wenn man das Forum auf der ersten seite aufruft.

Dafür ist die index_body.html aus dem Verzeichniss ../styles/prosilver/template/ verantwortlich.

Dann kopieren wir diese Datei einfach aus dem Verzeichniss ../styles/prosilver/template/ in unseren Style nach ../styles/progold/template/. Dann können wir dort die gewünschte Änderung durchführen und die Dateien die fehlen werden weiterhin von prosilver gestellt.


Falls man unten in der Fußnote noch sich als Author nenen möchte benötigt man noch folgende Datei:

1. overall_footer.html

mit folgendem Inhalt:

Code: Alles auswählen

		<!-- EVENT overall_footer_content_after -->
	</div>

<!-- EVENT overall_footer_page_body_after -->

<div id="page-footer" class="page-footer" role="contentinfo">
	<!-- INCLUDE navbar_footer.html -->

	<div class="copyright">
		<p class="footer-row">
		<strong>Stylename: <a href="#">flatsilver</a></strong>
		<br />		 
		<strong>Style built from:  <a href="https://christian-esch.de/forum/viewtopic.php?f=8&t=2">&copy; Christian Esch aka Chris1278</a></strong>
		</p>	
		<!-- EVENT overall_footer_copyright_prepend -->
		<p class="footer-row">
			<span class="footer-copyright">{{ CREDIT_LINE }}</span>
		</p>
		<!-- IF TRANSLATION_INFO -->
		<p class="footer-row">
			<span class="footer-copyright">{{ TRANSLATION_INFO }}</span>
		</p>
		<!-- ENDIF -->
		<!-- EVENT overall_footer_copyright_append -->
		<p class="footer-row" role="menu">
			<a class="footer-link" href="{{ U_PRIVACY }}" title="{{ lang('PRIVACY_LINK') }}" role="menuitem">
				<span class="footer-link-text">{{ lang('PRIVACY_LINK') }}</span>
			</a>
			|
			<a class="footer-link" href="{{ U_TERMS_USE }}" title="{{ lang('TERMS_LINK') }}" role="menuitem">
				<span class="footer-link-text">{{ lang('TERMS_LINK') }}</span>
			</a>
		</p>
		<!-- IF DEBUG_OUTPUT -->
		<p class="footer-row">
			<span class="footer-info">{{ DEBUG_OUTPUT }}</span>
		</p>
		<!-- ENDIF -->
		<!-- IF U_ACP -->
		<p class="footer-row">
			<a class="footer-link text-strong" href="{{ U_ACP }}">{{ lang('ACP') }}</a>
		</p>
		<!-- ENDIF -->
	</div>

	<div id="darkenwrapper" class="darkenwrapper" data-ajax-error-title="{L_AJAX_ERROR_TITLE}" data-ajax-error-text="{L_AJAX_ERROR_TEXT}" data-ajax-error-text-abort="{L_AJAX_ERROR_TEXT_ABORT}" data-ajax-error-text-timeout="{L_AJAX_ERROR_TEXT_TIMEOUT}" data-ajax-error-text-parsererror="{L_AJAX_ERROR_TEXT_PARSERERROR}">
		<div id="darken" class="darken">&nbsp;</div>
	</div>

	<div id="phpbb_alert" class="phpbb_alert" data-l-err="{L_ERROR}" data-l-timeout-processing-req="{L_TIMEOUT_PROCESSING_REQ}">
		<a href="#" class="alert_close">
			<i class="icon fa-times-circle fa-fw" aria-hidden="true"></i>
		</a>
		<h3 class="alert_title">&nbsp;</h3><p class="alert_text"></p>
	</div>
	<div id="phpbb_confirm" class="phpbb_alert">
		<a href="#" class="alert_close">
			<i class="icon fa-times-circle fa-fw" aria-hidden="true"></i>
		</a>
		<div class="alert_text"></div>
	</div>
</div>

</div>

<div>
	<a id="bottom" class="anchor" accesskey="z"></a>
	{% if not S_IS_BOT %}{{ RUN_CRON_TASK }}{% endif %}
</div>

<script src="{T_JQUERY_LINK}"></script>
<!-- IF S_ALLOW_CDN --><script>window.jQuery || document.write('\x3Cscript src="{T_ASSETS_PATH}/javascript/jquery-3.6.0.min.js?assets_version={T_ASSETS_VERSION}">\x3C/script>');</script><!-- ENDIF -->
<script src="{T_ASSETS_PATH}/javascript/core.js?assets_version={T_ASSETS_VERSION}"></script>
<!-- INCLUDEJS forum_fn.js -->
<!-- INCLUDEJS ajax.js -->
<!-- IF S_ALLOW_CDN -->
	<script>
		(function($){
			var $fa_cdn = $('head').find('link[rel="stylesheet"]').first(),
				$span = $('<span class="fa" style="display:none"></span>').appendTo('body');
			if ($span.css('fontFamily') !== 'FontAwesome' ) {
				$fa_cdn.after('<link href="{T_ASSETS_PATH}/css/font-awesome.min.css" rel="stylesheet">');
				$fa_cdn.remove();
			}
			$span.remove();
		})(jQuery);
	</script>
<!-- ENDIF -->

<!-- IF S_COOKIE_NOTICE -->
	<script src="{T_ASSETS_PATH}/cookieconsent/cookieconsent.min.js?assets_version={T_ASSETS_VERSION}"></script>
	<script>
		if (typeof window.cookieconsent === "object") {
			window.addEventListener("load", function(){
				window.cookieconsent.initialise({
					"palette": {
						"popup": {
							"background": "#0F538A"
						},
						"button": {
							"background": "#E5E5E5"
						}
					},
					"theme": "classic",
					"content": {
						"message": "{LA_COOKIE_CONSENT_MSG}",
						"dismiss": "{LA_COOKIE_CONSENT_OK}",
						"link": "{LA_COOKIE_CONSENT_INFO}",
						"href": "{UA_PRIVACY}"
					}
				});
			});
		}
	</script>
<!-- ENDIF -->

<!-- EVENT overall_footer_after -->

<!-- IF S_PLUPLOAD --><!-- INCLUDE plupload.html --><!-- ENDIF -->
{$SCRIPTS}

<!-- EVENT overall_footer_body_after -->

</body>
</html>
Um deine Angaben anzupassen finde folgeneden Code Abschnitt:

Code: Alles auswählen

		<p class="footer-row">
		<strong>Stylename: <a href="#">Progold</a></strong>
		<br />
		<strong>Style built from:  <a href="https://deine-domain.de">&copy; Name des AUtors</a></strong>
		</p>
Diesen kannst du mit deinen Informationen anpassen.
Nach oben
Antworten

Zurück zu „Styles, Templates und Grafiken“