[3.2] [3.2.1] Modern

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.
Benutzeravatar
canonknipser
Ehemaliges Teammitglied
Beiträge: 2053
Registriert: 10.09.2011 11:14
Kontaktdaten:

Re: [3.2] [3.2.1] [DEV] Modern

Beitrag von canonknipser »

Tastenplayer hat geschrieben:Dass es keine Leerzeichen in der css. haben darf wusste ich nicht, habe ich nie irgendwo gelesen :o
Dann ist vielleicht ein Hinweis auf die Entwicklerdokumentation angebracht: viewtopic.php?f=149&t=234860 - hier ist ein Blick in die Coding Guidelines manchmal hilfreich - da gibt es auch einen Abschnitt über Styling ;)
Grüße, canonknipser
"there are only 10 types of people: those, who understand binary and those, who don't"
just arrived ;) - Bilder
Kein Support via PN, nur im Board und (manchmal) im IRC
Lehrling
Ehemaliges Teammitglied
Beiträge: 3833
Registriert: 15.01.2012 20:00
Kontaktdaten:

Re: [3.2] [3.2.1] [ALPHA] Modern

Beitrag von Lehrling »

Tastenplayer hat geschrieben:Soll man die common und die colours.css besser im Style behalten, wenn es viele Änderungen gibt? Ich hab das eben nach dem Lehringsvideo alles in die style.css gepackt.
Das ist korrekt so. Der eigene Style sollte so minimalistisch wie möglich sein. Das ist von phpBB.com so erwünscht. Deshalb bitte keine "unnötigen" Stylesheets einbinden. Eines für die Änderungen reicht völlig aus.
Benutzeravatar
Tastenplayer
Mitglied
Beiträge: 2054
Registriert: 02.07.2010 19:35
Wohnort: Zuchwil/SO - Schweiz
Kontaktdaten:

Re: [3.2] [3.2.1] [DEV] Modern

Beitrag von Tastenplayer »

Danke Canonknipser
Ja so schlecht war die zu frühe Einstellung des Styles gar nicht. Jetzt darf ich alle Änderungen in den anderen Style korrigieren :) Wer lesen kann ist klar im Vorteil.
Das ist korrekt so. Der eigene Style sollte so minimalistisch wie möglich sein. Das ist von phpBB.com so erwünscht. Deshalb bitte keine "unnötigen" Stylesheets einbinden. Eines für die Änderungen reicht völlig aus.
Nur wird es mit der Zeit eben ziemlich unübersichtlich, da muss ich Anke Recht geben!
Wenn du ihn aber über phpBB zum Download anbieten möchtest, solltest du dich an die Vorgaben halten.
Ja will man dort veröffentlichen ist das zwingend. Danke für Link - happig, mit dem Englisch. Dass jetzt niemand schreibt, dass es google dafür gibt. Googletranslate ist nicht viel besser, als meine Übersetzung :lol: Kann man benutzen um einzelne, unbekannte Wörter zu übersetzen.
Was mir aufgefallen ist das du bei ul.topiclist einen schwarzen Hintergrund gewählt hast, dadurch ist z.b. die Grafik forum_read.png
sowie die Anzahl der Themen und Beiträge nicht zu erkennen, genauso wie der Link zu viewonline.
Da hast Du Recht! Ist eben eines der Fehlerprobleme. Allerdings Schwarz ist es wegen dem - siehe Pfeil [ externes Bild ] sonst ist es eben dann hier auch nicht mehr schwarz, was doof aussieht. Hab ich nur so hinbekommen, dass es eben hier schwarzen Hintergrund hat.
Die rote Hintergrundfarbe der Tabs im Persönlichen Bereich passt nicht so ganz zum Style.
war mir unschlüssig, waren zuerst nicht rot - fand die Roten besser :lol:
Das war mit den Schwarzen - fand ich irgendwie fade zu dem Header [ externes Bild ]
Bliebe noch die Alternative [ externes Bild ]

@Talk19zehn
Wenn ich in der overall_header.html das lösche, was Du als unsinnig bezeichnet hast(habe ich bei phpbb.com gefunden -war eigentlich für headerbanner ohne logo. ) sieht mein Style leider so aus: [ externes Bild ](jetzt wär er tatsächlich ein Style extremo) Ich schau im laufe der Woche das im tropicstyle nochmals genau an, wie es dort gelöst wurde. Wollte den Teil mit dem onklick mehrmals entfernen, klappte nicht.
Zuletzt geändert von Tastenplayer am 02.10.2017 15:45, insgesamt 1-mal geändert.
Meine phpBB Styles & More
Be the best version of yourself rather than a bad copy of someone else!
Benutzeravatar
Talk19zehn
Ehemaliges Teammitglied
Beiträge: 4909
Registriert: 08.06.2009 12:03
Kontaktdaten:

