Bungie.net Community
This topic has moved here: Subject: Rip-Saw's Big Guide To The Themebuilder
  • Subject: Rip-Saw's Big Guide To The Themebuilder
  • Pages:
  • 1
  • 2
  • of 2
Subject: Rip-Saw's Big Guide To The Themebuilder

bah

A ton of people have been asking about how to make their own theme. Making your own theme can be fun and frustrating; it is no walk in the woods, but can be very rewarding. I'll assume everyone already knows about what you get for having your theme approved, and everyone already knows Bungie gets to use the theme any way they wish. So, I'll go over all the details about how to make your own theme right here.

To decompress the files I've mentioned in this guide, you will need either Winzip or Winrar. Winrar compresses the files better and I would like everyone to use the rar files instead of the zip files if they have rar expansion capabilities. If any of these links go down, I will try to find another host for the files.

Right off the bat, I think everyone who has Photoshop, no matter what your skill level, should at least download this(99k zip) (87k rar) and take a look at it. It's such a small download and it had all of the images from the images folder arranged in a Photoshop file where they belong. It helps immensely to arrange the images.

First of all, you need one thing for sure, the Themebuild er itself. Without this, you couldn't possibly make a theme. At least, not one Bungie.net could use. And if you do happen to have the skills to figure out how to build a theme without the themebuilder, I'm pretty you don't need to be reading this. Bottom line, you need the themebuilder. Be sure to save this file to a place you can remember. The desktop would be your best bet.

Next step is to ask yourself what kind of image editing software you have at your disposal. To be brutally honest, it would take super l33t skillz to make a good theme with MS paint. Anything less than a program like Photoshop won't get you very far. You can go ahead and try to use MS paint, but ask yourself this: Could you make the current theme of your chapter with paint? If not, then I wouldn't get your hopes up too much on getting your theme accepted. But hey, you can always try. And plus, the image editing is only half the story anyways. The other half is the .css stuff. The styles.css sheet allows you edit some of the colors that appear in the theme. It is almost as important as the image editing. And you don't need any fancy shmancy programs to do that stuff.

So now you have the themebuilder, where to start? Well, first off, read the damn read me file. It'll help a bit. And by a bit, I mean a lot. But if the read me file was a bunch of mumbo jumbo jargon to you, maybe a second explanation will help.

And before I start, it should be noted that I am using Windows XP for this write-up. Many of the things are generic for Macs and other versions of Windows, but a few specific things are different. To open a zip file, right click on it and choose "extract here" or "extract to themebuilder." If a folder named "themebuilder" appears on your desktop, you're all set. If a bunch of files appear, create a new folder and label it themebuilder and put those new files into it. The files should be the folder "default_theme_example" the folder "images" and the files "do_not_change.css" "READ ME.rtf" "styles.css" "themebuilder.htm" and "Themebuilder_key.jpg". Put them into the themebuilder folder. Don't be alarmed if you don't see the .jpg or .rtf or .css. These are simply file extensions. They tell the computer what kind of file they are. If you can't see them, and you would like to, open up your new "themebuilder" folder and go up to "tools" and then "options." Go to "view" and in the "Advanced settings" field, find "hide extensions for known file types" and make sure it is un-clicked. Then click "OK"

Themebuilding for dummies: (You know who you are)
First off, you'll see several things in the themebuilder folder (or main folder). Open up the "default_theme_example" folder and then open up "default_theme_example.htm" to see what the normal theme looks like. Close that down, and go back to the main folder. Now open up "ThemeBuilder.htm" and then open the "images" folder. Go up to "View" and click on "Filmstrip" or "Thumbnails" (Win XP only). You can see that all of the images in the "images" folder appear in the "ThemeBuilder.htm" file. If you can't use filmstrip or thumbnails, just open up a few files in this folder. These images are the images the themebuilder file references. So changing them and saving the changes will change the Themebuilder page.

Now, open up "Themebuilder_Key.jpg" in the main folder, and "styles.css." Styles.css can be opened with many programs, and your best bet is Notepad or WordPad. If double clicking the file doesn't work, right click it, and go down to "Open with" and then choose WordPad (Win XP only for sure). The themebuilder_key references many of the things you need to change in the styles.css file. In the styles.css file, you'll see things like "right side_text_color" and "forum_row_alt_bgcolor" followed by 6 numbers and letters. In the Themebuilder_key, you can also see these words (they are both on the far right side). Changing the numbers and letters in the styles.css will change the colors in Themebuilder.htm (not the key).

