Habe eine Verständnisfrage

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.
Antworten
Katjabrauchthilfe
Mitglied
Beiträge: 97
Registriert: 11.07.2014 15:41

Habe eine Verständnisfrage

Beitrag von Katjabrauchthilfe »

Hallo in die Runde,

ich habe ja am wochenende mit eure tatkräftigen Unterstützung ein paar Dateien ergänzen können. Dabei fiel mir ein Unterschied zur Wordpressdateien auf. Während dieses in HTML geschrieben sind und dazwischen die Textbestandteile, Farbcodes etc stehen, entdecke ich bei phpBB HTML Dateien sowas hier:

Code: Alles auswählen

{SITE_DESCRIPTION}
Und ich vermute, dahinter verbergen sich komplexe Codes oder Befehle?

Hintergrund zu meiner Frage: Mein Style lucid_lime basiert auf prosilver und man kann unter Boardeinstellungen den Seitennamen und die Seitenbeschreibung eingeben. Dies geschieht in meinem Style in der Farbe weiß. Naiv wie ich bin, dachte ich mir, ich muss mir einfach nur in der overall_header die Stelle mit dem Farbcode suchen (#ffffff) und diesen mit dem Code der erwünschten Farbe #161616 oder # 262626 ersetzen. Welche der beiden Farben es wird, hängt noch vom Logo ab.

Also habe ich mir die Overall_header in notepad++ geladen und gesucht. Ich glaube, die Stelle, identifiziert zu haben, die damit zu tun hat:

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>
				<div style="margin-top: 36px; max-height: 65px;"><h1>{SITENAME}</h1>
				<p style="font-size: 1.2em;">{SITE_DESCRIPTION}</p></div>
				<p class="skiplink"><a href="#start_here">{L_SKIP}</a></p>
		</div>
Aber da steht nirgends was von #ffffff. Und so weit ich sehe, auch in der ganzen Datei nicht:

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="" />
{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: Lucid Lime
	Based on style:   prosilver (this is the default phpBB3 style)
	Original author:  Tom Beddard ( http://www.subBlue.com/ )
	Modified by:	  Eric Seguin
-->

<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++" />

<!-- 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>
				<div style="margin-top: 36px; max-height: 65px;"><h1>{SITENAME}</h1>
				<p style="font-size: 1.2em;">{SITE_DESCRIPTION}</p></div>
				<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>

	<!-- IF not S_IS_BOT && S_USER_LOGGED_IN && S_DISPLAY_PM -->
        <br />
		<!-- IF S_USER_NEW_PRIVMSG -->
			<div class="pm_alert">
            	<h3>{L_PRIVATE_MESSAGES}</h3>
                <div style="margin-bottom:5px !important;"><a href="{U_PRIVATEMSGS}">{PRIVATE_MESSAGE_INFO}<!-- IF PRIVATE_MESSAGE_INFO_UNREAD -->, {PRIVATE_MESSAGE_INFO_UNREAD}<!-- ENDIF --></a></div>
            </div>
        <!-- ELSEIF S_USER_UNREAD_PRIVMSG -->
        	<div class="pm_alert">
            	<h3>{L_PRIVATE_MESSAGES}</h3>
                <div style="margin-bottom:5px !important;"><a href="{U_PRIVATEMSGS}">{PRIVATE_MESSAGE_INFO}<!-- IF PRIVATE_MESSAGE_INFO_UNREAD --> &bull; {PRIVATE_MESSAGE_INFO_UNREAD}<!-- ENDIF --></a></div>
            </div>
		<!-- ENDIF -->
		<br />
	<!-- ENDIF -->

	<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 -->
Verweisen diese "Befehle" in den {} auf weitere Datein, in denen das dann hinterlegt ist? Und wenn diese Annahme von mir richtig ist, wie kann ich herausfinden, wo diese anderen Dateien sind?

Liebe Grüße

Katja
Nach oben
Benutzeravatar
franki
Ehemaliges Teammitglied
Beiträge: 2823
Registriert: 21.10.2007 14:02
Wohnort: Sonsbeck
Kontaktdaten:
Kontaktdaten von franki

Re: Habe eine Verständnisfrage

Beitrag von franki »

Hallo Katja

Dieser Code {SITE_DESCRIPTION} sagt aus, dass der Inhalt in einer .php-Datei gesucht wird.
In diesem Fall in der includes/functions.php ('SITE_DESCRIPTION' => $config['site_desc'],).
Den Inhalt von 'SITENAME' und 'SITE_DESCRIPTION' gibst Du ja im ACP ein und wird in der Datenbank gespeichert.

Mit deiner Schriftfarbe sieht es etwas anders aus.
Das ist in den style/theme/???.css Dateien hinterlegt, damit das ganze überschaubar bleibt.
Das sind dann z.B. diese Code-Abschnitte:
id="wrap", id="page-header", class="headerbar", h1, p
In deinem Fall (Style) sollte für die Farbgebung h1 verantwortlich sein und den findest Du in der styles/dein style/theme/common.css.
Hier z.B. der Eintrag in der common.css von prosilver

Code: Alles auswählen

h1 {
	/* Forum name */
	font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
	margin-right: 200px;
	color: #FFFFFF;
	margin-top: 15px;
	font-weight: bold;
	font-size: 2em;
}
Da aber dieses <h1> auch in anderen Template-Dateien des Styles vorhanden ist, muss man sich etwas ausdenken.

Eine Variante wäre:
aus <h1> wird <h1 style="color:#FFFFFF;">. Somit würde nur die Farbe dieser einen Zeile geändert.
Und wenn diese Annahme von mir richtig ist, wie kann ich herausfinden, wo diese anderen Dateien sind?
Wenn Du den FireFox verwendest gibt es das AddOn "Firebug". Damit findest Du die entsprechenden Dateien und es wird
angezeigt was sich alles hinter dem z.B. h1 verbirgt. (Siehe oberen Codeabschnitt für h1).
LG Franki
Nach oben
Katjabrauchthilfe
Mitglied
Beiträge: 97
Registriert: 11.07.2014 15:41

Re: Habe eine Verständnisfrage

Beitrag von Katjabrauchthilfe »

Vielen Dank Franki!

Dann werde ich mich mal heute abend auf die suche begeben und gucken was ich da so "reissen" kann. 8)

Liebe Grüße

Katja
Nach oben
Benutzeravatar
AYYILDIZLAR
Ehemaliges Teammitglied
Beiträge: 4148
Registriert: 09.11.2010 18:08
Kontaktdaten:
Kontaktdaten von AYYILDIZLAR

Re: Habe eine Verständnisfrage

Beitrag von AYYILDIZLAR »

Hallo,
Katjabrauchthilfe hat geschrieben:Und wenn diese Annahme von mir richtig ist, wie kann ich herausfinden, wo diese anderen Dateien sind?
Ergänzend zu dem was dir franki gesagt hat KB:201


Grüße
DasEtwasAndereMotorradforum.de
Deutsche Übersetzung der Tapatalk Extension | Deutsche Übersetzung der Tapatalk MOD
Bitte keine PN wegen Support, werde diese zukünftig ignorieren und gleich löschen.
Nach oben
Katjabrauchthilfe
Mitglied
Beiträge: 97
Registriert: 11.07.2014 15:41

Re: Habe eine Verständnisfrage

Beitrag von Katjabrauchthilfe »

Dank dir, haben schon quer gelesen, ist heute nacht oder morgen meine Lektüre 8)

Liebe Grüße

Katja
Nach oben
Katjabrauchthilfe
Mitglied
Beiträge: 97
Registriert: 11.07.2014 15:41

Re: Habe eine Verständnisfrage

Beitrag von Katjabrauchthilfe »

Hallo ihr,

ich habe mir jetzt hier alles durchgelesen, Firebug installiert und mal zum testen die oben erwähnte h1 in den commos auf eine andere Farbe gesetzt. Jetzt warte ich, bin die Änderungen sichtbar sind um zu gucken, was es alles betrifft und ob es mir gefällt.

In der Zwischenzeit wende ich mich einer weiteren Herausforderung zu. In unserem Style - lucid_lime der auf prosilver beruht - hat man oben im Header ein Logo. Da sind wir gerade fleissig am basteln, haben aber gemerkt, das die Logogröße beschränkt ist und das man, wenn man ein beriters Logo hochlädt, dieses gestaucht wird. Da dachte ich mir, vielleicht kann man das ja auch ändern, wobei ich nicht weiß, ob eine einfache Änderung ausreicht, da ja auch die beiden Schriftzüge ( h1 + h2 mit Forumsnamen und Beschreibung örtlich fest verankert sind und ein breiteres Logo da hineinragen würde. Die Alternative wäre, diese beiden Schriftfelder leer zu lassen und unser Credo einfach selbst unter unser Logo zu schreiben. Keine Ahnung ob das geht.

Nun habe ich mir mit Firebug das Logofeld angesehen:

[ externes Bild ]

Und er lokalisiert folgendes:

[ externes Bild ]

Meine Frage dazu: In der oberen Zeile des Firebugfensters - mit rot unterstrichen - stehen ja mehrere...hm...nennen wir sie Verweise. Sind die stellvertretend für jeweils eine Datei und müßte ich in allen Dateien etwas ändern, damit ich erfolgreich bei der Aufhebung der Logobeschränkung bin?

in der Commom.css selbst habe ich folgendes zum Logo gefunden:

Code: Alles auswählen

#logo {
	float: left;
	width: auto;
	padding: 10px 13px 0 10px;
}

a#logo:hover {
	text-decoration: none;
Das Left vermute ich beschreibt die Positionieren links im Header? Die Größe wird mit auto angegeben, vermute ich richtig, dass dann in irgendeiner anderen Datei das "auto" mit einer maximalen Größe definiert ist? Das Hover verstehe ich nicht, weil sich das Logo ja nicht verändert, wenn man mit der Maus drüber fährt.

Sooo...bin ich auf einem völlig flaschen Dampfer? Und kann man die Logogrößenbeschränkung in nur einer Datie aufheben oder muss man in mehrere rein?

Liebe Grüße

Katja
Nach oben
Benutzeravatar
Kirk
Supporter
Supporter
Beiträge: 7912
Registriert: 24.05.2010 08:31
Kontaktdaten:
Kontaktdaten von Kirk

Re: Habe eine Verständnisfrage

Beitrag von Kirk »

Hallo
Was was Sitelogo angeht, lies mal hier: Board Logo im Header austauschen
Nach oben
Katjabrauchthilfe
Mitglied
Beiträge: 97
Registriert: 11.07.2014 15:41

Re: Habe eine Verständnisfrage

Beitrag von Katjabrauchthilfe »

Danke Udo!

Da das von dir verlinkt für 3.1. ist, habe ich auf das fr 3.0. geklickt. Sooo..und nun wieder mein Verständnis überprüfen bitte:

in der Overall_Header stehen "nur" die Codes, die sich dann in der Common.css finden, richtig? Also kannsoll ich in der Overall nichts ändern.

Die Änderungen sind in der Common.css vorzunehmen, doch reicht es nur da? Oder sind noch mehr Dateien betroffen, wie all die Verweise, die im Firebug gelistet werden - siehe Screen2 von mir. Und da steht ja in meinem Desing, genauso wie im Prosilver das die

Code: Alles auswählen

width gleich auto
sein soll. Dieses

Code: Alles auswählen

Auto
muss doch aber irgendwo festegelegt sein? Denn ich vermute, dass dieses

Code: Alles auswählen

auto
dazu führt, dass das neue Logo - das ich immer via FTP austausche - automatisch verkleinert wird?

richtig?

Liebe Grüße

Katja
Nach oben
Benutzeravatar
Kirk
Supporter
Supporter
Beiträge: 7912
Registriert: 24.05.2010 08:31
Kontaktdaten:
Kontaktdaten von Kirk

Re: Habe eine Verständnisfrage

Beitrag von Kirk »

Katjabrauchthilfe hat geschrieben:Da das von dir verlinkt für 3.1. ist, habe ich auf das fr 3.0. geklickt.
Dann schau mal hier: https://www.phpbb.de/kb/logo30x
Nach oben
Katjabrauchthilfe
Mitglied
Beiträge: 97
Registriert: 11.07.2014 15:41

Re: Habe eine Verständnisfrage

Beitrag von Katjabrauchthilfe »

Kirk hat geschrieben:
Katjabrauchthilfe hat geschrieben:Da das von dir verlinkt für 3.1. ist, habe ich auf das fr 3.0. geklickt.
Dann schau mal hier: https://www.phpbb.de/kb/logo30x
Hab ich doch.... 8)
habe ich auf das für 3.0. geklickt.
und nach dem ich es gelesen habe, kamen mir obige Fragen :D

Liebe Grüße

Katja
Nach oben
Antworten

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