Hey there! First, I just want to say thanks, in advance, because you guys are always great at helping, and finding solutions to a n00b's inept questions!
So, the thing is that I love this theme!
The only thing is that it's very dated, sort of, with it being so expansion-specific.
I am wondering if anyone can help me figure out how to change the background image to something that may be more guild-specific, or something. Like a generic guild symbol repeated over the whole page, or perhaps just a great big screencap of the guild in a lineup.
Thanks, again!
Changing the background image - PBWoW 3
-
- Registered User
- Posts: 4
- Joined: Thu Mar 22, 2018 2:08 pm
Re: Changing the background image
Hi there!
I'm assuming the core PBWoW code hasn't changed in the latest release, so this is for PBWoW 3.1, but it should be the same. I am also assuming you are using the default style. There are two ways to do it:
Method 1: Overwrite the Image
1) Download the background image found at "root/styles/pbwow3/theme/images/theme/wod.jpg" and open it in Photoshop (or the app of your choice).
2) Now you can add a layer and add whatever images you'd like to overwrite the original image. Keep in mind though the placement of everything. You can also make a new image with the same dimensions and simply save it to your computer as "wod.jpg".
3) (optional) You may want to also edit the image "/styles/pbwow3/theme/images/theme/wod-small.jpg", as that image pops up when the site is viewed on a mobile device or a small screen.
4) Reupload your edited image(s) (with the same name, wod.jpg/wod-small.jpg) to the "root/styles/pbwow3/theme/images/theme" folder. Now refresh your site and you should have the updated background image.
I'm more of a fan of this method because it is easier just to overwrite or restore the image vs. editing the stylesheet. You're also less likely to make an error. However, if you would like to change the image used for the background in the code (or make it a repeating image), use method 2.
Method 2: Change the Stylesheet
1) Upload the new images to serve as a background to "root/styles/pbwow3/theme".
2) Open the file "stylesheet.css" found at "root/styles/pbwow3/theme".
Find:
And
2) Replace "wod-small.jpg" and "wod.jpg" with the names of your new background images, including the file extension. You also have the option here to change it to "repeat" if you want the background image to repeat. I advise using the same dimensions for your new background images as the original ones.
If anything is different, please let me know.
I'm assuming the core PBWoW code hasn't changed in the latest release, so this is for PBWoW 3.1, but it should be the same. I am also assuming you are using the default style. There are two ways to do it:
Method 1: Overwrite the Image
1) Download the background image found at "root/styles/pbwow3/theme/images/theme/wod.jpg" and open it in Photoshop (or the app of your choice).
2) Now you can add a layer and add whatever images you'd like to overwrite the original image. Keep in mind though the placement of everything. You can also make a new image with the same dimensions and simply save it to your computer as "wod.jpg".
3) (optional) You may want to also edit the image "/styles/pbwow3/theme/images/theme/wod-small.jpg", as that image pops up when the site is viewed on a mobile device or a small screen.
4) Reupload your edited image(s) (with the same name, wod.jpg/wod-small.jpg) to the "root/styles/pbwow3/theme/images/theme" folder. Now refresh your site and you should have the updated background image.
I'm more of a fan of this method because it is easier just to overwrite or restore the image vs. editing the stylesheet. You're also less likely to make an error. However, if you would like to change the image used for the background in the code (or make it a repeating image), use method 2.
Method 2: Change the Stylesheet
1) Upload the new images to serve as a background to "root/styles/pbwow3/theme".
2) Open the file "stylesheet.css" found at "root/styles/pbwow3/theme".
Find:
Code: Select all
body.pbwow3 {
background-image: url("./images/theme/wod-small.jpg");
background-position: 0 0;
}
Code: Select all
body {
color: #CCCCCC;
font-size: 10px;
background: #000 url("./images/theme/wod.jpg") no-repeat 49.999% 0;
margin: 0;
padding: 0;
overflow-y: scroll;
}
If anything is different, please let me know.
-
- Registered User
- Posts: 8
- Joined: Thu Nov 10, 2011 10:16 pm