suche einfach gestrickten 3.1.6 Style

[ZNC]

Hallo in die Runde,

ich bekomme es nicht hin, den prosilver-Style so zu modifizieren, dass er für meine Seite paßt. Wenn ich eine Stelle passend gemacht habe, haut es dann an anderer Stelle raus. Ich suche nach einem Style,

der nicht so verzahnt ist und der
ohne feste Positionierungen arbeitet,
wenig Grafik hat,
wenig CSS-Klassen hat.

Gibt es einen derartig einfachen Style für phpBB?

[Talk19zehn]

Hi, einfach sind sie erfahrungsgemäß allesamt nicht. Der Quelltext seitens phpBB hat es in sich .... Eventuell ist ongraysimple für dich geeignet?
http://www.ongray-design.de/stylearea31/index.php
Jedoch hat auch jenes Design seine Besonderheiten, die man auf den ersten Blick nicht erkennt.

Die Style-DB auf phpBB.com kennst du sicherlich schon (achte auf die phpBB-Version): https://www.phpbb.com/customise/db/styles-2

Viele Grüße

[Kirk]

Hallo
Da die meisten Styles auf Prosilver basieren, wird es schwierig einen einfachen Style zu finden.
Schau dir einfach mal gewisse Styles an evtl. findest du einen der dir gefällt.
Eine Auswahl an Styles findest du hier:

• viewforum.php?f=154
• https://www.phpbb.com/community/viewforum.php?f=531
• https://www.phpbb.com/community/viewforum.php?f=476
• http://www.ongray-design.de/stylearea31/index.php

Eine andere Möglichkeit währe die Jobbörse, es gibt für die Browser sogenannte Entwicklertools siehe dazu: KB:html_css_finden

[ZNC]

Bis auf "PBTech Style" ähneln alle ausnahmslos dem prosilver, auch "ongraysimple". Es wird nur mit den Farben und den Grafiken variiert und dies zu ändern ist keine große Herausforderung , man muss nur in der colours.css die Anpassungen vornehmen. Die Seite von meinem Mann ist fast tot (eigentlich war sie noch nie lebendig), auch habe ich kein Geld für eine Auftragsvergabe, das wäre Spatzen und Kanonen.

Ich möchte z.B. die Forenbezeichnungen auf volle Seitenbreite bringen andere Inahlte sollen zentriert gewrappt bleiben, das Logo und das Floating soll je nach Bildschirmgröße (je nach Breakpoint) sich verkleinern, die Anmeldung und ähnliche Formulare sollen komplett anders aussehen, die gesamten Grafiken will ich nicht, ich möchte auch mit Breiten von 320 px arbeiten können etc. ...

Schade, das es kein phpBB HTML- und CSS-Grundgerüst für "Bekloppte" wie mich gibt, die bereit sind, etwas mehr Zeit in das Layout zu investieren und es als Anlass nehmen, CSS und HTML gründlich zu lernen.
Ein Grundgerüst das kein Float, kein position absolut + relative benutzt, ein ul-/li/dt-/dl-/dd-Element und inline- und Block-Element auch als solche stehen läßt: ein rudimentäres phpBB-Layout-Grundgerüst eben.

SCHADE.

[ZNC]

Gibt es eigentlich eine Möglichkeit, je nachdem wo man sich befindet, den Style automatisch umzuschalten? Also
im normalen Mitgliedsbereich eigenen Style zu verwenden und
im Moderations-/Administrationsbereich prosilver?

[Talk19zehn]

Hallo, Style für phpBB3.1.x sind responive, also mobiltauglich. Darum wundere ich mich ...

...(...)... das Logo und das Floating soll je nach Bildschirmgröße (je nach Breakpoint) sich verkleinern, die Anmeldung und ähnliche Formulare sollen komplett anders aussehen, die gesamten Grafiken will ich nicht, ich möchte auch mit Breiten von 320 px arbeiten können etc. ...

Alles machbar ...

