Changing a color.

[Isom]

I know this question is going to laughable and its understandable if you do, but I'm having the hardest time with something that I'm sure is the simplest thing I'm going to do while trying to create my own game.

I'm new to PHP, I've tried learning it in the past and I've given up loads of times, but this time is different. I've actually gotten all kinds of ebooks and tutorials saved to my ipod for reading when I have the free time at school and when I'm home, I'm constantly testing scripts and things. I think I'm good enough now to try my hand at making a game. But this has turned into something totally different, onto my actual question.

Because I'm so focused on actually scripting modules and such, I can't be bothered with putting forth the effort to make a template from scratch. I want to edit the Jade template to my likings, which is replacing some logos and changing the colors. I like the style of it, I just want to change the background color. I cannot for the life of me figure out how to do. I've downloaded every CSS editor I can find and nothing has helped. Replacing images and stuff isn't a problem, I simply want to change the background color and maintain that color throughout every page.

Any advice?


*edit - And yes, I have checked out the Skins Made Easy, couldn't seem to find what I'm looking for.

[staticobj]

I am not familiar with what is described in the Skins Made Easy and Jade is not a very good template to familiarize yourself with HTML or CSS.

CSS stands for Cascading Style Sheet.
CSS is made up of classes, properties, and values.
Every element in a HTML document, such as a div, span, table, or even the body tag of the document has a set of properties that can be changed using CSS.
These standards or even guidelines if you will are set by the World Wide Web Consortium(W3.org).

Most elements have padding, margins, background or color.
If you were going to change the padding,  margins, or background of every table on every page the template is used you would have a set of properties as seen below:

Code: (CSS)

table {
padding:2px;
margin:0;
background-color:#000000;
}

This tells the browser that every table element in the page should have a padding of 2px, a margin of 0, and a background-color of black(hexadecimal color).

The reason Jade will be difficult to learn from is because Jade declares background properties for many of the table cells in the document itself instead of the CSS like it should. Jade also uses tables for layout of the page(tables are better suited for tubular data).

FYI

To change the colors of the Jade template check the body tag, and table cells, and then there are a few background-color properties in the CSS.

There are about 3-4 different shades of green used.

[Isom]

Ah, thank you for that. Wasn't expecting that I would need to change more than one color. Maybe I'll just do a bit of searching and find a less complicated theme to modify, but thanks anyway.

[staticobj]

Ah, thank you for that. Wasn't expecting that I would need to change more than one color. Maybe I'll just do a bit of searching and find a less complicated theme to modify, but thanks anyway.

If you have text editor or IDE that supports Search & Replace.
Open jade.htm
Search for #003800 and replace it with the new color.
Then do the same for jade.css
That is the primary color used but there are also a few for borders and backgrounds in the jade.css.

[ArthuruhtrA]

Basically, when it comes to changing the colors, all you need to do is edit the lines at the end of the script to use the hexadecimal valued you want. The values correspond to RGB values, so if you know the decimal values of red, green, and blue for the color, you can convert it to hex easily enough. Many charts exist for this as well, like this one: http://tntluoma.com/sidebars/triplecolors/. The class names correspond to different appo codes.

For a line reading:
.colLtOrange  { color: #FF9900; }
The first part, .colLtOrange, is the color name. It's the appo code `Q, I believe.
The value #FF9900 is the hexadecimal value of the color. Simply change each of those to values using something like that chart I linked, and you chould be all set.

I hope that helped and wasn't too confusing.

[Isom]

Ah, thank you for that. Wasn't expecting that I would need to change more than one color. Maybe I'll just do a bit of searching and find a less complicated theme to modify, but thanks anyway.

If you have text editor or IDE that supports Search & Replace.
Open jade.htm
Search for #003800 and replace it with the new color.
Then do the same for jade.css
That is the primary color used but there are also a few for borders and backgrounds in the jade.css.

Exactly what I needed! I also just searched for the inputs and things and changed their colors to my liking, and of course I've got to recolor the border images. Thanks for this, big help.