[3.2] Neuling möchte Banner anpassen...

[rainer106]

Hallo phpBB Community,

ich möchte meinen Banner ordentlich ausrichten und anpassen.

Die Seite ist erreichbar unter https://www.retrogames-deutschland.de

User: phpBB
PW: banner!

Ich würde gerne den Banner über die Menüleiste setzen, also quasi an die oberste Position. Wenn möglich natürlich zum Foren-Body ausgerichtet (mittig) und ausgefüllt. Ansonsten hätte ich noch ein Banner-Background Image mit dem passenden Farb-Hexadezimalcode.

Die colours.css sowie common.css habe ich mir angeschaut, in beiden kann ich allerdings nur die Breite und Höhe einstellen, für die eigentliche Ausrichtung habe ich noch keinen Eintrag gefunden. Zuvor hatte ich es schon mit diverseren Extensions versucht, allerdings war das auch nicht das Gelbe vom Ei (in manchen Foren fehlte dann der Header) und eigentlich mag ich das ja auch selbst können

Vielleicht hat ja jemand einen Tipp für mich.

[Melmac]

Hi,

kurze Frage vorweg: hast Du, von den Versuchen, Dein neues Logo/Banner einzufügen, mal abgesehen, noch andere Anpassungen am Style vorgenommen?

Falls nein (und weiterhon keine Extension eingesetzt werden soll), dann ein auf den ersten Blick etwas "umständlich" erscheinender Ansatz - er erspart Dir bei zukünftigen Styleupdates aber einiges an manueller Nachbearbeitung, da Du ansonsten bei jedem Styleupdate Deine Anpassungen erneut manuell vornehmen müsstest
Von einem originalen, nicht modifizierten Flat Style ausgehend (bitte dann die bisherigen Edits wieder zurücksetzen oder die vorhandenen Dateien des Styles durch originale überschreiben, die neue Grafik dabei behalten):

• erstelle im Verzeichnis /styles/flat-style/theme/ einne neue, leere Datei custom.css; Codierung UTF-8 ohne BOM, Unix Line Endings
• öffne /styles/flat-style/theme/stylesheet.css und füge nach @import url("flat.css"); in einer neuen Zeile ein

  Code: Alles auswählen

  @import url("custom.css");

Was Änderungen am CSS des Styles betrifft, kannst Du diese hier dann zentral und in einer einzigen Datei vornehmen und dadurch die Einträge in den originalen Dateien des Styles "überschreiben".

Anpassungen für Dein Logo/Banner: öffne die neue custom.css und füge ein:[/c]

• Die neue Grafik als Site Logo festlegen:

  Code: Alles auswählen

  .site_logo {
  	background-image: url("./images/site_logo.jpg");
  }

• Die Abmessungen des Site Logos an die neuen Werte anpassen

  Code: Alles auswählen

  .site_logo {
  	width: 728px;
  	height: 90px;
  }

• Den Conatainer mit der ID "logo" anpassen

  Code: Alles auswählen

  #logo {
      width: auto;
  }

• Die Eigenschaft "display" des Klassen-Selectors ".logo" korrigieren

  Code: Alles auswählen

  .logo {
      position: inherit;
      padding: 0;
  }

  Der bisherige Wert "absolut" zerreißt ansonsten das Layout, das Padding bereitet in kleineren Auflösungen ebenfalls Probleme.
• Den übergeordneten Container mit der ID "site-description" anpassen, der das Banner enthält

  Code: Alles auswählen

  #site-description {
      width: 100%;
      height: auto;
      text-align: center;
  }

• Anzeige der Site Description (Name des Boards) bis zur Auflösung 790 * x anzeigen, darüber dann ausblenden und durch das Banner ersetzen

  Code: Alles auswählen

  @media (min-width: 790px) {
      .site-description {
          display: none;
      }
  }
  
  @media (max-width: 790px) {
      #logo {
          display: none !important;
      }
  }

  Da das Banner selbst nicht responsiv ist, geht es nicht anders.

So weit erst einmal "ferdisch"
Ergebnis

Den Feinschliff oder zukünftige Anpassungen kannst Du dann ebenfalls in der custom.css vornehmen: einfach den jeweiligen Selector aus den ursprünglichen CSS Dateien kopieren, hier einfügen und danach anpassen.
Einzelne Eigenschaften innerhalb der Selectordefinition, die nicht anzupassen sind, kannst Du dann auch weglassen: Du brauchst hier nur das einzufügen, was sich gegenüber dem weiterhin wirksamen "Original" ändern soll.

btw:
Den Hintergrund der Headerbar vielleicht noch einheitlich zum Logo-Hintergrund einfärben?

