change bg color to bg image - milky way template

For support and discussion related to templates, themes, and imagesets in phpBB 3.0.
Scam Warning
tassie1300
Registered User
Posts: 28
Joined: Wed Apr 20, 2011 9:55 am

change bg color to bg image - milky way template

Post by tassie1300 »

Hello,

I am using a milky way template where the standard is a background in a color. However I would like to change the background color in a background image. How do I need to do this? Cause I absolutely have no knowledge on how to do so. But I can follow directions... so if anyone could explain how and where to adjust, I would really appreciate this.

Many thanks in advance.

Best wishes,
Natasja
User avatar
PlanetStyles.net
Former Team Member
Posts: 4809
Joined: Wed Nov 04, 2009 11:16 pm
Location: Way up in the sky close to the stars
Name: Christian
Contact:

Re: change bg color to bg image - milky way template

Post by PlanetStyles.net »

Hi Natasja :)

Firstly, connect to your site through a file manager or FTP client. Then download: /styles/milky_way/theme/stylesheet.css

Find:

Code: Select all

body {
	/* Text-Sizing with ems: http://www.clagnut.com/blog/348/ */
	font-family: Verdana, "Trebuchet MS", "Lucida Grande", Helvetica, Arial, sans-serif;
	color: #333333;
	background-color: #FFFFFF;
	font-size: 62.5%; /* This sets the default font size to be equivalent to 10px */
	margin: 0px 10px 0px 10px;
}
In-line, find:

Code: Select all

background-color: #FFFFFF;
Replace with:

Code: Select all

background: url("./images/your-background-image.gif") no-repeat left top #FFFFFF;
There are a few options you can change depending on your background and where you want it positioned.

no-repeat can be repeat-x or repeat-y
left can be right or even a percentage such as 50%
top can be bottom or a percentage such as 50%

If you need any more help, let us know the link to your board, the background image you want to use and how you want to display it. :)
tassie1300
Registered User
Posts: 28
Joined: Wed Apr 20, 2011 9:55 am

Re: change bg color to bg image - milky way template

Post by tassie1300 »

Hi Christian,

Wow thank you very much for the full explanation. I am going to follow your directions and let you know if I managed to do so.

Best wishes, Natasja
tassie1300
Registered User
Posts: 28
Joined: Wed Apr 20, 2011 9:55 am

Re: change bg color to bg image - milky way template

Post by tassie1300 »

Hoi Christian,

Today I changed the background. Thank you for helping. However I got a problem with a border on the left side, which originally had a shadow and now I changed that image gif and made it smaller, but now it is floating a little bit too much to the left. This is my forum: http://www.young-adults.nl/forum

Do you know how to adjust the border, so it will look the same as on the right. I changed the pixels in the css sheet to 3 px, instead of 9, but it didn't worked.

Hope you can help solving this issues.

Look forward to hear from you.

Best wishes,

Natasja
User avatar
PlanetStyles.net
Former Team Member
Posts: 4809
Joined: Wed Nov 04, 2009 11:16 pm
Location: Way up in the sky close to the stars
Name: Christian
Contact:

Re: change bg color to bg image - milky way template

Post by PlanetStyles.net »

Hi again :)

Open: /styles/milky_way/template/overall_header.html

Find:

Code: Select all

<td class="leftshadow" width="9" valign="top"><img src="{T_THEME_PATH}/images/spacer.gif" alt="" width="9" height="1" /></td>
Replace with:

Code: Select all

<td class="leftshadow" width="3" valign="top"><img src="{T_THEME_PATH}/images/spacer.gif" alt="" width="9" height="1" /></td>
tassie1300
Registered User
Posts: 28
Joined: Wed Apr 20, 2011 9:55 am

Re: change bg color to bg image - milky way template

Post by tassie1300 »

Wow thank you very much for your help!

I managed to change it and it looks great now. Really appreciate it :)

Best wishes, Natasja
bhbebe
Registered User
Posts: 81
Joined: Tue Apr 07, 2009 9:24 am

Re: change bg color to bg image - milky way template

Post by bhbebe »

I did what Cristian suggested and what I got is white background
I would like to have this image as my background: http://i44.tinypic.com/20rwg89.jpg
also I want to change forum width to 80%, but don't know how.

Thanks for any kind of help.
User avatar
HGN
Former Team Member
Posts: 4706
Joined: Wed Dec 03, 2008 1:53 pm
Location: The Netherlands
Name: Alfred
Contact:

Re: change bg color to bg image - milky way template

Post by HGN »

Link to your board please..
bhbebe
Registered User
Posts: 81
Joined: Tue Apr 07, 2009 9:24 am

Re: change bg color to bg image - milky way template

Post by bhbebe »

User avatar
HGN
Former Team Member
Posts: 4706
Joined: Wed Dec 03, 2008 1:53 pm
Location: The Netherlands
Name: Alfred
Contact:

Re: change bg color to bg image - milky way template

Post by HGN »

Did you follow the instructions of Christian in the second post in this topic?

Your board now has a pink background, as specified in stylesheet.css:

Code: Select all

body {
	/* Text-Sizing with ems: http://www.clagnut.com/blog/348/ */
	font-family: Verdana, "Trebuchet MS", "Lucida Grande", Helvetica, Arial, sans-serif;
	color: #444444;
	background-color: #F6CED8;
	font-size: 62.5%; /* This sets the default font size to be equivalent to 10px */
	margin: 0px 10px 0px 10px;
}
To get an image on the background find

Code: Select all

	background-color: #F6CED8;
replace with

Code: Select all

	background: url('http://i44.tinypic.com/20rwg89.jpg') repeat #F6CED8;
It would be better to upload the image to your server to /styles/milky_way/theme/images/ giving it the name background_image.jpg and then use the following:

Code: Select all

	background: url('./images/background_image.jpg') repeat #F6CED8;
bhbebe
Registered User
Posts: 81
Joined: Tue Apr 07, 2009 9:24 am

Re: change bg color to bg image - milky way template

Post by bhbebe »

I did this and still the same... white background. :(
User avatar
pit-PL
Registered User
Posts: 3212
Joined: Sat Nov 21, 2009 12:24 pm

Re: change bg color to bg image - milky way template

Post by pit-PL »

Change background-color: url('./images/background.jpg') repeat #F6CED8;
to background-image: url('http://i44.tinypic.com/20rwg89.jpg');

btw
There is no background.jpg in /images folder.
bhbebe
Registered User
Posts: 81
Joined: Tue Apr 07, 2009 9:24 am

Re: change bg color to bg image - milky way template

Post by bhbebe »

Changed, but nothing

I put 3 kind of images: background.jpg, background.pgn, background.gif, in folder www/forum/images .. is that correct place? I tried with every kind, but nothing happened.
User avatar
pit-PL
Registered User
Posts: 3212
Joined: Sat Nov 21, 2009 12:24 pm

Re: change bg color to bg image - milky way template

Post by pit-PL »

Changed, but nothing
Take a look at my previous post once again.

btw
There is no background.jpg in styles/milky_way_red/theme/images/ folder.
bhbebe
Registered User
Posts: 81
Joined: Tue Apr 07, 2009 9:24 am

Re: change bg color to bg image - milky way template

Post by bhbebe »

It worked with this :)
background-image: url('http://i44.tinypic.com/20rwg89.jpg');

sorry, didn't notice that I have to change this url totally :oops:
so every time I want to change background image, I have to upload it thru tinypic or other uploader and change the code?



thnx a lot for ur help !!!!
Locked

Return to “[3.0.x] Styles Support & Discussion”