So, just for fun, go to the "images" folder and open up "BodyBackground.gif" You'll see a line. Look at the program that opened it. It was probably Windows Picture and Fax Viewer. In the bottom of the window, there are some buttons. The second button from the right says "Closes this program and opens the image for editing (Ctrl+E)" go ahead and click that, or hold down the Ctrl key and the E key at the same time. (If you have Photoshop, you don't have to do this part, but read it anyways.) This will open the file in MS paint. Click on yellow or green or red and start drawing on the image. You can zoom in to see it easily. You can't draw on the image because it is a .gif image. We need to change it. So, go to "File" and then "Save as." Go to where it says "save as type" and choose "24-bit bitmap." Click "Save." Now choose your color (a bright one) and draw on it. It now works. Draw all over it with pretty colors, then go to "File" "save as" and choose "save as type" GIF this time. Click save. It will ask you two things: "This file already exists. Do you want to replace it?" click yes and then it asks "Saving into this format may cause some loss of color information. Do you want to continue?" click yes. Now, in the main folder, open up Themebuilder.htm (or refresh it) and look at it. As you can see, the colors you added to the file show up in the themebuilder page (if you chose to refresh and nothing happened, close it and open it.)

For those with Photoshop, there's a better way to do this. Open up Photoshop, and go to "File" "Open" and then open the "themebuilder" folder and then the "images folder." (You may need to look for the themebuilder folder.) Click on "BodyBackground.gif" and open it. Go up to "image" "mode" "RGB color." Now draw all over it with the pretty colors like I described above. Now go to "File" "save for web" on the right, choose "gif" and up the colors to 256 or your maximum number. Click "OK" and then find the themebuilder folder and then the images folder and click "save." It'll ask if you want to overwrite, yes you do. Now go open themebuilder.htm or refresh it. Pretty colors.

Now, for the other half of the experiment. Open up styles.css and find "RIGHTSIDE_TEXT_COLOR" To make finding it easier, go up to "Edit" "Find" and where it says "Find what" type in "RIGHTSIDE_TEXT_COLOR" and click "Find next" until you get a message. You'll find 2 places where it appears, and they are real close to each other. After RIGHTSIDE_TEXT_COLOR you'll see "color: #59C3DE;" Change "#59C3DE" to "green" for both places where it appears. Now go up to "File" "Save." Open up themebuilder or refresh it and look at the right side. Where it says "Bold rightside text" it should now be green. You have changed the styles.css file and now the page looks different.

Open up themebuilder_key again and look at all the words that Bungie put in with the lines pointing. These are all things you have to change in styles.css to make a theme (there are many not on themebuilder_key that need changing too). And all the images in the images folder need to be changed as well. This is a very daunting task that will take many many hours of hard work over several weeks. For every image you want to edit, you will need to do that entire process with Paint or Photoshop. And for every different text color you will need to find what you want to change, then change it. The themebuilder_key helps a lot there.

If you're still sure you want to do this, read on to the next post.

[Edited on 5/9/2005]

  • 12.26.2004 11:26 PM PDT
Subject: Rip-Saw's Big Guide To The Themebuilder Part 2 of 2

bah

If you wish to continue, I'll tell you a few very important things you'll need to know:
1. All of the files in the images folder except "HeaderBackground.jpg" are .gif files and need to be saved as GIFs in paint or Photoshop. HeaderBackground.jpg needs to be saved as Jpeg in Paint and Photoshop. Make sure you do this, or else the themebuilder file won't be able to read the file!
2. Some of the files in the images folder have no readily apparent use as to how they work. My advise is, before running to me asking me what it does or exactly how it works, play around with changing its colors to something that sticks out. Make the top half green and the bottom red and save it, then open the themebuilder page. It'll stick out real nicely, so you should be able to figure it out.
3. All the parts in styles.css have meaning too, although a bunch are not apparent. Some of them only appear when you hover over a link, and some don't appear at all. I'm not a genius with .css, so even I am not certain as to what these ones do. My best advise is to pick a color that matches your theme and stick it in all the places where that particular type comes up. Like all the "BGCOLOR"s should probably be the same color, and all the "VISITED" colors should too.
4. The "COLOR:" field should either have a color name after it, or the number symbol then a hex number. Don't put down #red or #blue and don't put down just 3Ed5F1 or 5F1B8A.
5. Hex numbers represent the amount of red, green, and blue in the color. F means the most, and 0 means none. The 6 digit hex number is split into 3 areas, the first 2 digits are for the amount of red, the second 2 are for the amount of green, and the last 2 are for the blue. You can choose between 0,1,2,3,4,5,6,7,8,9,a,b,c,d,e, and f for your digits. 00 would mean none of a color, and FF would mean a lot of that color. 0000FF would mean no red, no green, but a lot of blue, and 00ffff would mean no red, a lot of green, and a lot of blue. This would combine blue and green to make cyan. Red and blue makes magenta, and red and green make yellow (yes, yellow.) All the colors combined make white. And none of the colors is black. The first digit for a color is a course adjustment, while the second fine tunes it. F00000 is about as red as FF0000, while 0F0000 would be very little red. Use Google for more information on hex colors.
6. When you're done and ready to send your theme to Bungie, please make sure you have removed all extra files from the images folder. You'll have a lot of bitmap (.bmp) files in there if you used Paint. Bungie doesn't want those, so they only take up added space. Remove them and put them somewhere safe, but not anywhere in the themebuilder folder.
7. All your images in the images folder must be the same view size as the originals. They must have the same dimensions. Bottomgraphic.gif MUST be 564 pixels wide and 116 pixels tall. No more, no less.
8. Show your theme to your friends online and get their opinion on it. I won't go into what a "good theme" looks like, but your friends can probably give you good objective criticism.

