phpBB.de • [gelöst] 1thank (prosilver) background-image einfügen

Seite 1 von 1

[gelöst] 1thank (prosilver) background-image einfügen

Verfasst: 20.10.2010 22:31

von Johnny80

Einen wunderschönen guten Abend,

ich möchte auf meinem phpBB 3.0.7-PL1 den Hintergrund mit einer sich wiederholenden Grafik versehen.

Installiert ist 1thank als Style.

Über google bin ich bereits auf "How to add background image to style?" gestoßen, was zumindest laut Pfadangabe ja eigentlich wie die Faust aufs Auge passen müsste ^^.

Es wird empfohlen, die colours.css zu editieren. Leider existiert in dem aktuellen 1thank Style keine colours.css.
"Changing body color (1thank template)" schlägt dann vor, die common.css zu editieren.

Ich hab also versucht die Änderungen aus dem ersten Beitrag auf meine common.css zu adaptieren.

Aus

Code: Alles auswählen

html {
	font-size: 100%;
	/* Always show a scrollbar for short pages - stops the jump when the scrollbar appears. non-IE browsers */
	height: 100%;
	margin-bottom: 1px;
}

body {
	/* Text-Sizing with ems: http://www.clagnut.com/blog/348/ */
	font-family: Verdana, Helvetica, Arial, sans-serif;
	color: #828282;
	background-color: #5F5E5E;
	/*font-size: 62.5%;			 This sets the default font size to be equivalent to 10px */
	font-size: 10px;
	margin: 0;
	padding: 27px 0;
}

wurde

Code: Alles auswählen

html {
	font-size: 100%;
	/* Always show a scrollbar for short pages - stops the jump when the scrollbar appears. non-IE browsers */
	height: 100%;
	margin-bottom: 1px;
}

body {
	/* Text-Sizing with ems: http://www.clagnut.com/blog/348/ */
	font-family: Verdana, Helvetica, Arial, sans-serif;
	color: #828282;
	background-image: url("{T_THEME_PATH}/images/body-bg.gif");
	background-color: #5F5E5E;
	background-repeat: repeat-x;
	/*font-size: 62.5%;			 This sets the default font size to be equivalent to 10px */
	font-size: 10px;
	margin: 0;
	padding: 27px 0;
}

Das Resultat sieht dann so aus. (shadow-l.gif und shadow-r.gif hab ich bereits gelöscht um den Schatteneffekt beim Header nicht zu haben)
[ externes Bild ]

Bzw. Nochmal hier klicken für großes Bild!

Templates / Themes und Caches etc. hab ich auch aktualisiert. Neuladen von Firefox natürlich auch mit STRG+F5.

Ich bin dankbar für weitere Vorschläge

Re: 1thank (prosilver) background-image einfügen

Verfasst: 20.10.2010 22:40

von Balint

Hallo,

du definierst ja auch:

Code: Alles auswählen

background-repeat: repeat-x;

also nur horizontal wiederholen.

Richtig wäre es,

Code: Alles auswählen

background-repeat: repeat;

zu definieren, damit die Wiederholung in beide Richtungen stattfindet.

Viele Grüße,
Bálint

Re: 1thank (prosilver) background-image einfügen

Verfasst: 20.10.2010 22:49

von Johnny80

Hallo,

das klingt einleuchtend.

Ich hab es geändert. Neu hochgeladen. Im ACP alles unter "STYLE-KOMPONENTEN" aktualisiert. Im General Tab den Cache ebenfalls gelöscht. Mit STRG+F5 Seite neu geladen.
Keine Veränderung.
Hab mich dann ausgeloggt. Mit STRG+F5 nochmal neugeladen und anschließend eingeloggt.
Leider keine Verbesserung

Re: 1thank (prosilver) background-image einfügen

Verfasst: 20.10.2010 23:00

von Balint

Hallo,

das "body" wird in deinem Style ein zweites Mal definiert: in der stylesheet.css selbst (erschließt sich mir absolut nicht):

Finde dort

Code: Alles auswählen

body {
    background: #5f5e5e url("{T_THEME_PATH}/images/body-bg.gif") 0 0 repeat-x;
    padding: 30px 0 0 0;
    margin: 0;
}

und entferne das mal probeweise.

Viele Grüße,
Bálint

Re: 1thank (prosilver) background-image einfügen

Verfasst: 20.10.2010 23:26

von Johnny80

Ich hab das mal auskommentiert,

Code: Alles auswählen

/*
body {
    background: #5f5e5e url("{T_THEME_PATH}/images/body-bg.gif") 0 0 repeat-x;
    padding: 30px 0 0 0;
    margin: 0;
}
*/

Und das hatte tatsächlich eine Auswirkung. Wenn auch nicht ganz die, die ich erhofft hatte ^^

[ externes Bild ]
[ externes Bild ]
Und das geht dann in grau bis zum Schluss unten weiter.

Bild 1 groß
Bild2 groß

Mir ist allerdings grad beim editieren der stylesheet.css noch folgende Zeile aufgefallen

Code: Alles auswählen

