Note: This guide is assuming you are using the latest Opacity theme and Stylish 1.0

If you remember, I did a blog post about customizing Gamespot Ice. Now it's time I did the Opacity theme since it's a bit different. I'll also be updating the Gamespot Ice blog later since it's a bit out of date now. =P

The big thing about the Opacity theme is that the background of the site is transparent thus letting you see a nifty background image. So it is important to choose a good image! The only advice I can give you about choosing a good image is to choose one with one main color scheme. Trying to transparent objects above an image that has tons of colors doesn't work that well(although you might be able to pull it off). Feel free to experiment with many images, it took a while before I found the image for the Opacity theme. Now that you have an image how do you add it to the theme? It's quite simple, you only have to edit one line. To edit a GS theme in Firefox go to Tools > Addons > User Styles. Just click on the Gamespot Opacity Theme and click the edit button. Now the Opacity css file will show up in a popup window for you to edit. To insert your own image you need to edit this line(it's at the beginning of the code):

HTML wrote:

background-image: url('http://i45.photobucket.com/albums/f60/bededog/kiss2.jpg') !important;

You have two options, use an image from the internet like the theme already does, or use an image from your hard drive. To use an image from the internet just replace the url with your desired image's url. If you want to use an image from your hard drive you need to do this:

HTML wrote:

background-image: url(file:///) !important;

After the file:/// insert the location of your image(EXAMPLE: C:/Users/bededog/Pictures/picture.jpg NOTE: Make sure you use forwardslashes '/' NOT backslashes '\'). Once you have the image location entered you can press the preview button(bottom left) to see it in action. If no image shows up you did something wrong.

Okay so now that we have an image chosen we need to change the background colors of the site! With the newly update Opacity theme it now uses a CSS attribute called rgba to make the transparent backgrounds. Rgba stands for Red, Green, Blue, Alpha. The syntax looks like this:

HTML wrote:

background: rgba(1, 1, 1, .4) !important;

The first three numbers are the rgb colors. You can get the rgb values for various colors by opening paint or some other image editor(IE: GIMP, Photoshop) and mess around with the color panels. The last number is the alpha channel; the alpha channel effects how transparent the color is. A 1 is no transparency at all, a 0 is full transparency, and any decimal(up to two places IE: .02) is semi-transparent. The Opacity theme is separated into three different color areas. Each one has a comment block above it to let you know when you have gotten to a new section. They are at the beginning of the code right under were you put the image.

The first color block is meant to be the image background color. It is recommended you choose something darker for this color. The second color block is for lighter color objects, such as headers, choose a light color for this one. And the last color block is for another dark color. My main advice for choosing colors is just to experiment. It takes a while to find just the right color, don't give up! Also, make sure you test the colors on multiple different pages so it looks all right on all pages(I usually test on the topic pages, in threads, profiles). To test out the colors just press the preview button.

Now all we have left are the link colors. For this one I suggest testing on the news page. As you can see on this page the link colors are separated into two colors, a light and darker color. To change the color of links scroll down the code until you find a block comment that says: "This changes the color of various text found around the site." The first and second color attributes are the ones you want to edit. To change the color of a link you can use various methods. The Opacity theme by default uses HTML notation to change the color. I don't want to get into HTML notation, so we'll just use rgb. Replace the following:

HTML wrote:

color: #a172ff !important;

with:

HTML wrote:

color: rgb(0, 0, 0) !important;

Just replace the numbers with the rgb values of choice, there is no alpha channel here since the links aren't transparent. Once again experiment with colors until you find the right ones.

And that's all folks! It isn't that hard to customize it. =3

Also, if you want to keep your theme and still have the Opacity theme you can write a new theme. In the User Style window(Tools > Addons > User Styles) there is a button on the bottom right to write a new style. Click the button then copy and paste the entire edited Opacity style into the new window. Then just type in a name and save it!

---

Here is an example of a custom opacity theme I made. I'll go step-by-step and show you everything I changed to get the final product.

The final product looks like this:

***SPOILER***

Step 1; Inserting an Image:

***SPOILER***

First off I found this image, and downloaded it to my computer.

I then changed this:


into this:

Step 2; Choose the first color:

***SPOILER***

After messing around with a lot of different colors I came up with the color 46, 66, 107 with an alpha channel of .7 To add it in I changed this:


into this:

Step 3; Choose the second color:

***SPOILER***

I choose a second color 106, 147, 235 with an alpha of .3

I changed this:


into this:

Step 4; Choose another color:

***SPOILER***

For this one I didn't change the color, I like the color Opacity had be default. But if I was going to change the color this is the code I would change:

Step 5; Choose link colors

***SPOILER***

This is the last step! I choose some colors for the links. For this one I didn't use rgb, I used HTML notation to change the colors(you'll use rgb though).

I changed this:


into this:

(Optional)Step 6; Center background:

***SPOILER***

This is an optional step. I added some code that centers the background image so Konata(the girl in the image) will remain in the background and not go off the screen. I changed this:


into this:

And that is all I changed! =3

---

Other helpful tips
Okay here are a few other tips I forgot to mention in the first post.

When you are adding an image from your computer you might have a space in the file location(IE: C:/Users/bededog/My Pictures/picture.jpg). You can't leave the space in there or the image won't show up. In programming terms you just need to insert an escape sequence. All that means is adding a ' ' backslash before the space. IE: C:/Users/bededog/My Pictures/picture.jpg

Another thing you will want to change is the search icon and arrow colors seen here:



Now both of these are images. So there is not easy way to change the colors. You have to upload your own image and replace the image url in the code with your own file. But I have made it a bit easier for you.

For the search icon I already have a couple different colored ones uploaded for the various GS themes. You just need to edit the url a bit to get the other colored icons. This is the section of code you want to change:

HTML wrote:

#content form.mini_search span.submit button, #site_footer .search button.submit { background-image: url('http://i45.photobucket.com/albums/f60/bededog/search_icon_purple.jpg') !important; }

Right now I have four search icons you can choose from. The purple one is the url already in the code. To get a red icon just replace the search_icon_puprple.jpg at the end of the url with search_icon_red.jpg To get a green change it to search_icon_green.jpg And for a blue one just change it to search_icon.jpg

Now let's change the arrow color. Right now I only have two arrow colors up, the purple one and a blue one. To change the arrow color just change this:

HTML wrote:

.page_flipper a, #video_promo_side ul.actions li.play a span { background-image: url('http://i45.photobucket.com/albums/f60/bededog/arrows-1.gif') !important; }

The default image is the purple arrows. Change the end of the url from arrows-1.gif to just arrows.gif for a set of blue arrows. The finished product will look like this:

---

If you have any questions you can PM me or leave a comment!

Also, a cookie to whomever knows what show Konata is referencing in the image. ^_^