Re: [3.2] [3.2.1] [DEV] Modern

Beitrag von Talk19zehn »

Hi, okay, du machst das schon. Augenscheinlich liegt das Copyright bei der phpBB Limited, 2007 laut style.cfg:
# General Information about this style
name = modern
copyright = © phpBB Limited, 2007
style_version = 1.1.0
phpbb_version = 3.2.1
Dazu kann ich nichts sagen, da ich nicht wusste, dass die phpBB Limited, 2007 für deinen Style verantwortlich zeichnet.
Tastenplayer hat geschrieben:@Talk19zehn
Wenn ich in der overall_header.html das lösche, was Du als unsinnig bezeichnet hast(habe ich bei phpbb.com gefunden -war eigentlich für headerbanner ohne logo. ) sieht mein Style leider so aus: [ externes Bild ](jetzt wär er tatsächlich ein Style extremo) Ich schau im laufe der Woche das im tropicstyle nochmals genau an, wie es dort gelöst wurde. Wollte den Teil mit dem onklick mehrmals entfernen, klappte nicht.
Ich schrieb: "solche Einträge haben wenig Zweck" von Unsinn war doch gar nicht die Rede. Du schickst den Anwender nach --> localhost ---> ?
Vgl. bitte auch das hier ausgegebene Fehlerchen:
viewtopic.php?p=1373549#p1373549

Darin finde ich z.Z. bspw. auch ---> height: 220px
<div id="page-header, height: 220px"> und jener Eintrag ist leider in der Form auch nicht erklärbar oder unbedingt plausibel.
Zumal ein margin-bottom: -120px; (negatives Vorzeichen) für dein site_logo.png zum Tragen kommt, mag es für dich passend sein. Für Anwender leider eher nicht.

Ich habe nun in der berichtigten Version gar kein header.png mehr in dem Element. Und der händische Eintrag der phpBB-Version ist noch immer vorhanden? Allerdings sind hier die Versionsnummern identisch, obwohl sie sich inhaltlich geringfügig änderten.

Dennoch viel Glück und vor allem Erfolg.

Grüße
Beste Grüße
phpBB3 Designs: Stylearea Ongray-Designs
Benutzeravatar
Tastenplayer
Mitglied
Beiträge: 2054
Registriert: 02.07.2010 19:35
Wohnort: Zuchwil/SO - Schweiz
Kontaktdaten:

Re: [3.2] [3.2.1] [DEV] Modern

Beitrag von Tastenplayer »

copyright = © phpBB Limited, 2007
Ja gut, Du hast natürlich wieder mal Recht und ich eine lange Leitung - müsste natürlich Tastenplayer xxxx hin!
Ich schrieb: "solche Einträge haben wenig Zweck"
Stimmt auch - muss ich Lösung finden. Radiert man das weg ist eben der ganze Style futsch - warum auch immer! Ohne angabe der Höhe des Headerbildes in der html stimmt eben der ganze Header nicht mehr. Die Sache mit dem Logo stimmt eh nicht, hatte ich aber erwähnt.
Gut ist jetzt weg der Eintrag - sieht alles noch einigermassen normal aus. Allerdings ist jetzt halt eben der Header ohne Logo nicht mehr klickbar - Logo muss also on bleiben.