Welche phpBB-Version nutzt du denn wirklich? Was steht im ACP?
Jenen Artikel der KB: https://www.phpbb.de/kb/create31style
... darin Theme-Vererbung ...., kennst du bereits?
"Absolut und relative zu positionieren" ist ja nicht neu und ein großartiges Mittel, Inhalte zu positionieren. Bei "ongraysimpel" mag es so ausschauen, dass das Handling einfach wäre. Ist´s jedoch nicht grundsätzlich. Auch steckt in dem Style die Tücke im Detail. CSS macht´s eben möglich. Das Design "PBTech Style" ist im Handling wesentlich schwerer, da darin m.E. weitere Extension verschachtelt werden.



LG

Edit: Es gibt auch Designs, die Schriftfamilien anstelle von Grafiken verwenden (vgl. Style-DB auf der Mutterseite und den jeweiligen Support).
Da phpBB-3.1.x (noch) vorgibt mit/ab dem IE8 kompatibel zu sein, ist es für Styleautoren nicht immer einfach, Konzepte zu realisieren.

[ZNC]

Hatte ich in der Überschrift angegeben: 3.1.6.

Responsive ist er ja, aber: ist es nicht so, dass in CSS verdrahtete background-images bei jedem Seitenaufruf neu geladen werden? Mein Mann möchte den Marlin bei breitem Viewport (so nennt sich das ja oder?) auf entweder halbe Bildschirmbreite oder bei 320 px Viewport auf 320 px haben. Zwischen 900px und 320px sind einige Bytes unterschied. Das war eine Überlegung.

Absolut und relativ zu positionieren ist ja nicht neu und ein großartiges Mittel, Inhalte zu positionieren.

Das man nicht mit Tabellen zum Zwecke der Positionierung arbeiten soll ist sogar bis zu mir durchgedrungen, wenn ich aber an einer dieser Schrauben bei prosilver drehe blicke ich über die Konsequenzen nicht durch und es hat Konsequenzen! Nachfolgend Auszüge aus den Bereichen aus common.css, links.css, content.css, buttons.css, forms.css, colours.css, imageset.css und responsive.css, die Floaten und Positionierung nutzen:

Code: Alles auswählen