Code: Alles auswählen

.headerbar {
    background-color: #E8DCC2;
}

[rainer106]

Hallo Melmac,

erstmal (erneut) vielen herzlichen Dank für die schnelle und vor allem sehr ausführliche Hilfe Deinerseits!
Ich bin heute zeitlich etwas flexibler, daher wollte ich es mal ausprobieren. Zunächst habe ich ggf. vorhandene Style Extensions deinstalliert, den Flat Sytle ebenfalls runtergeschmissen und neu installiert, damit es quasi "frisch" daher kommt.

In /phpbb3/styles/flat-style/theme habe ich die custom.css erstellt und im Stylesheet.css mit @import url("custom.css"); den entsprechenden Verweis dazu angelegt. In der Vorschau von Dir schaut das Endergebnis super aus, bei mir erscheint dagegen "nüscht". Mir schwant es, als das ich hier einfach eine falsche Struktur in der custom.css verwendet habe. Seht es mir bitte nach, ich habe zuvor damit rein gar nichts am Hut gehabt, arbeite mich gerne ein und bin lernwillig, aber vielleicht stelle ich mir so manchen Stolperstein wohl noch selbst

So schaut meine custom.css aus:

Code: Alles auswählen

.site_logo {
   background-image: url("./images/site_logo.jpg");
width: 728px;
   height: 90px;
}
.site_logo {
   width: 728px;
   height: 90px;
}
#logo {
    width: auto;
}
.logo {
    position: inherit;
    padding: 0;
}
#site-description {
    width: 100%;
    height: auto;
    text-align: center;
}
@media (min-width: 790px) {
    .site-description {
        display: none;
    }
}

@media (max-width: 790px) {
    #logo {
        display: none !important;
    }
}

Wo habe ich da den Fehler reingehauen? Für Tipps bin ich wie immer dankbar

[Mahony]

Hallo

bei mir erscheint dagegen "nüscht".

Hast du denn auch den cache geleert, nach den Änderungen (vom Forum und vom Browser)?

Grüße: Mahony

[rainer106]

Hallo Mahony,

ACP- sowie Browser (Edge) Cache sind geleert. Das mache ich nach jeder Änderung.

Irgendwo klemmt es da. In diesem Zusammenhang mal was anderes (und vielleicht hat es ja einen Bezug dazu):
Wenn ich im ACP unter "Anpassen - Styles" die Details des Flat-Style anschaue, gibt es hier die Option "Geerbt von".

Standartmäßig ist hier prosilver ausgewählt. Kann das daran liegen? Ändere ich die Auswahl auf "-" (also nicht geerbt), erhalte ich folgende Fehlermeldung:

Fatal error: Uncaught Twig_Error_Loader: Unable to find template "notification_dropdown.html" (looked into: /kunden/521378_63486/webseiten/phpbb3/styles/flat-style/template, /kunden/521378_63486/webseiten/phpbb3/styles/flat-style/theme, /kunden/521378_63486/webseiten/phpbb3/styles/all/template) in "navbar_header.html" at line 165. in /kunden/521378_63486/webseiten/phpbb3/vendor/twig/twig/lib/Twig/Loader/Filesystem.php:215 Stack trace: #0 /kunden/521378_63486/webseiten/phpbb3/phpbb/template/twig/loader.php(135): Twig_Loader_Filesystem->findTemplate('notification_dr...') #1 /kunden/521378_63486/webseiten/phpbb3/vendor/twig/twig/lib/Twig/Loader/Filesystem.php(139): phpbb\template\twig\loader->findTemplate('notification_dr...') #2 /kunden/521378_63486/webseiten/phpbb3/vendor/twig/twig/lib/Twig/Environment.php(312): Twig_Loader_Filesystem->getCacheKey('notification_dr...') #3 /kunden/521378_63486/webseiten/phpbb3/vendor/twig/twig/lib/Twig/Environment.php(378): Twig_Environment->getTemplateClass('notification_dr...', NULL) #4 / in /kunden/521378_63486/webseiten/phpbb3/vendor/twig/twig/lib/Twig/Loader/Filesystem.php on line 215

[Melmac]

Dieses "geerbt" (also: inherits from) bedeutet, dass dieser Style im Template-Verzeichnis nur diejenigen HTML-Files mit sich bringt, die gegenüber den "Originalen" von prosilver abgeändert wurden - alle anderen braucht er nicht zu enthalten, da er sich diese dann von prosilver "borgt".

Aus diesem Grund muss auch prosilver installiert bleiben bzw. in der Konfiguration der Verweis auf prosilver erhalten bleiben, ansonsten kann Flat-Style nicht funktionieren.

