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 » Sun Oct 09, 2011 1:27 pm

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
Christian 2.0
Former Team Member
Posts: 4514
Joined: Wed Nov 04, 2009 11:16 pm
Location: UK
Name: Christian
Contact:

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

Post by Christian 2.0 » Sun Oct 09, 2011 8:51 pm

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 » Mon Oct 10, 2011 10:31 am

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 » Wed Oct 19, 2011 2:44 pm

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
Christian 2.0
Former Team Member
Posts: 4514
Joined: Wed Nov 04, 2009 11:16 pm
Location: UK
Name: Christian
Contact:

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

Post by Christian 2.0 » Wed Oct 19, 2011 4:56 pm

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 » Wed Oct 19, 2011 5:50 pm

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 » Thu Mar 01, 2012 5:28 pm

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 » Thu Mar 01, 2012 8:32 pm

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 » Thu Mar 01, 2012 8:56 pm


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 » Thu Mar 01, 2012 9:46 pm

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 » Fri Mar 02, 2012 7:03 am

I did this and still the same... white background. :(

User avatar
pit-PL
Registered User
Posts: 3086
Joined: Sat Nov 21, 2009 12:24 pm

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

Post by pit-PL » Fri Mar 02, 2012 8:27 am

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 » Fri Mar 02, 2012 9:37 am

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: 3086
Joined: Sat Nov 21, 2009 12:24 pm

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

Post by pit-PL » Fri Mar 02, 2012 10:21 am

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 » Fri Mar 02, 2012 10:47 am

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”