[3.2] [3.2.1] Modern

[Tastenplayer]

Und ja, wer in der Klasse Headerbar neben background-image: none; Anpassungen nutzt, kann dann wunderbar agieren. Das stimmt und war/ist mir nicht unbekannt, gar entgangen.

Also ich hab das immer betont, dass es eben headerhintergrundbild plus 1 Logo ist! Im Style war von anfang an das Logo + das Headerhintergrundbild.
Da liegt ja auch das Problem, dass es eben schwierig ist mit dem responsiven da Headerbild plus Logo(steht mehrfach!) Kein Problem, damit es ein für allemal klar ist: [ externes Bild ] Nur es ist eben in 3.2.1 schwierig mit Bild plus Logo.

Dein Headerbild ist der Hit! - aber eben kein Platz für Logo mehr. Irgendwo sollte ja auch noch das Logo hin oder ist das Header ohne Logo?
Wäre schon gut - jedoch dann kann man entweder diesen Header lassen oder muss eben was ganz Eignes machen, was auch nicht jedermanns Sache ist.

Was das nun phpBB.com zu tun hat, kapiere ich nicht

Hab ich auch geschrieben: Betreffend Beitrag-Headerbanner responsiv. Klappt aber eben so in 3.2.1 nicht mehr!

Mir ist es jetzt irgendwie auch grad vergangen - Zeit ist bei mir momentan auch Mangelware. Man kann machen was man will - es ist doch irgendwie falsch.

[Talk19zehn]

Nein, es ist alles da was du brauchst, da ist nix falsch. "YOUR LOGO" heißt bei mir nun "Welcome", um die Anwender nicht auf eine falsch Fährte zu schicken und diejenigen, die sich auskennen, werden allein optimieren. Supporten musst du oder du findest Helferlein, die das Konzept verstehen.
Ich nutze 3.2.1 und bedenke, dass das Konzept "graphitmodern" alles soweit beinhaltelt, was u.a. den Headerbereich betrifft. Wir arbeiten hier doch für Drítte und weder für dich noch für mich.

Du möchtest ein Design entwickeln, welches du gerne anbieten magst.

Bedenke, dass du für dich auf deiner Seite auch Anpassungen treffen musst, sofern dies erforderlich ist. Das sind "Zwei Paar Schuhe". Vergiss das bitte nicht. Du kannst nicht dein modifiziertes Prosilver zur Hand nehmen, du brauchst eine solide nicht modifizierte Oberfläche.

Deine Ideen sind nicht neu, dies ist richtig, - sie lassen sich auch in einem phpBB 3.2.1 unterbringen, wenn ich dein Konzept verstanden habe. Wer das Gegenteil sagt, hat nicht grundsätzlich recht. Das Konzept entscheidet!

Lasse mal den Kopf nicht hängen....

LG


P.S.: Wenn du keinen Child-Style erstellen möchstest, ist die overall_header, simple_header und das Stylesheet anders zu erfassen. Schaue es dir ganz in Ruhe und ganz genau an. Du schaffst das.

Grüße

[Tastenplayer]

Es gibt mit dem Style nur ein riesen grosses Problem:

In der Forenübersicht ist alles in Ordnung. Jedoch sobald man ein Forum öffnet, hört der Style nicht auf zu laden. Das ist auch bei Deinem Style der Fall. Gut könnte an meinem PC liegen - jedoch es ist bei keinem anderen Style so. Noch nicht mal beim Weihnachtsstyle mit den zig Grafiken! Selbst bei meinem zuerst angefangen Style "Extremo", der nun auf Eis liegt, ist dem nicht so.

Ich hab komplett neuen Prosilver eingeladen und umbenannt in "Testo_modern" bis jetzt noch kaum was in den Dateien geändert. Es ist trotzdem bereits wieder so. Dachte es könnte am Wrapborder liegen, den also komplett entfernt. Hat sich nichts geändert. Seit 30Minuten heisst es: "Warten auf localhost - Übertragen der Daten".
Da ich bisher nur in der color.css Änderungen durchführte und gerade mal bis zur Zeile 133, finde ich das schon abnormal.Ich habe diesmal extra die Originaldateien belassen und bisher auch nur Farbänderungen gemacht, nichts anderes! (Es hat gerade mal den Header, Wrap, Nav Header und Footer sowie die Icons in der style.css)

