Page 1 of 2

change bg color to bg image - milky way template

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

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

Posted: Sun Oct 09, 2011 8:51 pm
by Christian 2.0
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. :)

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

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

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

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

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

Posted: Wed Oct 19, 2011 4:56 pm
by Christian 2.0
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>

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

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

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

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

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

Posted: Thu Mar 01, 2012 8:32 pm
by HGN
Link to your board please..

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

Posted: Thu Mar 01, 2012 8:56 pm
by bhbebe

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

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

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

Posted: Fri Mar 02, 2012 7:03 am
by bhbebe
I did this and still the same... white background. :(

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

Posted: Fri Mar 02, 2012 8:27 am
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.

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

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

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

Posted: Fri Mar 02, 2012 10:21 am
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.

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

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