overall_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><!-- 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: extremo
	Based on style:   prosilver (this is the default phpBB3 style)
	Original author:  Tom Beddard ( http://www.subBlue.com/ )
	Modified by: Tastenplayer ( https://www.my-tastenworld.ch/ )
-->

<!-- 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://ajax.googleapis.com/ajax/libs/webfont/1.5.18/webfont.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">
<link href="{T_STYLESHEET_LANG_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}">
<p class="bgsitename"><h1>{SITENAME}</h1></p>

<!-- 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" 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="logo"></span>
					<h1 style="display:none;">{SITENAME}</h1>
					<p class="skiplink"><a href="#start_here">{L_SKIP}</a></p>
				</a>
			</div>

			</div>
			<!-- EVENT overall_header_headerbar_after -->
			<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>
								
				<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 -->
Ich habe nun in der berichtigten Version gar kein header.png mehr in dem Element
Da hast Du leider auch wieder Recht :oops:
Und der händische Eintrag der phpBB-Version ist noch immer vorhanden?
Ja, weil die Datei von gestern Abend ist und ich erst heute den Eintrag entfernte.
Meine phpBB Styles & More
Be the best version of yourself rather than a bad copy of someone else!
vfrblue
Ehemaliges Teammitglied
Beiträge: 1993
Registriert: 22.11.2016 18:46

Re: [3.2] [3.2.1] [DEV] Modern

Beitrag von vfrblue »

Die "overall_header.html" meines Style "VFR-OC-Style" sieht so aus:

Code: Alles auswählen

</script>
<!-- ENDIF -->
<link href="{T_FONT_AWESOME_LINK}" type="text/css" rel="stylesheet" media="screen">
<link href="{ROOT_PATH}styles/prosilver/theme/stylesheet.css?assets_version={T_ASSETS_VERSION}" type="text/css" rel="stylesheet" media="screen">
<link href="{T_THEME_PATH}/occolor.css?assets_version={T_ASSETS_VERSION}" type="text/css" rel="stylesheet" media="screen">
<link href="{T_THEME_PATH}/{T_THEME_LANG_NAME}/stylesheet.css?assets_version={T_ASSETS_VERSION}" type="text/css" rel="stylesheet" media="screen">

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

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

<!-- IF S_COOKIE_NOTICE -->
	<link href="{T_THEME_PATH}/cookieconsent.min.css?assets_version={T_ASSETS_VERSION}" type="text/css" rel="stylesheet" media="screen">
<!-- ENDIF -->

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

<!-- EVENT overall_header_head_append -->
So habe ich nicht die ganzen .css-Dateien aufgelistet. Ich finde es auch übersichtlicher.
Benutzeravatar
Talk19zehn
Ehemaliges Teammitglied
Beiträge: 4909
Registriert: 08.06.2009 12:03
Kontaktdaten:

Re: [3.2] [3.2.1] [DEV] Modern

Beitrag von Talk19zehn »

Hi, kann es zutreffend sein, dass dein DL nicht der aktuellen Version entspräche?
Mein *DL ist vom 02.10.2017, 11:29 Uhr und deinerseits erwähnte gestrige Änderungen, sind darin jedoch nicht enthalten (?) ...
Ist das richtig?
Ja, weil die Datei von gestern Abend ist und ich erst heute den Eintrag entfernte.
:-? viewtopic.php?p=1373562#p1373562

Ich frage mich, wer in der Lage ist, den Überblick zu behalten, um Abhilfe zu leisten. Sorry, *hier passt augenscheinlich etwas nicht zusammen ... :oops: , - oder?

Schaue bitte nochmals, prüfe, wo es hakt.

LG und Dank
Beste Grüße
phpBB3 Designs: Stylearea Ongray-Designs
Benutzeravatar
Melmac
Ehemaliges Teammitglied
Beiträge: 3623
Registriert: 15.10.2012 03:27

Re: [3.2] [3.2.1] [DEV] Modern

Beitrag von Melmac »

Wären ein paar Tipps zum Vorgehen beim Entwickeln okay, damit es für Dich und uns übersichtlicher und leichter nachvollziehbar bleibt?
Handle nur nach derjenigen Maxime, durch die du zugleich wollen kannst, dass sie ein allgemeines Gesetz werde.
(Immanuel Kant)
Lehrling
Ehemaliges Teammitglied
Beiträge: 3833
Registriert: 15.01.2012 20:00
Kontaktdaten:

Re: [3.2] [3.2.1] [DEV] Modern

Beitrag von Lehrling »

Dass dein Hintergrundbild in der headerbar nicht mitzoomt (nicht responsiv ist) liegt übrigens daran, dass du deiner headerbar eine feste Höhe von 220px; zugewiesen hat. Das Bild "orientiert" sich daran. Das background-size: cover; funktioniert nur, wenn keine festen Breiten oder Höhen definiert wurden.
Benutzeravatar
Talk19zehn
Ehemaliges Teammitglied
Beiträge: 4909
Registriert: 08.06.2009 12:03
Kontaktdaten:

Re: [3.2] [3.2.1] [DEV] Modern

Beitrag von Talk19zehn »

Hi Melmac, wen meinst du denn jetzt? Mich? Auweia...

Mein Tenor war, etwas anzukündigen, was zu der Zeit der Ankündigung offenbar noch gar nicht vollzogen war/ist/wurde. Jedenfalls bis zu dem zeitlich benannten DL.

LG
Zuletzt geändert von Talk19zehn am 02.10.2017 17:57, insgesamt 1-mal geändert.
Beste Grüße
phpBB3 Designs: Stylearea Ongray-Designs
Verschoben von Styles in Entwicklung nach Styles, Templates und Grafiken am 02.11.2017 10:42 durch Melmac

Antworten

Zurück zu „Styles, Templates und Grafiken“