Doppelt komisch, da es in Deinem Graphitmodern eben auch der Fall ist! Ist mir gestern erst richtig aufgefallen. Dachte zuerst es sei normal, wenn ich komplett neuen Style bearbeite [ externes Bild ]
Es ist auch kein Firefox-Problem: ist in allen Brwosern bei mir so.

@Talk19zehn
Mit dem Header Banner hast du vermutlich recht. Die Zeit der "Kleinlogos" ist bei den meisten Benutzern vorbei. Vermutlich könnte man wirklich den ganzen Header als Banner-Logo belassen und das "Klein-Logo" eliminieren! Wer sein eigenes Logo drauf möchte, muss dann halt eben komplett neues Bild erstellen. Ist ja bei vielen Styles so.
Ich dachte mir eben nur, dass nicht jeder darin gut ist, weshalb es besser wäre ein Hintergurndbild + Logo. Dann kann jeder selber entscheiden was er möchte und was eben nicht.

[Talk19zehn]

Moin, moin, - das dauerhafte Laden kann ich nicht bestätigen. Ich habe soeben noch eine Idee eingebaut, so dass der Anwender umschalten kann:
Nur mal das HTML (Auszug) ...

Code: Alles auswählen

		<div class="headerbar" role="banner">
		<!-- EVENT overall_header_headerbar_before -->
			<div class="inner">
				<div style="display: none;">
					<div id="tpsitetext-orlogoonheaderbar">
						<a href="<!-- IF U_SITE_HOME -->{U_SITE_HOME}<!-- ELSE -->{U_INDEX}<!-- ENDIF -->" title="<!-- IF U_SITE_HOME -->{L_SITE_HOME}<!-- ELSE -->{L_INDEX}<!-- ENDIF -->"><img src="{T_THEME_PATH}/images/site_logo.png" class="sitelogo-responsive" alt="" /></a>
						<p class="skiplink"><a href="#start_here">{L_SKIP}</a></p>
					</div>
				</div>
					<div style="display: block;">
						<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 sitelogo-responsive"></span></a>
							<p class="skiplink"><a href="#start_here">{L_SKIP}</a></p>
						</div>
					</div>
			</div>
		<!-- EVENT overall_header_headerbar_after -->
		</div>

In Abhängigkeit also umschaltbar: <div style="display: none;"> - <div style="display: block;">, je nach Belieben und erst einmal nur zum Testen gedacht.

Ein Testlogo von 420x149px ist auch drinnen, damit du siehst, beurteilen kannst, was geschieht (auch responsive). Dein Ansatz einen Zusatz-Text auszugeben (headerbar) und diesen dann phpBB-konform zu verlinken ist zwar nicht neu, jedoch immer wieder gut. Das neue Päckchen von heute habe ich dir nun per PN erneut zur Verfügung gestellt.

Die Idee, die du umsetzen möchtest, ist also faktisch weder falsch oder ungeeignet. Die Suche nach Lösungsansätzen, die phpBB-konform sein müssen, ist halt u.U. schwer oder schwieriger als gedacht.

*Außerdem sitze ich noch an der anderen Lösung, die allerdings seinerzeit vom [ALPHA] - und dann [DEV] - Status für "Modern" ausging (01.10.17, 02.10.17).

Grüße


P.S.: Ich bitte um Verständnis ...
* Das wurde meinerseits nun erst einmal mangels Download und Demo auf´s Eis gelegt.

[Tastenplayer]

Moin, moin, - das dauerhafte Laden kann ich nicht bestätigen.

Sehr komisch, das habe ich sonst nie! Na ja vielleicht gibt meine Kiste bald den Geist auf und das dann wie immer im unpassendenst Moment.

Hier mal ein extrem krass Resultat - Farbe würden allerdings bei ul.forums so stimmen. Aber eben (ich hab schon Tränen in den Augen) [ externes Bild ] Gut, wenns in li.row keine Farbe hätte, wärs gar nicht mal so schlimm. Schwarzen Rand wäre da wohl passender.

[Joyce&Luna]

Mal kurz mein Veto dazu.

Ihr jetzt einen komplette Style mit Lösungen zu geben, da lernt sie ja nichts von.
Sie wird später Probleme haben diesen dann zu supporten.