/*  	
--------------------------------------------------------------
Colours and backgrounds for common.css
-------------------------------------------------------------- */

html, body {
	color: #536482;
	background-color: #5F5E5E;
	background-image: url("{T_THEME_PATH}/images/background.gif");
	background-repeat: repeat-x;
}

Die gleicht zumindest von der Syntax her, dem ersten Vorschlag aus meinem ersten Post. Die dort vorgeschlagenen Änderungen werd ich hier auch noch ausprobieren.

Re: 1thank (prosilver) background-image einfügen

Verfasst: 20.10.2010 23:40

von AY110

Hallo,

ich würde folgendes in der common.css versuchen:

Code: Alles auswählen

html {
   font-size: 100%;
   /* Always show a scrollbar for short pages - stops the jump when the scrollbar appears. non-IE browsers */
   height: 100%;
   margin-bottom: 1px;
}

body {
   /* Text-Sizing with ems: http://www.clagnut.com/blog/348/ */
   font-family: Verdana, Helvetica, Arial, sans-serif;
   color: #828282;
   background-image: url("{T_THEME_PATH}/images/body-bg.gif");
   background-color: #5F5E5E;
    /*font-size: 62.5%;          This sets the default font size to be equivalent to 10px */
   font-size: 10px;
   margin: 0;
   padding: 27px 0;
}

MFG

Re: 1thank (prosilver) background-image einfügen

Verfasst: 20.10.2010 23:53

von Johnny80

Gut möglich, dass das auch funktioniert. Aber hier meine Ergebnisse.

Also:
stylesheet.css

Code: Alles auswählen

/*  	
--------------------------------------------------------------
Colours and backgrounds for common.css
-------------------------------------------------------------- */

html, body {
	color: #536482;
	background-color: #5F5E5E;
	background-image: url("{T_THEME_PATH}/images/body-bg.gif");
	background-repeat: repeat;
}

und die von dir vorgeschlagene Löschung bzw. Auskommentierung von

Code: Alles auswählen

/*

body {
    background: #5f5e5e url("{T_THEME_PATH}/images/body-bg.gif") 0 0 repeat-x;
    padding: 30px 0 0 0;
    margin: 0;
}
*/

funktioniert. Ich kriege folgendes angezeigt

[ externes Bild ]

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

Um das nochmal übersichtlich zusammenzufassen.
Die common.css ist original und unverändert!

In der stylesheet.css wird

Code: Alles auswählen

/*  	
--------------------------------------------------------------
Colours and backgrounds for common.css
-------------------------------------------------------------- */

html, body {
	color: #536482;
	background-color: #5F5E5E;
	background-image: url("{T_THEME_PATH}/images/background.gif");
	background-repeat: repeat-x;
}

zu

Code: Alles auswählen

/*  	
--------------------------------------------------------------
Colours and backgrounds for common.css
-------------------------------------------------------------- */

html, body {
	color: #536482;
	background-color: #5F5E5E;
	background-image: url("{T_THEME_PATH}/images/body-bg.gif");
	background-repeat: repeat;
}

Und aus

Code: Alles auswählen

body {
    background: #5f5e5e url("{T_THEME_PATH}/images/body-bg.gif") 0 0 repeat-x;
    padding: 30px 0 0 0;
    margin: 0;
}

wird

Code: Alles auswählen

/*
body {
    background: #5f5e5e url("{T_THEME_PATH}/images/body-bg.gif") 0 0 repeat-x;
    padding: 30px 0 0 0;
    margin: 0;
}
*/

bzw. ganz gelöscht.

Ich probier deine Variante jetzt aber trotzdem noch aus

Re: 1thank (prosilver) background-image einfügen

Verfasst: 21.10.2010 00:04

von Johnny80

AY110 hat geschrieben:Hallo,

ich würde folgendes in der common.css versuchen:

Code: Alles auswählen

html {
   font-size: 100%;
   /* Always show a scrollbar for short pages - stops the jump when the scrollbar appears. non-IE browsers */
   height: 100%;
   margin-bottom: 1px;
}

body {
   /* Text-Sizing with ems: http://www.clagnut.com/blog/348/ */
   font-family: Verdana, Helvetica, Arial, sans-serif;
   color: #828282;
   background-image: url("{T_THEME_PATH}/images/body-bg.gif");
   background-color: #5F5E5E;
    /*font-size: 62.5%;          This sets the default font size to be equivalent to 10px */
   font-size: 10px;
   margin: 0;
   padding: 27px 0;
}

MFG

Ausprobiert. Originale Dateien mit nur dieser Änderung. Und funktioniert nicht. backgroundimage bis Header-Ende, ab dann grau. Wie im ersten Post zu sehen!
In sofern bleibe ich bei der Lösung direkt hier drüber!

Viele Dank für die Hilfe

Ciao

Re: [gelöst] 1thank (prosilver) background-image einfügen

Verfasst: 21.10.2010 10:15

von AY110

Hi,

na dann ist doch alles gut, hatte es bei mir auch ausprobiert, allerdings mit einer jpg Datei...

Ende gut alles gut

MFG