How to modify CSS colors or..what are those weird numbers??

For those who have been doing web design for awhile, this won't be all that helpful. It's just meant to explain how to modify existing code, for folks who care to learn no more than that. (a large % of people could use this information but frankly don't need to learn CSS just to tweak colors on a site feature).

First, get yourself a text editor because there is nothing magical or mysterious about files with CSS, PHP, HTML or any other similar extensions on the net. They are simple, plain text files. Nothing more. Nothing less. They are, of course, text files that browsers and other software treat in a special way for following instructions, but to us humans? They are plain text files. I use Notepad ++ and it can change how it loads, colors and indents a text file to make reading different kinds of files easier. (PHP is colored and highlighted to 'read' logically, different than a CSS file, for instance. This happens automatically when you open one and is to make life easier)

To show how this works, I am going to keep it REAL simple, by just showing a piece of a file, and honestly, all you NEED to find or understand to do something as simple as fine tuning colors on a page, block or net posting. You would change just one line, in most cases, across the whole HUGE file...then save it again. (sometimes a color is set in more than one place..or..a coder got sloppy about where they put it..but usually, it's how this looks below)

---

.item
{
   text-align:left;
   width:100%;
}
a.item:link, a.item:visited
{
   color: #FFFF00;
   font-weight: normal;
   text-decoration: none;
   font-size: 15px;
   font-family:Arial;
}
a.item:hover
{
   color: #00FFFF;
}
.itemdescr
{
   font-weight: normal;
   text-decoration: none;
   font-size:13px;
   font-family:Arial;
   color:#8A8A7B;
   width:100%;
}

---

Programmers are generally logical (or lazy) people, and don't like making things complex just to say they did. So things like ".item" and ".itemdescr" are likely to match up to logical parts of the page you actually see something change on. Its this group you're interested in. the .itemdescr is starting on its own line with a period to show its opening properties next (between the {}) that define what the "itemdescr" tag represents. The .(text) could say almost anything in a file you open to change colors in. 

(sometimes you just need to say 'screw it' and start assigning wild yellows and greens to see what label changes what page detail...but I don't recommend hunting that way on a public site, where everyone is watching your results too. lol) 

   font-weight: normal;
   text-decoration: none;
   font-size:13px;
   font-family:Arial;
   color:#8A8A7B;
   width:100%;

(If someone is really curious and wans to look, the section above can include much more. (CSS List of Properties). Now the example I am using is from the current 'Recent Threads II' display.)

What I have underlined is all I wrote this to show.

What is in green is all you need to even worry about. The "color:" just sets that 'property' for whatever page detail is changing, and it looks (and works) the same anywhere you see it in a css file or similar place. In the code above, we have the color for the Item (.item) and the Item description (.itemdescr). #8A8A7B is the numeric way of writing a color. (To get nerdy...the 6 digit "hex" number is actually 3 pairs. 8A is the red concrentration, next is 8A under the green and finally 7B under blue. (More here, if interested.)

Now this is where folks new to this may start feeling better. When you see the above code in Notepadd ++? It'll look something like this:



THIS is why you want an editor like Notepad ++....and WHY I present this as something even a new person can do and benefit from. In the past...You would need charts of colors, an understanding of that number and what changing it means by just knowing it. Likely both. Now? You have color pickers ...and with a good editor, they can be automatic functions.

So..when I double click directly on the above number, notepad ++ recognizes that its a color code and....



Up pops a handy dandy color changer. Clicking on one of the visual colors automatically changes the text code. lets see what that does.....let make it impossible to miss too. Hmm.. How about cherry red?

That changed the text to....



and it changed the board display from this:


To this:


That's it! It's just that simple. You can right click on ANY webpage, select "display source" and find 6 digit hex color codes. They are used everywhere, from people who write code in a blank text editor to plugins, program configuration options and other spots. If you face this in a place where you don't have something to open in a text editor? Ahh.. I have a solution for that too, and this works equally well by doing roughly the same thing. I'll give it a post of it's own next though.

** Notepad ++ is a free utility