Man sollte ihr lieber alles zu erklären wie was funktioniert und was man darf und was nicht.
Wenn sie jetzt diesen Style übernimmt, ist es nicht mehr ihr Style, sondern der von dir.
Sicher sind die Dinge gut die du ihr da gibst, aber dennoch ist das ja nicht Sinn der Sache oder?
Sie möchte es ja selber schaffen und nicht das man ihr ein Style fertig präsentiert.

Ich habe auch die Lösung hier vorliegen, wo headerbar und Logo responsiv sind.
Aber ich sage mir auch, viel Köche verderben den Brei. Die Ansätze dazu habe ich ihr schon geschrieben, nur umsetzen muss Jutta das schon selber.

Verstehe das jetzt nicht falsch, denn es ist absolut nicht böse gemeint.

Anke

[Talk19zehn]

Guten Tag, Tatsache ist, dass sie gar nichts abschreibt und wie erwähnt, das Design ein Muster in der seinerzeit von ihr anvisierten dunklen Variante ist und sowieso einen anderen Namen trägt. Sie kann schauen und vergleichen, woran es sodann liegt oder was sie ändern bzw. umsetzen könnte. Das ist demnach nichts anderes als augenscheinlich ein Austausch per PN, den ihr wahrnehmt. Und wenn ihr das Logo oder der eine oder andere Ansatz gefällt, kann sie ihn nutzen, denn ich schenkte ihr das Konstrukt. Ob es ihrerseits parallel genutzt werden würde, steht doch gar nicht zur Diskussion. Sie kann diesen auch in die Tonne hauen ....

Böse verstehe ich etwas grundsätzlich nicht. Ich denke jedoch, dass man hier nicht seitenlange Abhandlungen und Codierungen verfassen kann, wenn kein Design zur Verfügung steht, welches man durchforsten könnte, um ihr Sachverhalte zu erklären.

Ein Muster tut es alle Male auch und sie wird die Inhalte schon verstehen. Sie macht das doch ganz gut und wird uns ihr fertiges Design sicherlich irgendwann vorstellen. Sehen wir weiter und machen ihr Mut, das ist wichtig, denke ich. Anhand von Grafiken kann ich schlecht agieren, zumal sich ihr Entwicklungsstatus doch logischerweise stetig ändert.

Du kannst es doch tun, so lernen wir von dir alle gleichermaßen.

Beste sonntägliche Grüße

[Tastenplayer]

Ja und damit wieder mal Freude und Spass einkehrt in diesem Thema [ externes Bild ](Logo ist klaro nicht angepasst - ist logo zu platt der Header - Bild müsste auch irgendwie auf eine Rolle geklebt werden )

Und jetzt mit Kombination: Style Modern_extremo [ externes Bild ]

[Melmac]

Der Feude und Spass Teil:

Wenn das Hintergrundbild (Dein "Logo") und diese "Your Logo"-Grafik parallel/gemeinsam und ohne Verzerrungen skalieren sollen, sodass deren Proportionen aufeinander abgestimmt bleiben, dann musst Du etwas tricksen und den Bereich der Headebar umbauen.

Schau mal hier - noch ein weiterer Ansatz - der, der von Talk19zehn mit dem Stichwort "Spacer-Gif" angerissen wurde:

[ externes Bild ]

[ externes Bild ]

[ externes Bild ]

[ externes Bild ]

[ externes Bild ]

[ externes Bild ]

Ob da jetzt nur eine weitere Grafik (= "Your Logo") eingefügt wird oder mehrere, bleibt sich bei diesem Ansatz gleich: es können so viele sein, wie sich dort sinnvoll unterbrngen lassen bzw. bei kleineren Auflösungen noch erkenn-/lesbar sind.
Einzige Vorgabe hierbei: keine von ihnen darf eine größere Höhe als diese Hintergrundgrafik haben, die Du als Logo bezeichnest. Wenn doch, muss zumindest eine von beiden entsprechend angepasst werden.

Um den entsprechenden Beitrag von Talk19zehn etwas ausführlicher zu übersetzen (sie hat ja bereits das Wesentliche angeführt):

Die Klasse Headerbar wächst mit ihrem Inhalt

Genau das ist der Knackpunkt der ganzen Sache.
Bleiben wir mal bei der Höhe einer DIV:
Um diese zu definieren hast Du in diesem Zusammenhang u.a. folgende theoretisch möglichen Werteangaben für height:

1. Du lässt diese Eigenschaft ganz weg: dann wird es so behandelt, als ob dort "auto" stünde. Die Berechnund der anzuzeigenden Höhe übernimmt der Browser.
2. Wert in Pixel: damit wird dieser Wert festgeschrieben und und ändert sich auch nicht mehr
3. Wert in Prozent: die Höhe berechnet sich dann ausgehend von der Höhe des übergeordneten Blocks - hier geht es aber um einen untergeordneten Block, der seine Höhe dann aus der Höhe dieser DIV ableiten soll ...
4. Wert "auto": siehe (1)

Problem bei (2): die Höhe ist jetzt "festgenagelt" ... sie bleibt so, egal was Du später noch in sie einfügen wirst. => in Deinem Fall ist das nicht brauchbar.
Problem bei (1) und (3): hier orientiert sich jetzt die Höhe der DIV an der Höhe des "höchsten" (Block-)Elementes, das in ihr enthalten ist => ändert sich diese, ändert sich auch die angezeigte Höhe der DIV entsprechend, ansonsten eben nicht.

Wenn "responsiv" bedeutet, dass auch die Proportionen (= Verhältnis der Höhe zur Breite oder umgekehrt) zweier Elemente erhalten bleiben sollen, dann kannst Du für die Höhe der Headerbar nur mit height: auto; arbeiten.

Fazit bisher: responsiv wird es in solch einer Konstellation nur dann werden können, wenn Du einen Weg findest, das untergeordnete (Block-)Element innerhalb der DIV zum Skalieren in Abhängigkeit zur Displayauflösung zu bringen.
[Anmerkung: eine Hintergrundgrafik (der DIV via background-image: .....; zugewiesen) ist Teil der DIV selbst und kein solches untergeordnetes Element: sie hat keinen Einfluss auf die Dimensionen der DIV.
Kannst es ja mal ausprobieren: erstelle eine ansonsten leere DIV, formatiere sie nur mit einer feste Breite in Pixeln zu und setze die Höhe auf "auto" -
Du wirst sie trotz Hintergrundgrafik nicht sehen. Es ist ja nichts in ihr enthalten, ergo wird ihre abgeleitete eigene Höhe automatisch "0" sein müssen ]

Es gälte hier also einen Weg zu finden, die z.B.enthaltene Logo-Grafik zum responsiven Skalieren zu bringen - und zwar deren Höhe ... womit wir aber nur wieder bei der gleichen Fragestellung wie oben bereits landen
Kurz gesprochen: es geht hier (Hintergrund- und Logografik sollen proportional zueinander skalieren) nur dann, wenn das "Logo" (bzw. die Grafik, die das Logo transportieren soll) die gleichen Abmessungen hat wie die Grafik, die Du für den Hintergrund verwendest und am Ende die volle Breite der Headerbar Ausfüllt
Einfach alle Bereiche, die nicht die Hintergrundgrafik überdecken sollen, auf transparent setzen, so dass nur das eigentliche Logi sichtbar bleibt.
(Eine entsprechend vorbereitete "Leergrafik", in die der Anwender sein eigenes Logo einfügen kann, kannst Du ja mitliefern.)

Die Grafikdatei am besten in einer eigenen DIV unterbringen, die innerhalb derjenigen der Headerbar angeordnet ist.
Der brauchst Du dann nur noch als Breite "100%" und als Höhe "auto" zuzuweisen. Jetzt skaliert sie proportionserhaltend mit der Auflösung - und über sie dann auch die DIV der Headerbar mit der Hintergrundgrafik.
Diese über "background-size: contain;" formatieren, um auch die letzte Chance für (theoretisch noch) mögliche Verzerrungen zu eliminieren.

Welche CSS-Anpassungen sonst noch erforderlich sein könnten, hängt von Deinem verwendeten Code ab.
In diese mit transparentem Hintergrund angelegte Vorlagengrafik kannst Du dann auch mehr wie nur ein "Logo" einbinden.

Dies dürfte für Dich/Deinen Style ebenso die einfachste Lösung sein wie für potenzielle Anwender, die diesen Bereich optisch individuell gestalten wollen.

[Melmac]

Der nicht ganz so Freude und Spass Teil:

@Joyce&Luna