Up to this point, you should now be able to make your own theme, granted that you really wish to do so. Even some people who are really good at this stuff lack the time to get one done. Others choose to do a little here and a little there. If I've made the whole themebuilding business sound time consuming and difficult, then I've done a good job in conveying the truth. No one can build a (great/phenomenal/worthy of Bungie) theme in a day from scratch. No one. Those who are good could do it in a week, those who are smart will take longer. No one (who knows what they're talking about) said this would be easy.

Although I did find a way that may be easier for people with Photoshop. If you have Photoshop, and are still thinking about making a theme, I'd go ahead and download this (302k zipped) (188k rar) I'd explain what it is, but Louis Wu has a much better way with words. Basically, I made this to help myself, and then decided I'd spiffy it up so that others could use it. I updated the file Louis linked to be a little more computer friendly. It really helped me with making the theme I submitted, and most people I showed my theme to liked it.

Open it. It'll unzip the same way as the themebuilder did. Now, open up theme.psd. First off, can you open the folders within the file? I used Photoshop CS to create the file, and not all previous versions of Photoshop will be able to see the layers inside the folders. If you can't, then I'm afraid that file will be of no use to you. (However, the file Louis mentioned in that news story could still be used as it has no folders in it.) Whichever file you use, look at the names of the layers. You should recognize these as the same types of names that appear in styles.css, as indeed they are. You can use theme.psd as a reference guide to where all the things in styles.css appear in the themebuilder.htm. You could even color in all the text with the colors you want, and thus design the whole theme from Photoshop, with an easy template to guide you.

There is one more folder in theme.psd that is of importance, and that is "gifs and header.jpg" This folder contains all of the gifs and the header in their exact locations (save a few that appear segmented in multiple locations). This part of the document will help anyone to design their theme. It allows the designer to design the entire theme in Photoshop, just the way they want it. It's all lined up properly so you don't have to guess and check. I have just that part of the file here (99k zip) (87k rar) for those interested in just that part. It's the same one I mentioned in the second paragraph.

Well, I guess that about does it. This write-up should be comprehensive enough that anyone could figure out how to create their own theme, but someone always manages to prove that no matter how good you are at typing directions, you're not perfect (although I'd like to think I am, ask anyone). So if you ever have any trouble with any of the steps, first, come back to read the FAQ I will undoubtedly make at the end of this last post, and if your question isn't answered there, feel free to PM me with your question. If your question has to do directly with how to do something on a Mac, I don't know the answer. Ask a Mac person. They'll know.

Any Mac question answerer volunteers?

  • 12.26.2004 11:27 PM PDT
Subject: Rip-Saw's Big Guide To The Themebuilder FAQ Section

bah

Q. Why a separate section just for the FAQ's?
A. Because I only had 3,000 characters left on that second post, and odds are I'll use more than 3,000 answering questions. Plus, this way people can check only this post as I won't be changing the other 2.

Q: I hate to ask but...what's a theme?
A (by VII Toast): A theme is something used to customize the look and the feel of that group. Right now, people are building themes for their groups to use your own avatar on bungie.net.

Q: How do you colour the sections with "Subject" and "Body" in?
A: In the images folder thaere's a gif called ForumInput. That's what controls the main text field color.

Q: How do you change the Navtop and bottom?
A: The very first two lines of the Styles.css has the links to the image used. Look in the images/MainNav/ folder to see which one you want, then copy the name to the end of the images/MainNav/ line.

[Edited on 4/30/2005]

  • 12.26.2004 11:27 PM PDT
  • gamertag:
  • user homepage:
  • last post: 01.01.0001 12:00 AM PDT

Dude the paragraph is too long. Its not like somebody is going to read it

  • 12.29.2004 9:29 AM PDT

- Mike

Posted by: Hazzard Man
Dude the paragraph is too long. Its not like somebody is going to read it

Really? Maybe your not going to read it becuase you dont want to. If nobody was going to read it then why is it a sticky? Then again it was just your opinion.

Anyway Rip... I read it, well some of it and it show me some thing i didnt notice. Im working on a theme right now! :)

  • 12.29.2004 10:20 PM PDT
  • gamertag:
  • user homepage:
  • last post: 01.01.0001 12:00 AM PDT

Do people really need this?

  • 01.02.2005 3:41 PM PDT
  • gamertag:
  • user homepage:
  • last post: 01.01.0001 12:00 AM PDT

I hate to ask but...what's a theme?

  • 01.02.2005 5:44 PM PDT

This is a great post. Nice work Rip Saw.

  • 01.02.2005 7:59 PM PDT

bah

Posted by: unireal
Do people really need this?
Well, obviously at least one person did. So, yes.

  • 01.02.2005 10:54 PM PDT
  • gamertag:
  • user homepage:
  • last post: 01.01.0001 12:00 AM PDT

Posted by: unireal
Do people really need this?

Talking about the devil...

  • 01.03.2005 4:42 AM PDT
  • gamertag: [none]
  • user homepage:

Only read the first part, just because i was bored. it's nice, but since ialready know all that stuff, i can't tell if it's usefull....

  • 01.03.2005 6:22 AM PDT
  • gamertag:
  • user homepage:
  • last post: 01.01.0001 12:00 AM PDT

Very useful. I wanted to build a theme and didn't even know where to start.

Now I not only know where to start....I know how to finish. =P

EDIT: Thanx a lot Rip Saw. (initially called you rip, but then saw your post in the next thread). :)

[Edited on 1/3/2005 8:25:56 AM]

  • 01.03.2005 8:20 AM PDT
  • gamertag:
  • user homepage:
  • last post: 01.01.0001 12:00 AM PDT

I was wrong. Appearantly people do need help.. Then indeed this is a great way to help.

  • 01.03.2005 12:09 PM PDT

Nar. =)

  • 01.09.2005 6:36 PM PDT
  • gamertag:
  • user homepage:
  • last post: 01.01.0001 12:00 AM PDT

Thanks man...this is a great help for me

  • 01.16.2005 5:39 PM PDT
  • gamertag:
  • user homepage:
  • last post: 01.01.0001 12:00 AM PDT

could someone use really easy terms cause i mised half of that

  • 02.22.2005 8:20 AM PDT
  • gamertag:
  • user homepage:
  • last post: 01.01.0001 12:00 AM PDT

Posted by: The Rip Saw
Q. Why a separate section just for the FAQ's?
A. Because I only had 3,000 characters left on that second post, and odds are I'll use more than 3,000 answering questions. Plus, this way people can check only this post as I won't be changing the other 2.

Q: I hate to ask but...what's a theme?
A (by VII Toast): A theme is something used to customize the look and the feel of that group. Right now, people are building themes for their groups to use your own avatar on bungie.net.


you know this is a little hard to understand couldn,t you make a list for me of
download this download that make a pic copy and paste and save it and that
kind of stuff

  • 02.22.2005 9:28 AM PDT

bah

Posted by: halo2vscovenant
you know this is a little hard to understand couldn,t you make a list for me of
download this download that make a pic copy and paste and save it and that
kind of stuff
No. You have to read the guide to find out what to download. And I cannot simplify it any more than it already is.

  • 02.24.2005 12:17 PM PDT
  • gamertag:
  • user homepage:
  • last post: 01.01.0001 12:00 AM PDT

ok thanks i guess ill jusr figure it out then using your nice guide

  • 02.27.2005 4:42 AM PDT
  • gamertag:
  • user homepage:
  • last post: 01.01.0001 12:00 AM PDT

what if the links don,t work?

  • 02.27.2005 5:28 AM PDT
  • gamertag:
  • user homepage:
  • last post: 01.01.0001 12:00 AM PDT

Great Posts, it took me a few reads to "get" it, but now I understand what your saying...Thanks a lot...

[Edited on 4/8/2005]

  • 04.04.2005 1:01 PM PDT

-Quaere verum.

Got a report? Use the report tool or send a pm.
Chairleg Productions presents: 'Console Wars' and 'Games as Art?' (also on Halo Waypoint).

Wow. thanks Rip-Saw. You answered my questions. Now i can complete my theme!

[Edited on 5/1/2005]

  • 04.30.2005 3:07 PM PDT

  • Pages:
  • 1
  • 2
  • of 2