This is what I'm trying to do.
Yes I created the Images Like the instruction said through Adobe Photoshop CS2. These are the Instructions I followed:
www.lumpyguide.hostingzero.com/opacity/opacity.txt###########################################
# Installing The Opacity Code (Proboards) #
# By: Joe C. #
###########################################
# The Opacity code was created by ethix #
# and must not be posted in full or part #
# anywhere other than the places #
# specified in the opacity code css file. #
# For more information, visit: #
#
opacity.proboards33.com. #
###########################################
1) Get the code, copy it, open Notepad and paste it on there.
2) Save this file somewhere on your computer as opacity.css (on the save screen, in the file name box, type: "opacity.css" with the quotes to stop Notepad making it a text file.
3) OK, now we need to make our image. Open an image editor (preferably Adobe Photoshop or Macromedia Fireworks, something along those lines)
### COMMENT ####################################################
# The below part is about Photoshop and graphics. If you need #
# more help with it, go to the bottom of the document... #
################################################################
4) As said in the instructions, create a new 50x50 image with a transparent background.
5) Create a new layer, and fill it with the colour of your choice
6) Then, click on the layer and make it 50% transparent
7) Copy the layer, and create a new image, but this time 1x1 with a transparent background
8) Paste your 50x50 layer into this file and resize it (you may need to have a major zoom in to do this)
9) Save this 1x1 file as 'oimage.png' (MAKE SURE YOU SAVE IT AS A PNG-24 FILE) and close the file (NOT the 50x50 one though)
10) As said in the instructions, you need to create a different image for internet explorer. Go to your 50x50 image and change the transparency to 56%
11) Do step 7 again
12) And do step 8
13) Then save it as 'ieimage.png' (MAKE SURE YOU SAVE IT AS A PNG-24 FILE)
14) You can close your graphics program now.
15) You now need to edit that opacity.css file you saved earlier
16) Open it up, and skip past all the instructions until you find the first line saying, "/* Internet Explorer will use this */"
17) Look two lines under it and find where it says:
yourhost.com/image.png18) Change yourhost.com to the place you will be hosting the opacity.css file and the images. Change image.png to ieimage.png
19) Now, go to the next line down saying, "/* Mozilla will use this */"
20) Again, find the part saying
yourhost.com/image.png21) Change yourhost.com to the place you will be hosting the files, and image.png to oimage.png
22) Do this for all of the parts under this (they alternate), until you get to the bottom of the file.
23) Save it!
24) We're nearly done, all we need to do is upload those three files.
25) Go to your host, and upload opacity.css, ieimage.png and oimage.png to the directory you specified in the steps above when you were doing the URLs
26) Finally, go to your board, Modify Headers and Footers and put the following code in all your headers:
### CODE #######################################################
# <LINK REL=StyleSheet HREF="http://yourhost.com/opacity.css"> #
################################################################
27) Change yourhost.com to the place you will be hosting the files!
28) Final thing to do, find a nice background image (I don't know what size, I used an 800x600 one and it repeated itself a little bit, maybe try 1024x768?)
29) Upload this file, and make it your background image (use the skin management option) on your admin panel.
30) And now you should be done! Your board is transparent! For an example of what this looked like, I followed my own tutorial and made up this:
thebill101forum.proboards3.com/index.cgi. Not perfect, but I couldn't find a decent background image!
###########################################
# Making the transparent images #
# By: Joe C. #
###########################################
# The Opacity code was created by ethix #
# and must not be posted in full or part #
# anywhere other than the places #
# specified in the opacity code css file. #
# For more information, visit: #
#
opacity.proboards33.com. #
###########################################
This is explained briefly in the above tutorial, but for those who need a bit more help. If you don't have Photoshop, then you may have to play around a bit with your graphic program to achieve the desired effect, anyway, here goes:
1) Open Photoshop (I'm using CS2 but any version should be OK)
2) Click File -> New
3) In the Name box type: 'ieimage'
4) Width: 1 pixels
5) Height: 1 pixels
6) Leave the rest, apart from Background Contents, which you should make say 'Transparent'.
7) A window will appear, and you will probably not be able to see anything, so we need to zoom in. Press [CTRL +] (thats CONTROL + PLUS) a few times, until the box is very big.
8) Right, now for the main part, create a new layer by pressing (SHIFT + CTRL + N).
9) You probably won't notice a difference, but something has occured.
10) On the toolbar on the left, select the rectangular marquee tool (or press M)
11) Right, now drag your cursor from the top left of the box to the bottom right (so everything is selected).
12) Just leave this as it is now, and look at the left bar again. Near the middle, there should be two boxes with different colours in.
13) Click the top box and a screen will appear. Select the colour your transparent image is going to be.
14) Now we need to fill this box. Select the Paint Bucket Tool (or press G). This may bring up the gradient tool, and we don't want this, so click it again.
15) OK here we go. Click inside the box and it should fill up with your colour.
16) We need to make it transparent now. On the RIGHT bar, look to the bottom where your layers are. Right click on the one that is selected.
17) A long list will appear. Go to the top of it and click Blending Options.
18) Find the 'General Blending' area, and find the opacity bar. Make it 56% and click OK.
19) Right so it should be transparent now (light blue with a kind of checkerboard background).
20) OK, we need to do all of that again (DON'T CLOSE THE IEIMAGE WINDOW THOUGH) with the following changes:
21) In step 3, replace 'ieimage' with 'oimage'.
22) In step 18, replace 56% with 50%.
23) So we have our two transparency images created, all we need to do now is save them.
24) Go back to your 'ieimage' window. Click File -> Save for Web
25) A window will appear! On the right bar of this window, there are a number of options. Find the box which has the list of image types in (GIF, JPG, PNG, etc.)
26) Select PNG-24 (NOT PNG-8!)
27) Make sure the transparency box is checked, and then click Save. Type 'ieimage' in the save box (without the quotes).
28) We need to do it again for the other image now. Do the steps in the above section, but replace:
29) In step 24 replace 'ieimage' with 'oimage' (so you are opening the 'oimage' window)
30) In step 27 replace 'ieimage' with 'oimage'.
And there you have it! How to make the transparent image. I think this should work although I've not thoroughly tested it, if it has any mistakes please let me know.
Anyway, for now - good luck!