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
// 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)
Perhaps the following will be of use. Write back if you need more help.
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-US" lang="en-US">
<head>
<title>WDJS_1</title>
<!--
From: http://www.webdeveloper.com/forum/showthread.php?t=207920
Title: Simple CSS Generator (replace script)
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.
Thanks in advance for any help on this,
William
-->
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="Content-Language" content="en-US" />
<meta name="Author" content="James Alarie - jalarie@umich.edu" />
<meta name="description" content="CSS Modifier in JavaScript." />
<meta name="keywords" content="css,modify,javascript" />
<link rev="made" href="mailto:jalarie@umich.edu" />
<!--
Author: James Alarie
Company: -independent-
Address: 3391 N Genesee Rd
Flint MI 48506
Latitude: 42.9663 Longitude: -83.7769
Telephone: +1-810-736-8259
Fax: -none-
Web Site: http://spruce.flint.umich.edu/~jalarie/
E-Mail: jalarie@umich.edu
Comments: Having said that, I've probably told you more than I know.
-->
<style>
/*<![CDATA[*/
body {
color: black;
background-color: #ffeeee;
}
.center {
text-align: center;
}
div#header h1, div#header h2, div#header h3, div#header h4,
div#header h5, div#header h6 {
text-align: center;
}
/*]]>*/
</style>
<script type="text/javascript">
<!-- Hide this code from non-JavaScript browsers
function Process() {
f1=document.forms[0]; // abbreviation
Work=f1.WorkArea.value; // the original CSS
Work=Work.replace(/\n\r/g, '\r');
Work=Work.replace(/\r\n/g, '\r');
Work=Work.replace(/\n/g, '\r');
WorkArray=Work.split('\r');
// Add more lines like the next two to pick up input values:
P4HBGC=f1.Page4HeaderBG.value;
P4HF=f1.Page4HeaderFont.value;
// End of pulling input values.
for (ix1=0; ix1< WorkArray.length; ix1++) {
WorkLine=WorkArray[ix1];
// Add more sets of lines like the next two to modify the CSS lines.
ChangeIt('P4HBGC',P4HBGC);
ChangeIt('P4HF',P4HF);
// End of lines to do the modify.
}
Work=WorkArray.join('\r');
f1.WorkArea.value=Work;
return true;
} // Process
function ChangeIt(What,NewValue) {
if (WorkLine.indexOf(What) > -1) {
ix2=WorkLine.indexOf('\:');
ix3=WorkLine.indexOf('\;',ix2);
WorkArray[ix1]=WorkLine.substring(0,ix2+2)+NewValue+WorkLine.substring(ix3);
}
return true;
} // ChangeIt
// End hiding -->
</script>
</head>
<body class="body1">
<div id="body">
<!-- Page Header -->
<div id="header">
<h1>WDJS_1</h1>
<hr />
</div>
<!-- Content -->
<div id="content">
<noscript>
<p class="notice">
You must have scripting enabled to make full use of this page.
</p>
</noscript>
<p>
Copy-and-paste your CSS code into the large box below, fill in
the boxes with new colors and fonts and needed, and then click
the "Go" button to see the new CSS code. When
you are finished making changes, copy-and-paste the new code
back into your CSS file.
</p>
<div class="center">
<form method="post" action="javascript:void(0);">
<div class="form">
<!-- Add more items like the following two. -->
<label>
Page4HeaderBG:
<input type="text" value="?" name="Page4HeaderBG" id="Page4HeaderBG" onfocus="this.select();" />
</label>
<br />
<label>
Page4HeaderFont:
<input type="text" value="?" name="Page4HeaderFont" id="Page4HeaderFont" onfocus="this.select();" />
</label>
<br />
<!-- End of added items -->
<!--
The CSS within the textarea tags is for example only. Notice the added
labels within the comment indicators; these are used in the script above.
-->
<br />
<textarea cols="50" rows="10" name="WorkArea" id="WorkArea" onfocus="this.select();">
.page4_head {
background-color: #4278D3; /* P4HBGC */
font-size: 11px; /* P4HF */
font-weight: bold;
color: #FFFFFF; /* P4HC */
}
.editlink{
background-color: #4278D3; /* ELBGC */
color: #FFFFFF; /* ELC */
font-weight: bold;
}
.editgreat a:hover{
background-color: #4278D3; /* EGBGC */
color: #FFFFFF; /* EGC */
font-weight: normal;
}
.text_head1, .text_head1:hover {
font-size: 14px;
font-weight: bold;
color: #FFFFFF; /* TH1C */
}
</textarea>
<br />
<input type="button" value="Go" title="Process the data" onclick="Process();" />
<input type="reset" value="Reset" title="Reset" />
<br />
</div><!-- form -->
</form>
</div><!-- center -->
</div>
<!-- Page Footer -->
<div id="footer">
<br clear="all" /><hr />
Written on November 4, 2010, by:
<a href="mailto:jalarie@umich.edu">James Alarie</a>.
</div>
</div>
</body>
</html>
Reply With Quote
Bookmarks