.button {position: relative;} aus: buttons.css
.button.responsive-menu-link:before {background-position: -191px 0;} aus: buttons.css
.button.responsive-menu-link:hover:before {background-position: -191px -21px;} aus: buttons.css
.buttons {float: left;} aus: buttons.css
.buttons .button {float: left;} aus: buttons.css
.contact-icons a {float: left;} aus: buttons.css
.delete-icon:before {background-position: -152px 0;} aus: buttons.css
.delete-icon:hover:before {background-position: -152px -21px;} aus: buttons.css
.dropdown-select:after {background-position: -103px 10px;} aus: buttons.css
.dropdown-select:after {position: absolute;} aus: buttons.css
.dropdown-select:after {right: 0;} aus: buttons.css
.dropdown-select:after {top: 0;} aus: buttons.css
.dropdown-visible .dropdown-select:after {background-position: -103px -10px;} aus: buttons.css
.dropdown-visible .modtools-icon:before {background-position: -225px -20px;} aus: buttons.css
.dropdown-visible .tools-icon:before {background-position: -80px -20px;} aus: buttons.css
.nojs .dropdown-container:hover .dropdown-select:after {background-position: -103px -10px;} aus: buttons.css
.nojs .dropdown-container:hover .modtools-icon:before {background-position: -225px -20px;} aus: buttons.css
.nojs .dropdown-container:hover .tools-icon:before {background-position: -80px -20px;} aus: buttons.css
.post-buttons .dropdown {top: 18px;} aus: buttons.css
.dropdown {left: 0;} aus: common.css
.dropdown {position: absolute;} aus: common.css
.dropdown {top: 1.2em;} aus: common.css
.dropdown .dropdown-contents {position: relative;} aus: common.css
.dropdown .pointer {left: 10px;} aus: common.css
.dropdown .pointer {position: absolute;} aus: common.css
.dropdown .pointer {right: auto;} aus: common.css
.dropdown .pointer {top: 0;} aus: common.css
.dropdown .pointer-inner {bottom: -11px;} aus: common.css
.dropdown .pointer-inner {left: -10px;} aus: common.css
.dropdown .pointer-inner {position: absolute;} aus: common.css
.dropdown .pointer-inner {top: auto;} aus: common.css
.dropdown li {float: none !important;} aus: common.css
.dropdown-button-control .dropdown {top: 24px;} aus: common.css
.dropdown-button-control.dropdown-up .dropdown {bottom: 24px;} aus: common.css
.dropdown-button-control.dropdown-up .dropdown {top: auto;} aus: common.css
.dropdown-container {position: relative;} aus: common.css
.dropdown-container-left {float: left;} aus: common.css
.dropdown-container-right {float: right;} aus: common.css
.dropdown-container.topic-tools {float: left;} aus: common.css
.dropdown-extended .dropdown-contents {position: absolute;} aus: common.css
.dropdown-extended .header .header_settings {float: right;} aus: common.css
.dropdown-extended ul li {float: none;} aus: common.css
.dropdown-extended ul li {position: relative;} aus: common.css
.dropdown-left .dropdown {left: auto;} aus: common.css
.dropdown-left .dropdown {right: 0;} aus: common.css
.dropdown-left .dropdown .pointer {left: auto;} aus: common.css
.dropdown-left .dropdown .pointer {right: 10px;} aus: common.css
.dropdown-page-jump .dropdown {top: 20px;} aus: common.css
.dropdown-page-jump.dropdown-up .dropdown {bottom: 20px;} aus: common.css
.dropdown-up .dropdown {bottom: 1.2em;} aus: common.css
.dropdown-up .dropdown {top: auto;} aus: common.css
.dropdown-up .pointer {bottom: 0;} aus: common.css
.dropdown-up .pointer {top: auto;} aus: common.css
.dropdown-up .pointer-inner {bottom: auto;} aus: common.css
.dropdown-up .pointer-inner {top: -11px;} aus: common.css
.dropdown.live-search {top: auto;} aus: common.css
.nojs .dropdown-extended .dropdown-contents {position: relative;} aus: common.css
.nojs .pagination .dropdown-container:hover a.dropdown-trigger {background-position: 0 -18px;} aus: common.css
.nojs .rightside .dropdown {left: auto;} aus: common.css
.nojs .rightside .dropdown {right: 0;} aus: common.css
.nojs .rightside .dropdown .pointer {left: auto;} aus: common.css
.nojs .rightside .dropdown .pointer {right: 10px;} aus: common.css
.pagination .dropdown-visible a.dropdown-trigger {background-position: 0 -18px;} aus: common.css
li.responsive-menu.dropdown-left .dropdown {right: -6px;} aus: common.css
li.responsive-menu.dropdown-right .dropdown {left: -9px;} aus: common.css
ul.linklist .dropdown {top: 22px;} aus: common.css
ul.linklist .dropdown-up .dropdown {bottom: 18px;} aus: common.css
ul.linklist .dropdown-up .dropdown {top: auto;} aus: common.css
.dropdown-extended a.mark_read {background-position: center center;} aus: links.css
.dropdown-extended a.mark_read {position: absolute;} aus: links.css
.dropdown-extended a.mark_read {right: 0;} aus: links.css
.dropdown-extended a.mark_read {top: 50%;} aus: links.css

... usw. INSGESAMT 273 Stlyevorgaben für das Suchkriterium
float
position
left
right
top
bottom

PS: Danke

[Talk19zehn]

Hintergrundgrafiken für forabg oder forumbg kannst du sicherlich auskommentieren oder löschen, ggf. ein repeat-x zusätzlich benötigen. Es kommt auf das Style an.
In 3.1.6 sind zahlreiche Hintergrundgrafiken bereits durch Farbverläufe ersetzt worden.
Einige Klassen benötigen ein background-image, wie bspw. Quote oder Kontaktdaten. Die Forumimages signalisieren dem Benutzer nicht nur innerhalb der Sitzung die Themen-, bzw. Beitragseigenschaft (gelesen, ungelesen, gesperrt usw.). Die Mini-Icons machen aus meiner Sicht Sinn, da sie nicht nur beim Navigieren zweckmäßig sind. Aber das weißt du ja.
Wenn ich es korrekt deute, werden sich hinsichtlich der Mini-Icons mit phpBB-3.2 (Ver)Änderungen durchsetzen, - wissen tue ich es nicht genau.

