Problem: I have a very long css file that I need to change the colors on. (often) It is too much of a pain in the butt to do a search and replace, too confusing and too many different colors to keep track of.

Solution: A js that would change only the colors "while leaving the rest of the css alone" then output the new css into a text box so I could copy, paste, and upload to my server.

I know it will be a long and lengthy process, I dont mind doing it, however I cant seem to get a script working that does it. If anyone could set it up using the small examples below I would appriecate it. From there I think I could figure out some of the rules and finish out the remainder of the script myself.


// I need a page with multiple textboxes (And description) where I could enter the new colors.

Example:
Page4HeaderBG: (ENTER NEW COLOR HERE IN A TEXT BOX)
Page4HeaderFont: (ENTER NEW COLOR HERE IN A TEXT BOX)
and on and on...
Then you press a form button, (NEW CSS IS DISPLAYED IN A TEXT BOX)



// The information below needs to be implimented into the js file...
//Example, below is the origional css


.page4_head {
background-color: #4278D3;
font-size: 11px;
font-weight: bold;
color: #FFFFFF;
}
.editlink{
background-color: #4278D3;
color: #FFFFFF;
font-weight: bold;
}
.editgreat a:hover{
background-color: #4278D3;
color: #FFFFFF;
font-weight: normal;
}

.text_head1, .text_head1:hover {
font-size: 14px;
font-weight: bold;
color: #FFFFFF;
}

// And now below of course, is a sample of the text output I am looking for... (you will see the colors are different, while leaving all else the same)

.page4_head {
background-color: #3A4657;
font-size: 11px;
font-weight: bold;
color: #000000;
}
.editlink{
background-color: #2D8249;
color: #red;
font-weight: bold;
}
.editgreat a:hover{
background-color: #4278D3;
color: #DADADA;
font-weight: normal;
}

.text_head1, .text_head1:hover {
font-size: 14px;
font-weight: bold;
color: #4278D3;
}

Thanks in advance for any help on this,
William