Seite 1 von 1

Hintergrundgrafik in prosilver skallieren

Verfasst: 26.09.2012 00:44
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.

Re: Hintergrundgrafik in prosilver skallieren

Verfasst: 26.09.2012 09:01
von Stratos85
ich hab mittlerweile wieder auf prosilver umgestellt und fang noch einmal von vorne an. meine beiden fragen bleiben jedoch weiterhin bestehen.

Re: Hintergrundgrafik Prosilver / Prosilver_SE skallieren

Verfasst: 26.09.2012 09:10
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:

Re: Hintergrundgrafik in prosilver skallieren

Verfasst: 26.09.2012 13:49
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.

Re: Hintergrundgrafik in prosilver skallieren

Verfasst: 26.09.2012 14:16
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.

Re: Hintergrundgrafik in prosilver skallieren

Verfasst: 26.09.2012 14:44
von Stratos85
Danke auf den ersten Blick hat alles funktioniert. Super Hilfe von dir. :grin:

Re: Hintergrundgrafik in prosilver skallieren

Verfasst: 26.09.2012 16:27
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