[ALPHA] iclone 3.1.9

[Talk19zehn]

Hi, vorweg: Über den Sinn und Unsinn einen Link seitens eines Webseitenerstellers mittels target= "_blank" (valide oder nicht valide) mag ich gar nicht diskutieren, selbst wenn es die Spezifikationen nun wieder oder immer noch als Überbleibsel vorsehen. Tatsache ist, dass hier in einem Style ein derartiges Vorgehen vorgegeben wird. Die Nachteile, die daraus ggü. Behinderten erwachsen oder Besucher keinen Zurückbutton mehr bedienen können, nicht zurückkehren könn(t)en je nach Bedienung in den Browsern lässt dies m.E. außer Acht.
Tipp (nur mein persönlicher Gedanke in Sachen Stylekonzept / Erstellung): Ein Styleautor sollte von derartigen vorgegebenen Konstellationen m.E. absehen, da er nicht wissen kann, was vom Anwender / Benutzer seines Styles als wichtig oder machbar erachtet bzw. zwingend nötig ist. Ein IFrame (u.U. veraltete Maßnahme) mag ja dabei andere Schritte erforderlich werden lassen, die auch wiederum HTML5-konform valide sind.
Welche Verweise in diese Konstellation fielen, im Style zwingend erforderlich wären/waren, weiß ich nicht mehr so genau. Hatte das Design gestern nur mal (an)getestet.

Ich habe u.a. auch immer noch nicht herausgefunden, warum "section" für die bloße Linksetzung eine Rolle (HTML5-konform und valide in der navbar_header.html) spielen soll und "center" valide ist. Ich finde einfach nichts. Die mobilen Darstellungen fallen leider aus dem Auflösungsbild. Je nach Browser ist´s wirklich nicht grundsätzlich hübsch (oder wie sagt man das jetzt?). Die ungeordnete Liste (navbar_header.html) ist m.E. wirklich defekt. Bei den verbliebenen IF-Statements in der navbar_header.html kann sich z.B. jedoch auch ein Fehler (oder gar mehrere Fehler) eingeschlichen haben. Und, je nachdem was W3C oder gar ein BOT noch so sieht (Validierung), macht´s einen kleinen aber feinen Unterschied. Das ist schade, ich komme folglich ohne die Begründungen seitens eko1 nicht weiter.

Vielleicht findet sich daneben jemand, der wünschenswerter Weise Dinge, Details im phpBB-Style iclone 3.1.9 hilfreich ergründet, dokumentiert und mit Rat und Tat dem Autor zur Seite steht.

Viele Grüße

[Melmac]

Mit <section> können, mWn, HTML-formatierte (Text-)Dokumente in einzelne Bereiche untergliedert werden - hier würden sich dann doch wohl eher <div> empfehlen?

Was die Thematik navbar_header.html betrifft, habe ich mal etwas rumgespielt - wenns denn unbedingt CSS3 sein soll (Stichwort: flex-box) ...:
(@ Talk19zehn: könntest Du dies vielleicht mal gegenprüfen? Mit CSS3 stehe ich etwas auf Kriegsfuß und hab keine Ahnung, ob das überhaupt okay sein könnte ... )

Code: Alles auswählen

<section id="regal" class="regal"><center><br><br>
<a href="https://twitter.com/" target="_blank"><img src="./styles/iclone/theme/images/twitter-icon.png" height="55" width="55" style="-webkit-filter: contrast(2);
    filter: contrast(2);padding: 5px 27px;"></a>
<a href="https://facebook.com/" target="_blank"><img src="./styles/iclone/theme/images/facebook-icon.png" height="55" width="55" style="-webkit-filter: contrast(2);
    filter: contrast(2);padding: 5px 0px;"></a>
<a href="https://youtube.com/" target="_blank"><img src="./styles/iclone/theme/images/youtube-icon.png" height="55" width="55" style="-webkit-filter: contrast(2);
    filter: contrast(2);padding: 5px 27px;"></a>
<a href="https://plus.google.com/about?hl=de" target="_blank"><img src="./styles/iclone/theme/images/google-icon.png" height="55" width="55" style="-webkit-filter: contrast(2);
    filter: contrast(2);padding: 5px 0px;"></a>
<a href="https://myspace.com/" target="_blank"><img src="./styles/iclone/theme/images/myspace-icon.png" height="55" width="55" style="-webkit-filter: contrast(2);
    filter: contrast(2);padding: 5px 27px;"></a>
<a href="https://www.flickr.com/" target="_blank"><img src="./styles/iclone/theme/images/flickr-icon.png" height="55" width="55" style="-webkit-filter: contrast(2);
    filter: contrast(2);padding: 5px 0px;"></a>
<a href="https://icq.com/windows/de" target="_blank"><img src="./styles/iclone/theme/images/icq-icon.png" height="55" width="55" style="-webkit-filter: contrast(2);
    filter: contrast(2);padding: 5px 27px;"></a>
<a href="http://digg.com/" target="_blank"><img src="./styles/iclone/theme/images/digg-icon.png" height="55" width="55" style="-webkit-filter: contrast(2);
    filter: contrast(2);padding: 5px 0px;"></a>
<a href="https://www.linkedin.com/" target="_blank"><img src="./styles/iclone/theme/images/linkedin-icon.png" height="55" width="55" style="-webkit-filter: contrast(2);
    filter: contrast(2);padding: 5px 27px;"></a></center>
</section>

ersetzen durch

Code: Alles auswählen

<div class="social-container" role="navigation">
            <div class="flex-item"><a href="https://twitter.com/" target="_blank"><img src="./styles/iclone/theme/images/twitter-icon.png" alt="" /></a></div>
            <div class="flex-item"><a href="https://facebook.com/" target="_blank"><img src="./styles/iclone/theme/images/facebook-icon.png" alt="" /></a></div>
            <div class="flex-item"><a href="https://youtube.com/" target="_blank"><img src="./styles/iclone/theme/images/youtube-icon.png" alt="" /></a></div>
            <div class="flex-item"><a href="https://plus.google.com/about?hl=de" target="_blank"><img src="./styles/iclone/theme/images/google-icon.png" alt="" /></a></div>
            <div class="flex-item"><a href="https://myspace.com/" target="_blank"><img src="./styles/iclone/theme/images/myspace-icon.png" alt="" /></a></div>
            <div class="flex-item"><a href="https://www.flickr.com/" target="_blank"><img src="./styles/iclone/theme/images/flickr-icon.png" alt="" /></a></div>
            <div class="flex-item"><a href="https://icq.com/windows/de" target="_blank"><img src="./styles/iclone/theme/images/icq-icon.png" alt="" /></a></div>
            <div class="flex-item"><a href="http://digg.com/" target="_blank"><img src="./styles/iclone/theme/images/digg-icon.png" alt="" /></a></div>
            <div class="flex-item"><a href="https://www.linkedin.com/" target="_blank"><img src="./styles/iclone/theme/images/linkedin-icon.png" alt="" /></a></div>
</div>

CSS hierzu:

Code: Alles auswählen

.social-container {
    display: -webkit-flex;
    display: flex;
    flex-direction: row;
    width: 100%;
    height: 100px;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-justify-content: space-around;
    justify-content: center;
    -webkit-align-content: flex-end;
    align-content: flex-end;
    align-items: stretch;
    background-image: url("./images/regal.png");
    background-repeat: no-repeat;
    background-size: 100% 100%;
}

.flex-item {
    margin: auto auto 15px auto;
}

.flex-item:first-child {
    margin-left: 35px;
}

.flex-item:last-child {
    margin-right: 35px;
}

.flex-item img {
    width: 55px;
    height: 55px;
    -webkit-filter: contrast(2);
    filter: contrast(2);
}

@media only screen and (max-width: 500px), only screen and (max-device-width: 500px) {
    .social-container {
        display: none;
    }
}

Das Problem dabei: damit setzt man den IE bis mindestens einschließlich IE10 vor die Tür, was die <filter> Eigenschaft betrifft sogar bis IE12 einschließlich ... Letzteres sollte aber vermeidbar sein.

Diese Icons ... warum in den Dimensionen 256 x 256 Pixel, nur um sie dann in der Anzeige auf 55 x 55 Pixel runter zu skalieren?
Wäre es nicht geschickter, sie gleich auf diese Abmessungen zu reduzieren und dabei dann auch noch so nachzubearbeiten, dass Du diese <filter> Geschichte gar nicht erst benötigst?

Den Rest der navbar_header hab ich mir noch nicht genauer angeschaut - jetzt raucht mir erst einmal der Kopf

Der Forenbereich ist übrigens in einem bestimmten Auflösungsbereich nach links verschoben/nicht mehr mittig platziert.
In der common.css hast Du diesen Eintrag:

Code: Alles auswählen

@media only screen and (max-width: 1220px), only screen and (max-device-width: 1220px) {
	#wrap {
		margin: 0 12px;
	}
}

Da ich darin keine funktionale Notwendigkeit erkennen kann: Am besten rausnehmen, dann passt es wieder - in allen

[Talk19zehn]

Hallo Melmac, entschuldige bitte mein spätes Feedback. Okay ich sah mir die navbar_header.html erneut und auch die von dir neuen Ideen im Konzept an. Das würde in der Form soweit erst einmal funktionieren.
Funktionen(!) sind m.E. zu gewährleisten. Sprich, auch wenn bspw. der IE oder andere Browser CSS-Codierungen nicht verstehen, ist ein Lösungsansatz anzusetzen, wenn Funktionen verloren gingen. Das sieht man im eigentlichen Quelltext phpBB 3.1 Ascraeus auch sehr gut, der immerhin ab dem IE8(!) greift, um nur einen Browser zu benennen.

Die Mutterseite schreibt: Styles Submission Policy (3.1.x): https://www.phpbb.com/styles/ssp/

Die navbar_header müsste meiner Auffassung nach zumindest in drei Container aufgeteilt und die falsch positionierten Events an ihre richtige Position verlagert werden. Ich bleibe dabei, es ist für Außenstehende ein recht umfangreicher Aufwand und setzt, wie du sicher bemerkt hast, viel Wissen in Sachen CSS / HTML parallel in Verbindung mit dem Quelltext und dessen Ansätze für phpBB-3.1.9 voraus. Ich habe jedoch wirklich nicht die Zeit, das Template mitsamt dem CSS umzuschreiben, zumal sich der Autor nicht wieder gemeldet hat, ist´s obendrein eher schwierig, gemeinsam etwas auszuarbeiten, gar Fehler im Ansatz zu beseitigen.

<section> können, mWn, HTML-formatierte (Text-)Dokumente in einzelne Bereiche untergliedert werden - hier würden sich dann doch wohl eher <div> empfehlen?

Ja, da gehe ich konform.

BTW:
@media only screen and (max-width: 1220px), only screen and (max-device-width: 1220px) { --- > und so weiter ist m.E. eine Standard, der benötigt wird.

Wie ich sehe, wurde der Status in [ALPHA] verständlicher Weise geändert.

Beste Grüße

[Melmac]

Hi,

Funktionen(!) sind m.E. zu gewährleisten. Sprich, auch wenn bspw. der IE oder andere Browser CSS-Codierungen nicht verstehen, ist ein Lösungsansatz anzusetzen, wenn Funktionen verloren gingen.

Genau das ist der eigentliche Knackpunkt bei solchen Umgestaltungen ... es zieht, je nachdem, welchen Ansatz man wählt (viele Wege führen nach Rom ), einen mehr oder weniger großen Rattenschwanz an Folgeanpassungen nach sich.

Die geforderte IE8-Kompatibilität ...
Nun ja, ein Browser, der schon längere Zeit keine Security-Patches mehr bekommt ...
Da aber gefordert, muss man sich wohl daran halten - wenn der Style bei .com validiert werden soll.
IE9-Kompatibilität ist mit einem anderen als den oben angerissenen Ansatz aber machbar und dann sollte sich das auch auf IE8 tweaken lassen.

Die navbar_header müsste meiner Auffassung nach zumindest in drei Container aufgeteilt und die falsch positionierten Events an ihre richtige Position verlagert werden.

Sehe ich momentan als einzigen mit vertretbarem Aufwand gangbaren Weg an; was die Events betrifft sowieso.

Vielleicht schreibt der Autor nochmals etwas hierzu: optisch ist der Style ja schon vielversprechend.

[Talk19zehn]

Genau, du siehst das korrekt auf dem Weg nach Rom. Einzig zählt die Funktion und nicht nur im "Ur-Alt IE8". Darüber muss man nicht reden ...

BTW: Grafiken müssten / sollten angepasst werden, sie werden teils ja obendrein skaliert. Mobil mach das wenig Sinn. Ob gar geplant ist, sie in voller Größe anzeigen zu wollen, ist mir anhand des Konzeptes nicht deutlich geworden. Vielleicht kommt ja noch ein Hinweis!?

Am Desktop sehe ich ja fast nur zu 2/3 den Headerbereich, es sei denn ich drehe meinen Bildschirm auf´s Hochformat.
Fazit: Kaputt ist kaputt, denn die navbar_header.html ist unbrauchbar. Extensionen greifen leider an der valide gewünschten Stelle oftmals nicht korrekt. Inwieweit er validierte, ist leider unklar.

Die Idee ist gut, die er hat. Da kann etwas schickes und brauchbares draus werden!

LG und auch ich bin nicht fehlerlos. Man kann sich in den Weiten der unzähligen Möglichkeiten (Seitenauszeichnung und mehr) schon verlaufen.