Changing Your WA Affiliate Background
I wasted a lot of time the past few days trying to find a Word Press Express Template to replace my WA Template. I found a couple that I REALLY liked, but when I previewed what my site would actually look like with those templates, the layout just wouldn't work. Aweber forms would be too big for the sidebars or body, or words would be scrambled and spaced incorrectly. I would have to change a few settings and spend a week learning some HTML or learning how to edit style sheets. I concluded that the WA theme is already setup for what I have. I just simply wanted to change the background to something that appealed to me. So that's what I did. Let me show you how I did it.
You get two options for appearance. Blue or Green. That's it. Case Closed. Ok, maybe not. I used the blue theme. Here is what I wanted to do:
What you will be doing is replacing the bg.png file with one that you will create yourself. This image is tiled in the background, so it repeats over and over left to right to fill someones screen. So you'll want a background image that repeats without being too obvious that the background is just a bunch of tiles. The left and right sides should blend together as the image repeats itself.
If you have Photoshop, there is a trick that I use that seems to work great. This is a little advanced, so you might just prefer to get your background images for free from places like infoservemedia.com I actually got my background segments from there and tweaked some of the elements, brightness and colors with Photoshop. Most of these backgrounds will blend beautifully when repeated/tiled. But the trick I use to when making my own backgrounds is to cut the image down the center. You'll have two halves. Put the right half on the left and put the left half on the right. You'll now have a crease down the center of the image. You can blend or heal away the crease with the magic of the tools provided by Photoshop. Here is a quick illustration:
As you can see, no ugly creases. If I would have done a little more blending, the repeating pattern would look even less obvious. The wider the image you have to be tiled, the fewer times an image has to repeat itself across a page, but you also increase the size of the file with wider images. It's good practice to keep the background image simple and small in file size so your visitors aren't tied up waiting for a large image file to download. Technically, the plain and boring WA Background only needs to have a width of one pixel, since it's just repeating solid colors to span the width of a page.
So I created a file that I was happy with. The name of the original WA background image is bg.png so I saved my Photoshop replacement background with the same name "bg.png"
I then used Core FTP (use whatever FTP program you have) to upload my new background to my server. Before I replaced the file, I renamed the original background to "bg2.png" just in case I ever wanted to use it again. Core FTP easily allowed me to change the name. I then transferred my new bg.png file from my computer to the server. Here is the location of the file, keep in mind I am using the blue theme, if you use the green theme the file would be located in styles/green/images:
(websitename.com)/httpdocs/wp-content/themes/wealthyaffiliateblog/styles/blue/images/bg.png
There you have it. Load up your WA website, refresh if you have to, and your new background image is in place. Now, I made my new background image fade to black at the bottom. If you replace your background, you might notice that below your new background image, light blue runs down the length of the page, this is the actual background color in the "Blue Theme". Since I had my background image fade to black, I wanted to make sure to replace the blue color to black.
To change the blue to another color, let's say black, log into your wordpress administration page. Under the dashboard go to the Appearance area and select Editor. Now go to the far right side of your screen and look for the Styles category and select blue.css
Now in the big edit box in the center of your screen, you'll see at the top an entry called body, then one called #main. You are going to change a value in the #main entry. In the first line it says:
background: #cee7fa url(styles/blue/images/bg.png) repeat-x;
(I can't remember is #cee7fa is the value that was there before, since I changed it before writing this tutorial, but anyway you'll see a #123ABC where there is a "#" sign followed by 6 numbers/letters that represents the code for the blue color)
Change #cee7fa to #000000 which will change the background color to black. I noticed that #cee7fa was also listed in the Body entry and changed that to #000000 as well. Click on 'Update File'. View your website, refresh if you have to, and the blue color should be black now, which blends in with the new background image I created.
I made this seem more complicated than it really is. But I'm happy with the way my WA Theme looks now, and I didn't have to install a different theme. I hope you find this useful. Check out my website to see how my background looks at
wealthyaffiliatemembers.com
-Glenn
Recent Comments
2
Handsome website. Good job.