- Gods Prophet
- |
- Forum Ninja
-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).
Posted by: Zee JollyRoger
Can anyone help me? I can't figure out the damn instructions. Of course I am more a kinestetic learner. I have good Ideas...but it is so damn confusing. If anyone could give me step by step instructions...maybe a theme master...please PM me...or post them in here. Thanx.
Here's my 'Basic Bits Guide to Themebuilding'
I have a version in word with pictures, but here's the written bits. It should still make some sense. It's just some basic building. Enjoy:
The Basic Bits Guide to Themebuilding
By Gods Prophet
* Step1:0) Work out which theme you want to do. For example, a Halo: CE theme.
* Step1:1) Also think up what colours you need, which images you will need?
* Step2:0) Ask yourself this: “Is my theme idea bungie related?” If “yes”, read on, if “no”, got back to step 1.
* Step3:0) Open up the theme builder file (extracted).
* Step 3:1) Open up the file “ThemeBuilder.htm”
* Step 3:2) Open up the program you are going to use. I highly recommend using Adobe Photoshop (a decent version). ~ I will be using AP for this tutorial
* Step4:0) Open any image within the “images” file (excludes “MainNav” and “do_not_change”). ~ I like to start with the top. i.e. “HeaderBackground.jpg”
For image files
* Step5:0) Go find a picture which suits you theme. E.G. A halo ring for a Halo theme. And put it on top of the existing image.~ The nav will take off some of the picture, so experiment to see how much you need to drag the picture down by
* Step5:1-Jpeg) There is only one jpeg file. It is “HeaderBackground.jpg”. To replace this image, select: File, Save As, find the original image, save, ok.
* Step5:1-gif) The rest of these files are gifs. To replace a gif select the following: File, Save For Web, Save, find the original image, save, replace.
For coloured files
* Step5:2) Make sure you’re working in RGB mode. To check select the following: Image, Mode, RGB colour.
* Step5:3) These files vary. The basics of it, is that you replace the bits which are coloured, with new colours.
* Step6:0) You can see your changes with that “ThemeBuilder.htm” file you have open. Bring it up on screen and you’ll probably need to refresh (F5). It should now change according to what you’ve done with the files. If refresh doesn’t work, close the file and open it again.
- Now do this for all the image files excluding “MainNav” and “do_not_change”.
- If you’re unsure of what images is what supposed to be there, open up the files named “default_theme_example,” and open the images folder and the htm file.
- If you are ever in any doubt, just copy a file (image) from the default folder to your real one and then simply edit that image.
The “styles.css” file
Step7:0) Ok. Now open up the styles.css file( Preferably in notepad).
* Step8:0) Now you probably won’t understand half of this. But you don’t really need to with my helpful little hint. All you need to worry about are the sections with the numbers. E.G. /*BODY_TEXT_COLOR*/ color: #928570;
* Step9:0) Now go back to your image manipulation program (i.e. Adobe Photoshop etc)
* Step9:1) Double click on the colour selector.
* Step9:2) Look at the bottom right. That circled bit in the picture is a Hex value. I won’t go into detail about it, but basically that’s what defines the colour you’re using.
* Step9:3) Now select a colour that will stand out from the rest of the theme. I suggest a luminous pink :)
* Step9:4) Copy the hex value for that colour. Now save that number somewhere accessible (e.g. another notepad file)
* Step10:0) Ok. Go back to that style.css file. If you look, you will see loads of hex values. To the left or just above those hex values is descriptions about what they’re for. So, taking the previous example, /*BODY_TEXT_COLOR*/ color: #928570;
-This would mean that the hex value is for text.
* Step10:1) You will need to go through every hex value in that file (unless you don’t want it changed) and change the value.
* Step10:2) Ok. Here’s where the luminous pink comes in. If you’re ever unsure about what a hex value will change, copy the pink/colour’s hex value and replace an existing value. Select ‘save’, and then refresh your htm file and you should see which bit changed.
* Step10:3) Replace the appropriate hex values with your own.
-Make sure you regularly save the .css file and refresh your htm file to see your theme develop.
Top and bottom Navs
* Step11:0) If you look at the top of the style.css file, you should see this: #topFixed /* Defines the top background found under the Welcome message. */
{
background-image:url(images/MainNav/HaloNavTop.gif);
}
#BottomFixed
{
background-image:url(images/MainNav/HaloNavBottom.gif);
The bits you’re interested in are:
MainNav/HaloNavTop.gif
MainNav/HaloNavBottom.gif
* Step11:1) Go to the “image” folder again and now open up the “MainNav” folder. You need to choose a top nav and a bottom nav which will suit your theme. Once you have, select ‘rename’ then copy the name, hit enter. Now go back to the top of the .css file and replace the existing files with your chosen ones. Save.
-Now that should be everything. You’re theme should be done. Remember that feedback from others is good, and you can always change your theme to make it even better.
-If there are some bits you don’t understand, there are different places where you can ask for help. Below are some links to these help points.
-With your first theme, I suggest merely experimenting with what you can do, don’t worry if you mess something up.
- I also suggest having a read of the readme file which is in the themebuilder folder.
Side Note: The ‘Abuse theme’ used in this tutorial is already made. Please do not bother to copy it. Abuse theme Matt.P 13/July/05 20:00pm
Useful links:
Rip-Saw's Big Guide To The Themebuilder
http://www.bungie.net/Forums/posts.aspx?postID=1539454
The Septagon
http://www.bungie.net/Forums/topics.aspx?forumID=3
Theme Masters
http://www.bungie.net/fanclub/themes/GroupHome.aspx
If you would like the picture version, please PM me with your e-mail address
[Edited on 7/24/2005]