Das habe ich leider nicht verstanden:

Mein Mann möchte den Marlin bei breitem Viewport (so nennt sich das ja oder?) auf entweder halbe Bildschirmbreite oder bei 320 px Viewport auf 320 px haben.

Test: http://bradfrost.com/demo/ish/?url=http ... pBB%2F#318

Die Breite für das Forum (Desktop) wird einerseits in der common.css #wrap definiert. Sie passt sich - vgl. parallel responsive.css auch mobil an - an. Für mich liest es sich so, dass er die Seiten mobil nicht nutzen kann, - ist das richtig?

Grüße

[ZNC]

@Talk19zehn,

ich habe mir die Stylevorgaben aus allen css-Dateien von prosilver in eine Access-Datenbank eingetragen. Meine Ambition war, bei Änderungen einen besseren Durchblick zu erhalten - hat nichts gebracht. Nachdem wir nun hier festgestellt haben, dass es kein rudimentäres style, mit dem man hätte besser aufsetzen können gibt, versuche ich zumindestens den page-header anzupacken.

Die Mini-Icons machen aus meiner Sicht Sinn, da sie nicht nur beim Navigieren zweckmäßig sind. Aber das weißt du ja.

Inwieweit Icons, ob nun groß oder mini, Sinn machen, darüber kann man diskutieren. Ich bevorzuge soweit als möglich textuelle buttons und links.

Für mich liest es sich so, dass er die Seiten mobil nicht nutzen kann, - ist das richtig?

Nein, er kann die Seiten mobil nutzen. Für meinen Mann habe ich einen Marlin gezeichnet, den er als Logo auf seiner Seite groß verwenden will. Das grosse Logo hat ab 770-er Viewport eine Größe von 365 KB und das kleine Logo 95 KB, 270 KB Unterschied. Hinzu kommen die diversen weiteren Grafiken. Diese müssen jedesmal, wenn die Seite neu aufgebaut wird, über die Leitung. Bei Handy's macht sich die Menge an Grafikdateien und auch ihre Größe in der Ladezeit einer Seite bemerkbar, oder bin ich auf dem falschen Trampelpfad?

Das habe ich leider nicht verstanden:

Deshalb dachte ich, mehrere Breakpoints (siehe: https://de.wikipedia.org/wiki/Responsive_Webdesign)
<link href="./theme/ZNC_balikcilar_320.css" rel="stylesheet" media="all and (max-width: 479px)">
<link href="./theme/ZNC_balikcilar_480.css" rel="stylesheet" media="all and (min-width: 480px) and (max-width: 649px)">
<link href="./theme/ZNC_balikcilar_650.css" rel="stylesheet" media="all and (min-width: 650px) and (max-width: 769px)">
<link href="./theme/ZNC_balikcilar_770.css" rel="stylesheet" media="all and (min-width: 770px)">
<link href="./theme/ZNC_balikcilar_floaten.css" rel="stylesheet" media="all and (min-width: 970px)">
würden Sinn ergeben, aber davon komme ich immer mehr ab. In diesem Zuge habe ich gelernt, dass prosilver kein responsives sondern ein adaptives Design hat.

Mir ist ja im Zuge dieses Thread die Frage gekommen, ob man die Möglichkeit hat, einen automatischen Schalter zu verwenden, der es vom Layout her ermöglicht, zwischen Userbereich und Moderations-/Administrationsbereich zu trennen? Kennst Du da einen Trick?

[Lehrling]

Die neuen Styles von Arty gehen so in die Richtung dessen, was du suchst: http://www.artodia.com/phpbb-styles/

Ansonsten kannst du dein eigenes Stylesheet auch als Erweiterung einbinden und damit die anderen Stylesheets überschreiben. Du musst also nicht zig Stylesheets bearbeiten, sondern die Änderungen, die du gerne machen möchtest, in dein Stylesheet packen und als Erweiterung einbinden.