3.2.0 Style Prosilver ändern

Alles zu Styles, Templates, Icons und Smilies für phpBB 3.1/3.2, sowie allgemeine Designfragen zur Integration von phpBB in bestehende Websites.
Forumsregeln
Bei Style spezifischen Fragen ist der Stylename und die Downloadquelle des Styles erforderlich, besser noch die URL vom betroffenen Forum.
sylvja
Mitglied
Beiträge: 7
Registriert: 07.03.2017 19:57

Re: 3.2.0 Style Prosilver ändern

Beitragvon sylvja » 07.03.2017 22:11

hey ich hab echt keine ahnung mehr was ich machen soll....

habe das site_logo in der größe eingebunden wie oben beschrieben.

Code: Alles auswählen

     float: center;
     display: inline-block;
     width: 1195px;
     height: 135px;


jetzt schaut es auf der Seite raus. Dazu hab ich noch das Problem das der Blaue Hintergrund zusehen ist.

Kann mir bitte jemand helfen?!

Danke :oops:

Benutzeravatar
Melmac
Supporter
Supporter
Beiträge: 1894
Registriert: 15.10.2012 03:27

Re: 3.2.0 Style Prosilver ändern

Beitragvon Melmac » 08.03.2017 00:07

Hi,

könntest Du uns bitte einen Link zu Deinem Board geben?
Handle nur nach derjenigen Maxime, durch die du zugleich wollen kannst, dass sie ein allgemeines Gesetz werde.
(Immanuel Kant)

sylvja
Mitglied
Beiträge: 7
Registriert: 07.03.2017 19:57

Re: 3.2.0 Style Prosilver ändern

Beitragvon sylvja » 08.03.2017 12:11


Lehrling
Supporter
Supporter
Beiträge: 2859
Registriert: 15.01.2012 20:00
Kontaktdaten:

Re: 3.2.0 Style Prosilver ändern

Beitragvon Lehrling » 08.03.2017 12:43

Der Container wrap hat eine maximale Breite von 1152px und ist somit zu schmal für das Logo. Setze den Wert mal auf 1225px hoch. Die entsprechende Stelle ist die hier (im common.css):

Code: Alles auswählen

.wrap {
   border: 1px solid transparent;
   border-radius: 8px;
   margin: 0 auto;
   max-width: 1152px;
   min-width: 625px;
   padding: 15px;
}

Benutzeravatar
Dr.Death
Moderator
Moderator
Beiträge: 15273
Registriert: 23.04.2003 08:22
Wohnort: Xanten
Kontaktdaten:

Re: 3.2.0 Style Prosilver ändern

Beitragvon Dr.Death » 08.03.2017 12:53

Hinweis, das Ganze ist doch dann wieder blöd, wenn die User Ihren Browser nicht ganz aufziehen....dann fällt doch das riesige Hintergrundbild erneut aus dem Rahmen....

Seht Euch mal das Forum von mir an.... ich habe das Hintergrundbild so gestaltet, das es linksbündig ist und nach rechts hin mit der Hintergrundfarbe verläuft.
Nun kann man den Browser stufenlos verkleinern, bis endlich das Responsive aktiv wird...

Benutzeravatar
Joyce&Luna
Mitglied
Beiträge: 1314
Registriert: 24.11.2013 18:14
Wohnort: NRW
Kontaktdaten:

Re: 3.2.0 Style Prosilver ändern

Beitragvon Joyce&Luna » 08.03.2017 13:14

Hi

Ein background-size: 100% auto; würde das Bild im Hintergrund auch responsiv zeigen.

Anke
phpBB-Style-Design.de

Es kommt nicht darauf an, mit dem Kopf durch die Wand zu gehen, sondern mit den Augen die Tür zu finden.
Support zu meinen Styles, bitte die Fragen im Forum stellen und nicht per PN. Danke!

Benutzeravatar
Melmac
Supporter
Supporter
Beiträge: 1894
Registriert: 15.10.2012 03:27

Re: 3.2.0 Style Prosilver ändern

Beitragvon Melmac » 08.03.2017 15:37

Hi,

ohne jetzt die anderen Vorschläge hier alle ausgetestet zu haben ...
... noch einweiterer Ansatz hinterher :D

Kurze Anmerkung vorweg: es ist erst einmal nur ein grober Entwurf (u.a. ist die Anzeige/Positionierung der Searchbox noch etwas "unrund") - ob es die "optimale" Lösung ist, bleibt eh dahingestellt :wink:
Ziel war hierbei, möglichst wenig manuellen Nachbearbeitungsaufwand bei zukünftigen Style-Updates zu verursachen = mit so wenigen Anpassungen wie möglich an den Originaldateien auszukommen.

Vorgehen:
  1. ziehe ein Backup Deines Styles - sicher ist sicher
  2. mache alle bisher in diesem Zusammenhang durchgeführten Änderungen an den Stylesheets wieder rückgängig (oder, wenn es keine weiteren Anpassungen außer den hier im Thema genannten gibt, überschreibe die Dateien des Styles durch die im Komplettpaket enthaltenen)
  3. entpacke das im Anhang befindliche Archiv und lade den dort enthaltenen Ordner "subsilver" ins Styleverzeichnis Deines Boards hoch (bei der Abfrage, ob vorhandene Dateien überschrieben werden sollen, bitte bestätigen)
    Dieses Archiv enthält, in der korrekten Ordnerstruktur, folgende Dateien:
    1. im Template-Ordner => new_headerlogo.html
    2. im Theme-Verzeichnis => eine ergänzte stylesheet.css und eine Datei custom.css
  4. öffne /styles/prosilver/template/overall_header.html
    suche

    Code: Alles auswählen

             <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"></span></a>
                <h1>{SITENAME}</h1>
                <p>{SITE_DESCRIPTION}</p>
                <p class="skiplink"><a href="#start_here">{L_SKIP}</a></p>
             </div>

    ersetze durch

    Code: Alles auswählen

          <!-- INCLUDE new_headerlogo.html -->
  5. speichern, Board- und Browsercache leeren

Ergebnis:
[ externes Bild ]

[ externes Bild ]

[ externes Bild ]

[ externes Bild ]

[ externes Bild ]


Zu den Dateien im Archiv:
  1. new_headerlogo.html
    Diese enthält den Code, den Du vorher aus der overall_header.html entfernt hast - so angepasst, dass er Dein Logo responsiv anzeigt.

    Code: Alles auswählen

             <div id="site-description" class="site-description">
                <div class="logo-container">
                   <div class="new-logo">
                      <img src="{T_THEME_PATH}/images/site_logo.gif" />
                   </div>
                </div>
                <h1>{SITENAME}</h1>
                <p>{SITE_DESCRIPTION}</p>
                <p class="skiplink"><a href="#start_here">{L_SKIP}</a></p>
             </div>

    Das in die overall_header.html eingefügte <!-- INCLUDE new_headerlogo.html -->[/ bindet diese Datei jetzt an der ursprünglichen Code-Stelle wieder ein.
    Vorteil (IMHO :wink: ): bei einem Styleupdate brauchst Du nur dieses eine Edit neu vorzunehmen.
  2. custom.css
    Enthält zentral alle CSS-Anpassungen => die originalen CSS-Dateien müssen so nicht verändert werden

    Code: Alles auswählen

    .site-description {
        width: 100%;
        height: auto;
    }

    .site-description h1, .site-description p {
        display: none;
    }

    .logo-container {
        width: auto;
    }

    .new-logo {
        width: auto;
        height: auto;
    }

    .new-logo img {
        width: 100%;
        height: 100%;
    }

    .search-header {
        margin-top: -26px;
    }

    @media (max-width: 1050px) {
        .search-box {
            display: none;
        }
    }
  3. stylesheet.css
    Am Ende der Datei wurde mit

    Code: Alles auswählen

    @import url("custom.css");

    diese neue CSS-Datei eingebunden

Die Searchbox wird erst in Auflösungen ab 1050px angezeigt, da sie ansonsten mit der Schrift des Logos (optisch) kollidieren würde.
Soweit ich es auf die Schnelle antesten konnte, müsste dies alles in jeder beliebigen Auflösung funktionieren und das Logo sauber skaliert angezeigt werden.
Dateianhänge
prosilver.zip
(108.27 KiB) 15-mal heruntergeladen
Zuletzt geändert von Melmac am 08.03.2017 22:00, insgesamt 1-mal geändert.
Handle nur nach derjenigen Maxime, durch die du zugleich wollen kannst, dass sie ein allgemeines Gesetz werde.
(Immanuel Kant)

sylvja
Mitglied
Beiträge: 7
Registriert: 07.03.2017 19:57

Re: 3.2.0 Style Prosilver ändern

Beitragvon sylvja » 08.03.2017 17:10

so ich hab jetzt alles ausprobiert.......
nur ist der blaue hintergrund vom style immer noch da.
hab jetzt einfach mal ein blauen dunkleren Balken als "Hintergrund" hin gemacht um evtl deutlicher zu machen das der hellere da nicht hin soll.

was kann ich noch machen??

http://nordic-connection.de/

Benutzeravatar
Kirk
Supporter
Supporter
Beiträge: 5406
Registriert: 24.05.2010 08:31
Kontaktdaten:

Re: 3.2.0 Style Prosilver ändern

Beitragvon Kirk » 08.03.2017 19:23

Hallo
Wenn du das hellere blau meinst dann öffne die overall_header.html deines Styles und finde das hier:

Code: Alles auswählen

<div class="headerbar" role="banner">

Ersetze es damit:

Code: Alles auswählen

<div class="headerbar-" role="banner">


Danach deinen Foren sowie deinen Browser Cache leeren.

Benutzeravatar
Melmac
Supporter
Supporter
Beiträge: 1894
Registriert: 15.10.2012 03:27

Re: 3.2.0 Style Prosilver ändern

Beitragvon Melmac » 08.03.2017 19:32

Wenn der dunkelblaue Kasten Deine Grafik repräsentieren sollte, dann ist dessen Darstellung leider immer noch nicht responsive:
banner_01.png
Handle nur nach derjenigen Maxime, durch die du zugleich wollen kannst, dass sie ein allgemeines Gesetz werde.
(Immanuel Kant)


Zurück zu „Styles, Templates und Grafiken“