Sie möchte es ja selber schaffen und nicht das man ihr ein Style fertig präsentiert.

Dann dürften ihr hier aber, konsequent zuende gedacht, auch keine fertigen Codes mit Lösungen eingestellt werden - imgrunde genommen sogar: erst recht keine

Ihr jetzt einen komplette Style mit Lösungen zu geben, da lernt sie ja nichts von.

Wenn sie jetzt diesen Style übernimmt, ist es nicht mehr ihr Style, sondern der von dir.

Das gleiche gilt aber auch für diese ausgearbeiteten Codes ... logisch zuende gedacht.
Style vs. Codeschnipsel? Beim Style-Ansatz hat es aber einen weiteren Lerneffekt, der mit Codeschnipseln alleine nicht zu erzielen ist: man kann so lernen Code zu lesen - und zwar im Kontext des "Gesamtsystems Style".
Man sieht nicht nur den geänderten oder hinzugefügten Code selbst, sondern auch, wie er in Relation zu den umgebenden Elementen positioniert ist, wie mögliche Zusammenhänge, Wechselwirkungen oder gegenseitige Abhängigkeiten aussehen könnten usw. usf.

Gerade die Sache mit der Responsiveness ist nicht ohne und reichlich tricky. Die Basis aller 3.2.x-Styles, prosilver, ist auch nicht wirklich eine "optimale" Ausgangsbasis hierfür: gerade wenns ums responsive Gestalten von dessen Headerbereich geht, fällt es auf, dass seine Struktur wohl eher nur "gepatched" statt grundlegend hierfür überarbeitet wurde. Nicht nur für Anfänger wirds da kompliziert und undurchschaubar ...

Aber ich sage mir auch, viel Köche verderben den Brei.

Es ist hier nicht die Anzahl der Köche, die es so problematisch macht (es sei denn, Du sähest sie gerne auf 1+1 reduziert): die Crux ist, dass hier mehrere "Köche" nicht am gleichen Brei operieren können, weil jeder nur einen Teil von ihm sehen kann und keiner mitbekommt, was welcher der anderen mit wem am Rezept und damit am zu bekochenden Brei im stillen Kämmerlein inzwischen vielleicht wieder geändert hat.

Für diese Situation kannst Du aber Talk19zehn nicht die Verantwortung zuschieben - grundsätzlich unterscheidet sich Dein eigenes Mitwirken als Koch auch nicht wirklich von ihrem.

Der Ausweg heißt schlicht und ergreifend: der Brei muss für alle gleichermaßen sicht- und greifbar auf den Tisch kommen und jeder Rezeptvorschlag/Kochschritt für alle einsehbar sein.
Als Alternative bliebe ansonsten nur noch eines: Tastenplayer und ein ausgewählter Koch kochen den Brei alleine und im stillen Kämmerlein und präsentieren hier nur noch das Endergebnis.


Vor allem aber würde ich gerne mal eines zu Bedenken geben - aus Sich eines mitlesenden "normalen Benutzers dieses Forums:
In diesem Thema in diesem Forumsbereich lesen auch andere Benutzer mit - die sich vielleicht selbst mit diesen oder ähnlichen Fragen herumschlagen und nach Lösungen/Hilfe suchen.
Gerade für sie wäre dies hier, wenns denn endlich mal geordnet und transparent ablaufen würde, eine gute Gelegenheit, selbst Antworten zu finden, selbst mitzulernen.
Ohne den Code und die zugehörige Kommunikation darüber geht das aber ebenso wenig wie das Beantworten der hier gestellten Fragen.

Ich kann einfach keinen sachlichen Grund erkennen, warum der Code des Styles jetzt unbedingt verborgen bleiben soll, sorry.
Der Style ist noch in Entwicklung, es gibt genügend offene Frage zu einzelnen Details oder Problemen - in diesem Stadium ist das doch aber völlig normal! Bei jedem Styleautoren!

Gerade für mich als Anfänger in Sachen Styleerstellung wäre es dann doch gut, wenn möglichst früh möglichst viele Interessierte ihn testen, ihn prüfen und/oder alternative Lösungswege einbringen könnten.
Umso mehr und umso schneller lerne ich doch dann ...
(SassySilver ist ebenfalls noch unrund, hat Fehler (kleine und große, Schludrigkeiten und "Eseleien") und unsauberen Code - so what!)