Zu dem Darstellungsproblem: ich habe dies jetzt nochmals an einer Neuinstallation des Styles (btw.: es gibt in der Stylesdatenbank inzwischen eine aktualisierte Version 1.0.1 für phpBB 3.2.0) durchgespielt.
Installieren > Grafik ins Images-Verzeichnis des Styles kopieren > "custom.css" anlegen und Code einsetzen > "stylesheet.css" ergänzen > Caches leeren ...
... läuft.

Sicherheitshalber hier noch ein Archiv mit den bereits modifizierten Dateien bzw. der Grafik.
Einfach ins Verzeichnis des Styles hochladen und danach Board- und Browser-Cache leeren.

[rainer106]

Hi Melmac,

A big "Merci" in Repeat-Mode
Es läuft nun wie es soll. Da ich gerade nur am Surface Tablet bin, kann ich mir nicht die alte custom.css anschauen. Die habe ich ja eben überschrieben und das Backup liegt daheim auf meinem Hauptrechner. Wenn ich hoffentlich morgen wieder Zuhause bin (heute in der Klink), möchte ich beide Dateien mal vergleichen und schauen, wo ich mich da verhaspelt habe

Wenn Du mir vielleicht jetzt noch verrätst, an welcher Stelle ich die Farbe mit Hexadezimalcode für den allgemeinen Forenhintergrund anpassen kann (möchte mal was anderes als das Weiß), mag ich Dir und Mahony gerne ein virtuelles Bier spendieren

[Melmac]

Das CSS hierfür ist in der colours.css zu finden und lautet

Code: Alles auswählen

html, body {
	color: #333;
	background-color: #fff;
}

Um konsequent zu bleiben setze die Anpassungen wieder in die custom.css rein - am Ende der Datei in neuer Zeile einfügen

Code: Alles auswählen

html, body {
	background-color: #000000;
}

Ich hab da jetzt einfach mal schwarz als Beispiel genommen, also entsprechend abändern
Die Zeile mit color: #333; kann hier entfallen, da dieser Wert für die Schriftfarbe ja nicht geändert werden soll.


[/me lässt ein vituelles Bierchen auf den Spender plöppen]

[rainer106]

Hallo Melmac,

vielen lieben Dank, ich hoffe das virtuelle Bierchen hat gemundet?

Als letzten Marker auf meiner Agenda steht eigentlich nur noch, den Header "responsive" zu bekommen.
Danach heißt es, das Forum mit Content zu befüllen.

Inwieweit bekomme ich das mit den Board-Werkzeugen umgesetzt oder braucht's hierfür eine Extension?

[Melmac]

Hat es - wie immer vorm virtuellen Kamin

Im Prinzip ginge beides: mittels Codeanpassungen oder mittels Extension. Z.B. dieser hier => [3.1][3.2] Sitelogo responsive.
Du hast ja den Flat Style im Einsatz - es kann sein, dass für diesen dann ein angepasster Styleordner innerhalb der Ext angelegt werden müsste. Ich glaube mich noch daran erinnern zu können, dass dieser Style im Headerbereich etwas "eigen" gestaltet ist und die Ext daher nicht "out-of-the-box" das Logo korrekt platzieren kann.

Ich teste das jetzt schnell mal durch.

-----------------------------------------

Tante Edith:

[Wusste ich doch, dass ich dies für diesen Style schon einmal gemacht hatte ...
Es wäre aber auch so relativ einfach gewesen.]

Mit der Extension funktioniert es einwandfreis und es waren auch nur kleinere stylespezifischen Anpassungen erforderlich.

Am schnellsten geht es für Dich so:

• Lade die erwähnte Extension Sitelogo responsive ins Extensionverzeichnis hoch (erst einmal aber noch nicht aktivieren)
• Das in der Dateianlage befindliche Archiv runterladen, entpacken und den dort enthaltenen Ordner flat-style nach /ext/kirk/site_logo_responsive/styles/ hochladen (also ins styles Verzeichnis der Extension).
  Er enthält die für diesen Style angepassten Files der Ext
• Da die Formatierung des Logos jetzt von der Extension vorgenommen wird, kannst Du in der custom.css jetzt alles bis auf die Formatierung des Boardhintergrunds wieder entfernen.
  Auch die Formatierung der Hintergrundfarbe des Headers habe ich gleich mit in das Stylepaket gepackt - gehört ja irgendwie auch zusammen.
• Jetzt die Extension aktivieren und anschließend nochmals Board- und Browser-Caches leeren

Die Konfiguration der Extension kannst Du wie folgt vornehmen: