Hintergrundgrafik in prosilver skallieren

Alles zu Styles, Templates, Icons und Smilies für phpBB 3.0.x, sowie allgemeine Designfragen zur Integration von phpBB in bestehende Websites.
phpBB Styles Demo
Forumsregeln
Bei Style spezifischen Fragen ist der Stylename und die Downloadquelle des Styles erforderlich, besser noch die URL vom betroffenen Forum.
Antworten
Stratos85
Mitglied
Beiträge: 4
Registriert: 26.09.2012 00:36

Hintergrundgrafik in prosilver skallieren

Beitrag von Stratos85 »

Hallo Zusammen,

ich habe zwei Fragen:

1. Besteht die Möglichkeit beim Template prosilver se eine eingefügte Hintergrundgrafik automatisch mit der Auflösung skallieren zu lassen? Und wenn ja wie?
2. Was muss ich bei prosilver se tun um das Forum generell etwas tiefer (Seitenanfang etwas tiefer damit man das Hintergrundbild sieht) zu bekommen?

Hier der Link zu meiner Seite: http://www.goc.de.vc

Die Suchfunktion und Google habe ich schon benutzt, hab hier aber immer nur spezifische Lösungen für die geweiligen Styles gefunden.
Zuletzt geändert von Stratos85 am 26.09.2012 12:17, insgesamt 1-mal geändert.
Stratos85
Mitglied
Beiträge: 4
Registriert: 26.09.2012 00:36

Re: Hintergrundgrafik in prosilver skallieren

Beitrag von Stratos85 »

ich hab mittlerweile wieder auf prosilver umgestellt und fang noch einmal von vorne an. meine beiden fragen bleiben jedoch weiterhin bestehen.
Zuletzt geändert von Stratos85 am 26.09.2012 13:49, insgesamt 1-mal geändert.
Benutzeravatar
Talk19zehn
Ehemaliges Teammitglied
Beiträge: 5035
Registriert: 08.06.2009 12:03

Re: Hintergrundgrafik Prosilver / Prosilver_SE skallieren

Beitrag von Talk19zehn »

Hello Stratos85, um den Abstand des Forums vom oberen Bildschirmrand zu ändern, besteht folgende Möglichkeit. Das Margin 0 auto zentriert hier mit einem Abstand von 0 Pixel von oben. Möchtest du es in deinem Falle ( deine Einbindung im Prosilver_SE ) ändern, gib einen entsprechenden Wert vor.

zu 2)
Common.css
Suche

Code: Alles auswählen

#wrap {
    margin: 0 auto;
    min-width: 1400px;
    padding: 0 200px;
    width: 1400px;
}
ändere bspw.

Code: Alles auswählen

#wrap {
    margin: 240px auto;
    min-width: 1400px;
    padding: 0 200px;
    width: 1400px;
}
Anmerkung:
Die Notationen zu min-width und width machen aus meiner Sicht wenig Sinn, da ich in kleinen Auflösungen bereits um ein Vielfaches nach rechts scrollen muss.
Die Grafik ist, wie du richtig erkannt hast, mit 1997px x 301px wesentlich zu groß bemessen. Bedenke neben der Breite auch die Höhe deiner Grafik in den kleineren Auflösungen.
Nach einer Korrektur zu 1) wird eine Änderung dieser CSS-Angaben erforderlich werden.

zu 1)
a) Logo in drei Teile teilen

b) Logo in eine 360°-Grad-Grafik umwandeln und einsetzen

Beides erfordert ggf. weitere stylespezifische Anpassungen bzw. u.U. auch HTML-Einbindungen an anderer Stelle für Prosilver-SE.

c) Alternativ ---> Prosilver ---> viewtopic.php?f=85&t=216426

Es gilt vor einer Änderung eine Sicherung vorzunehmen.

Viele Grüße

Edit:
Dein Edit gerade gelesen -- nun denn --
Passe ggf. deinen Threadtitel noch an :wink:
Adventereigniskalender für phpBB 3.3.x,
Meine persönliche Meinung im Jahr 2024: Im Zenit seiner Popularität wirkt KI zunächst wie eine Blaupause und lässt sich aufgrund der Vielschichtigkeit nicht auf eine einzige Botschaft reduzieren.
Stratos85
Mitglied
Beiträge: 4
Registriert: 26.09.2012 00:36

Re: Hintergrundgrafik in prosilver skallieren

Beitrag von Stratos85 »

Danke für die schnelle Antwort. Hab jetzt mal deine Anleitung durchprobiert und dabei auch etwas raus bekommen. Der gewünschte Erfolg blieb dabei aber aus. Das Endergebnis sollte eher wie auf http://www.embers-reign.com/ aussehen. Vielleicht hast du noch ein paar hilfreiche Tipps für mich.
Benutzeravatar
Talk19zehn
Ehemaliges Teammitglied
Beiträge: 5035
Registriert: 08.06.2009 12:03

Re: Hintergrundgrafik in prosilver skallieren

Beitrag von Talk19zehn »

Hi, die Grafik ist in dem Falle in der common.css direkt der Klasse body zugeordnet:

Code: Alles auswählen

        background-image: url('http://xxxxxx.tld/styles/prosilver_se/imageset/header.png');
        background-repeat: no-repeat;
        background-position: center top;

Code: Alles auswählen

body {
	/* Text-Sizing with ems: http://www.clagnut.com/blog/348/ */
	font-family: Verdana, Helvetica, Arial, sans-serif;
	color: #ffffff;
        background-image: url('http://xxxxxx.tld/styles/prosilver_se/imageset/header.png');
        background-repeat: no-repeat;
        background-position: center top;
	/*font-size: 62.5%;			 This sets the default font size to be equivalent to 10px */
	font-size: 10px;
	margin: 0;
}


Auf die Schnelle mal nachgesehen. Abstände (Wrap / Prosilver) müssen wir ggf. an anderer Stelle anpassen.

Schau mal, ob du hinkommst.
Adventereigniskalender für phpBB 3.3.x,
Meine persönliche Meinung im Jahr 2024: Im Zenit seiner Popularität wirkt KI zunächst wie eine Blaupause und lässt sich aufgrund der Vielschichtigkeit nicht auf eine einzige Botschaft reduzieren.
Stratos85
Mitglied
Beiträge: 4
Registriert: 26.09.2012 00:36

Re: Hintergrundgrafik in prosilver skallieren

Beitrag von Stratos85 »

Danke auf den ersten Blick hat alles funktioniert. Super Hilfe von dir. :grin:
Benutzeravatar
Talk19zehn
Ehemaliges Teammitglied
Beiträge: 5035
Registriert: 08.06.2009 12:03

Re: Hintergrundgrafik in prosilver skallieren

Beitrag von Talk19zehn »

OK, der zweite Blick sagt mir, operiere in der common.css in der "id Wrap" mit
  • min-width oder max-width
Vorteil: Kein oder weniger Scrolleffekt in der Breite ( ? ) und das Logo passt sich m.E. dem Browserfenster / der Auflösung an. --> Teste bitte selbst einmal.

:wink:


Besser anstatt
  • margin: 290px auto;
wären rund
  • margin: 220px auto;
Vorteil: Du sparst Scrolleffekte in der Höhe.

:wink:


BTW:
Was ich generell nicht nachvollziehen kann und auch eine Suche nicht bemühen möchte, ist deine Footergestaltung - ----> "riesige momentane Abstände" vom CR bis zum unteren Bildschirmrand. :(

Grüße
Adventereigniskalender für phpBB 3.3.x,
Meine persönliche Meinung im Jahr 2024: Im Zenit seiner Popularität wirkt KI zunächst wie eine Blaupause und lässt sich aufgrund der Vielschichtigkeit nicht auf eine einzige Botschaft reduzieren.
Antworten

Zurück zu „[3.0.x] Styles, Templates und Grafiken“