[CF4.11] Flatman Style

Boxed, Flat mit Banner

 
cback
Admin
Avatar
Geschlecht:
Herkunft: Saarland
Alter: 37
Homepage: cback.net
Beiträge: 17610
Dabei seit: 12 / 2003
Betreff:

[CF4.11] Flatman Style

 · 
Gepostet: 27.03.2019 - 15:46 Uhr  ·  #1
Flatman Style
Na, na, na, na, na, na, na, na - Flatmaaaan!
Ja, schon wieder so ein Style mit Wortspiel

Template Kompatibilität: CF v4.11.0
Coding: HTML5 / CSS3 / Responsive
Lizenz: CBACK EULA+ (siehe unten)


Der "Flatman" Style ist ein Style, der von seinem Grundgerüst her eher in die Richtung klassischerer Foren-Templates geht: Er steckt in einer "Box", verzichtet auf Parallax-Header und hat dort lediglich ein austauschbares Forenbanner und die Navigationsleiste direkt darunter. Doch auch mit diesem etwas klassischeren Ansatz muss man auf moderne Elemente nicht verzichten: Selbstverständlich ist der Style Responsive und mit seinen flachen Buttons, großen Schriften und peppigen Farben hält er trotzdem mit dem aktuellen Webdesign Trend mit.

Zusätzlich wird dieses Style unter der "CBACK EULA+" Lizenz veröffentlicht: Dies bedeutet, dass es zwar nur für CF4 Kreise zulässig ist, jedoch von CF4 Entwicklern / Template Autoren für eigene Werke als Grundlage benutzt werden kann genau so, wie das Mira Style oder der dunkle "CB(l)ack" Style.

Anders ausgedrückt: Wenn ein Template-Autor gerne einen Style machen möchte, der feste Laufweiten und einen klassischeren Header-Ansatz hat und braucht schon mal eine gute Grundlage dafür und möchte ihn nur noch etwas an seine Bedürfnisse anpassen, dann darf er diesen Style frei verwenden.

Außerdem darf er die auf diesem Style erstellten Templates auch hier in der CBACK Community erneut unter seinem eigenen Templatenamen + Autornamen anbieten. Jedoch NUR in der CBACK Community aus lizenzrechtlichen Gründen!


So denn: Viel Spaß mit dem Style - und an alle Style Autoren: Viel Spaß beim erstellen von boxed & flat CF4 Styles auf basis dieses "Themekits". ;)


Oh noch eine Sache:
Der Style ist aktuell und damit bereits direkt für das CBACK Forum v4.11.0 geeignet. Diese Version ist auch zwingend erforderlich, um den Style nutzen zu können!




Gefällt Dir der Style?
Dieser Style wurde kostenfrei von mir privat für das CF4 und für die CF4 Style-Entwickler erstellt. Wenn Dir das Theme gefällt und Du die Entwicklung von kostenfreien Plugins und Styles für das CF4 unterstützen möchtest, dann würde ich mich über eine kleine "Kaffeespende" sehr freuen. Klicke dazu bitte auf diesen Link. Der voreingestellte Spendenbetrag kann im Eingabefeld verändert werden. - Vielen Dank für die Unterstützung!
Der an diesem Beitrag angefügte Anhang ist entweder nur im eingeloggten Zustand sichtbar oder die Berechtigung Deiner Benutzergruppe ist nicht ausreichend.
OWS
Benutzer
Avatar
Geschlecht:
Herkunft: Niedersachsen
Homepage: oetjen-webservice.…
Beiträge: 305
Dabei seit: 03 / 2006
Betreff:

Re: [CF4.5] Flatman Style

 · 
Gepostet: 27.03.2019 - 23:18 Uhr  ·  #2
Vielen Dank fürs bereitstellen Chris. :)

Ich werde mir das Theme die Tage mal anschauen und ggf. auch noch etwas machen und dann hier für die Community bereit stellen.
cback
Admin
Avatar
Geschlecht:
Herkunft: Saarland
Alter: 37
Homepage: cback.net
Beiträge: 17610
Dabei seit: 12 / 2003
Betreff:

Re: [CF4.5] Flatman Style

 · 
Gepostet: 28.03.2019 - 14:46 Uhr  ·  #3
cback
Admin
Avatar
Geschlecht:
Herkunft: Saarland
Alter: 37
Homepage: cback.net
Beiträge: 17610
Dabei seit: 12 / 2003
Betreff:

Re: [CF4.6] Flatman Style

 · 
Gepostet: 28.10.2019 - 14:01 Uhr  ·  #4
Der Style wurde auf CF4.6.0 Kompatibilität aktualisiert
Das neue Paket kann im ersten Post in diesem Thema heruntergeladen werden und enthält nun auch alle neuen Features und Fixes des CFv4.6 Releases.



Wer den Style noch nicht installiert hat:
Einfach das Paket im ersten Thema herunterladen und wie gewohnt im ACP bei den Themes installieren, dann habt ihr direkt die neueste Version. WICHTIG: Ihr benötigt mindestens ein CBACK Forum in Version 4.6.0 um diesen Style zu nutzen! Ältere CF4 Versionen sind mit dem neuen Paket nicht mehr kompatibel.


Wer den Style bereits installiert hat und aktualisieren möchte:
Verwendet bitte die für das Update von CFv4.5.0 auf CFv4.6.0 bereitgestellten Template-Changelogs in diesem Thread:
cf4-t18002.html - Wenn Ihr an dem Style noch rein gar nichts verändert habt könnt Ihr auch das tar.gz manuell entpacken und die darin enthaltenen Dateien in Euren templates/flatman/ Ordner hochladen und die alten damit überschreiben (Achtung: eventuell selbst gemachte Änderungen gehen dabei verloren!). Danach via ACP einfach den Cache leeren.
jupzup
Benutzer
Avatar
Geschlecht: keine Angabe
Alter: 52
Beiträge: 178
Dabei seit: 02 / 2010
Betreff:

Re: [CF4.6] Flatman Style

 · 
Gepostet: 08.01.2020 - 02:54 Uhr  ·  #5
Hallo Chris, vielen Dank für den Style welchen ich gerne nutzen würde. Besteht die Möglichkeit, das es diesen auch in einer Dark Mode Variante gibt also quasi den CBLACK in Flatman Style ?

EDIT: Habe mal die komplette CSS vom CBLACK Style nach Flatman kopiert was Augenscheinlich funktioniert.

Ich habe aber noch einen kleines Layout Problem bei der Größenänderung des Browserfensters wird responsiv alles angepaßt aber bei einer bestimmten Fenster Größe wird der Banner rechts nicht richtig skaliert. Dies passiert auch mit der org. CSS.

@Chris kannst du dir das mal ansehen sieht man ja auch als Gast
www.golf8gti.com


VG
Sascha
cback
Admin
Avatar
Geschlecht:
Herkunft: Saarland
Alter: 37
Homepage: cback.net
Beiträge: 17610
Dabei seit: 12 / 2003
Betreff:

Re: [CF4.6] Flatman Style

 · 
Gepostet: 08.01.2020 - 13:29 Uhr  ·  #6
Hi Sascha,

freut mich, dass Dir der Style gefällt und Du ihn verwenden kannst! Ich wünsche viel Spaß damit! :)

Mit CSS kopieren überschreibst Du natürlich auch die gesamte Struktur und Button Layouts, das würde ich daher nicht empfehlen da gibt es auch mitunter Pfadfehler. Besser wäre es, wenn Du die Farbcodes der LESS Datei anpasst und Dir dann eine neue CSS Compilierst. Du findest alle Farbcodes bei jedem CF4 Style in den Less-Configdateien und kannst von den Variablen natürlich auch Farbcodes von einem Style in den anderen übernehmen. Alle Farbcodes sind in diesen beiden Dateien sozusagen an einer zentralen Stelle.

Beim Flatman Style wären das die Dateien less/config.less sowie less/flatmanUI.less
Beim CBlack heißen die less/config.less und entsprechend less/cblackUI.less

Die Variablennamen sind soweit identisch also kannst Du zumindest die FarbWerte ohne Probleme von einem Style in den anderen übernehmen. Bitte nicht die gesamte Configdatei, da stehen nämlich noch stylespezifische Größenwerte und Dateipfade drin!

Danach compilierst Du dir aus den neuen less Dateien eine css. Wie das geht findest Du hier: less-dateien-kompilieren-t17706.html bzw. mit Videotutorial hier: less-dateien-kompilieren-t17748.html

Lade vor dem Compilieren übrigens nicht nur den templates/ Ordner herunter sondern auch den shared/ Ordner, da liegt auch noch Zeugs drin was er dann braucht. :-)



Zu Deinem Skalierproblem:
Du hast Dein Banner einmal als Hintergrundgrafik und einmal als Bannergrafik drin und die überlagern sich. Ich würde das entsprechend anpassen entweder-oder: Da Du Text auf dem Banner hast würde ich nur auf die Grafik setzen und diese dann einfach zentrieren, ansonsten müsstest Dir mehrere Banner machen und die je nach Responsive Variante zünden.

Alternativ: Hauptbanner als Hintergrundgrafik die sich schieben kann und Deinen Seitennamen als Transparentes PNG drüber. Das Hintergrundbild eben so, dass es nicht so schlimm ist wenn mal Bildbereiche abgeschnitten werden je nach Monitorgröße.

Im Originallayout wird daher als Hintergrundgrafik nur der Farbverlauf benutzt der etwas größer ist als die größte Breite der Seite, damit er bei jeder Variante etwas "Platz" hat - das Hintergrundbild wird dann einfach skaliert bzw. "cover" sodass halt immer ein Teil davon oder möglichst viel angezeigt wird. Bei Deiner Änderung überlagern sich aktuell aber sozusagen 2x die Bilder.

Da dies aber jetzt mit dem eigentlichen Layout-Download nichts zu tun hat und in Richtung Programmier- bzw. CSS/HTML-hilfe geht kannst Du dazu bei weiteren Problemen oder Fragen aber gerne ein Support Ticket in einem der Supportforen öffnen, das hat mit dem Flatman Style direkt nichts zu tun, das entsteht durch Deine Anpassung.

Aktuell bekommst Du die überlappende Hintergrundgrafik über den Bereich in der Haupt-LESS Datei (Hintergrundbild) bzw. Deiner CSS heraus:

Der Bereich startet mit:
Code
.cf-main-header {


Darin hast du noch das doppelte Bild:
Code
background: url(../images/header.jpg) top center no-repeat #181818;


Wenn Du diese eine Zeile damit ersetzt hast Du keine Doppelgrafik mehr und nur noch Dein klickbares Headerbanner:
Code
background: #181818;



Viele Grüße,
Chris
jupzup
Benutzer
Avatar
Geschlecht: keine Angabe
Alter: 52
Beiträge: 178
Dabei seit: 02 / 2010
Betreff:

Re: [CF4.6] Flatman Style

 · 
Gepostet: 08.01.2020 - 17:10 Uhr  ·  #7
Hi Chris,

erst einmal vielen Dank für deine wirklich Umfangreiche Hilfestellung wieder. Du hast völlig Recht hier habe ich wohl 2 verschiedene Styles quasi miteinander vermischt.
Wie du es vorgeschlagen hast, habe ich nun die CSS neu compiliert d.h. den Flatman Style mit den Farbwerten des CBLACK Styles und das hat auch funktioniert und der Banner ist jetzt nicht mehr doppelt.

Da der jetzige Banner sowieso neu gemacht wird müsste ich diesen dann nur noch etwas breiter machen als jetzt und der Banner wäre bei vergrößertem Browserfenster nicht mehr rechts abgeschnitten. Das sehe ich doch soweit richtig oder ?
cback
Admin
Avatar
Geschlecht:
Herkunft: Saarland
Alter: 37
Homepage: cback.net
Beiträge: 17610
Dabei seit: 12 / 2003
Betreff:

Re: [CF4.6] Flatman Style

 · 
Gepostet: 08.01.2020 - 17:17 Uhr  ·  #8
Hi Sascha,

super freut mich, dass ich Dir weiterhelfen konnte!

Mit dem Banner siehst Du das genau richtig, dieser Ansatz sollte gut funktionieren. Es ist ja grundlegend ein normales Image und standardmäßig sprengen die Bilder im CF4 nie die umliegenden Container - also mit anderen Worten: Wenn der Header kleiner wird, wird auch das Banner kleiner. Falls das nicht klappt, kannst Du dem Banner Image noch ein style="max-width:100%;" mitgeben.


Viele Grüße,
Chris
Gewählte Zitate für Mehrfachzitierung:   0

Registrierte in diesem Topic

Aktuell kein registrierter in diesem Bereich

Die Statistik zeigt, wer in den letzten 5 Minuten online war. Erneuerung alle 90 Sekunden.