Simple CSS Generator (replace script)

@Dick_WithemApr 28.2009

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

to post a comment

JavaScript

1 Comments(s) _↴

@jalarieNov 04.2010 — #Perhaps the following will be of use. Write back if you need more help.

<i>
 </i>&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
 
 &lt;html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-US" lang="en-US"&gt;
 &lt;head&gt;
 
 <i>    </i>&lt;title&gt;WDJS_1&lt;/title&gt;
 
 &lt;!--
 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 
 --&gt;
 
 <i>    </i>&lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8" /&gt;
 <i>    </i>&lt;meta http-equiv="Content-Script-Type" content="text/javascript" /&gt;
 <i>    </i>&lt;meta http-equiv="Content-Style-Type" content="text/css" /&gt;
 <i>    </i>&lt;meta http-equiv="Content-Language" content="en-US" /&gt;
 <i>    </i>&lt;meta name="Author" content="James Alarie - [email protected]" /&gt;
 <i>    </i>&lt;meta name="description" content="CSS Modifier in JavaScript." /&gt;
 <i>    </i>&lt;meta name="keywords" content="css,modify,javascript" /&gt;
 <i>    </i>&lt;link rev="made" href="mailto:[email protected]" /&gt;
 
 &lt;!--
 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:    [email protected]
 Comments:  Having said that, I've probably told you more than I know.
 --&gt;
 
 <i>    </i>&lt;style&gt;
 <i>    </i>  /*&lt;![CDATA[*/
 <i>    </i>    body {
 <i>    </i>      color: black;
 <i>    </i>      background-color: #ffeeee;
 <i>    </i>    }
 <i>    </i>    .center {
 <i>    </i>      text-align: center;
 <i>    </i>    }
 <i>    </i>    div#header h1, div#header h2, div#header h3, div#header h4, 
 <i>    </i>    div#header h5, div#header h6 {
 <i>    </i>      text-align: center;
 <i>    </i>    }
 <i>    </i>  /*]]&gt;*/
 <i>    </i>&lt;/style&gt;
 
 <i>    </i>&lt;script type="text/javascript"&gt;
 <i>    </i>  &lt;!-- Hide this code from non-JavaScript browsers
 <i>    </i>    function Process() {
 <i>    </i>      f1=document.forms[0];                     // abbreviation
 <i>    </i>      Work=f1.WorkArea.value;                   // the original CSS
 <i>    </i>      Work=Work.replace(/nr/g, 'r');
 <i>    </i>      Work=Work.replace(/rn/g, 'r');
 <i>    </i>      Work=Work.replace(/n/g, 'r');
 <i>    </i>      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&lt; 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) &gt; -1) {
 ix2=WorkLine.indexOf(':');
 ix3=WorkLine.indexOf(';',ix2);
 WorkArray[ix1]=WorkLine.substring(0,ix2+2)+NewValue+WorkLine.substring(ix3);
 }
 return true;
 } // ChangeIt
 // End hiding --&gt;
 &lt;/script&gt;
 
 &lt;/head&gt;
 
 &lt;body class="body1"&gt;
 &lt;div id="body"&gt;
 &lt;!-- Page Header --&gt;
 &lt;div id="header"&gt;
 &lt;h1&gt;WDJS_1&lt;/h1&gt;
 &lt;hr /&gt;
 &lt;/div&gt;
 
 &lt;!-- Content --&gt;
 &lt;div id="content"&gt;
 &lt;noscript&gt;
 &lt;p class="notice"&gt;
 You must have scripting enabled to make full use of this page.
 &lt;/p&gt;
 &lt;/noscript&gt;
 
 <i>    </i>  &lt;p&gt;
 <i>    </i>    Copy-and-paste your CSS code into the large box below, fill in 
 <i>    </i>    the boxes with new colors and fonts and needed, and then click 
 <i>    </i>    the &amp;quot;Go&amp;quot; button to see the new CSS code.&amp;nbsp; When 
 <i>    </i>    you are finished making changes, copy-and-paste the new code 
 <i>    </i>    back into your CSS file.
 <i>    </i>  &lt;/p&gt;
 <i>    </i>  &lt;div class="center"&gt;
 <i>    </i>    &lt;form method="post" action="javascript:void(0);"&gt;
 <i>    </i>     &lt;div class="form"&gt;
 &lt;!-- Add more items like the following two. --&gt;
 &lt;label&gt;
 Page4HeaderBG:&amp;nbsp; 
 &lt;input type="text" value="?" name="Page4HeaderBG" id="Page4HeaderBG" onfocus="this.select();" /&gt;
 &lt;/label&gt;
 &lt;br /&gt;
 &lt;label&gt;
 Page4HeaderFont:&amp;nbsp; 
 &lt;input type="text" value="?" name="Page4HeaderFont" id="Page4HeaderFont" onfocus="this.select();" /&gt;
 &lt;/label&gt;
 &lt;br /&gt;
 &lt;!-- End of added items --&gt;
 &lt;!--
 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.
 --&gt;
 &lt;br /&gt;
 &lt;textarea cols="50" rows="10" name="WorkArea" id="WorkArea" onfocus="this.select();"&gt;
 .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 */
 }
 &lt;/textarea&gt;
 &lt;br /&gt;
 &lt;input type="button" value="Go" title="Process the data" onclick="Process();" /&gt;&amp;nbsp;
 &lt;input type="reset" value="Reset" title="Reset" /&gt;&amp;nbsp; 
 &lt;br /&gt;
 &lt;/div&gt;&lt;!-- form --&gt;
 &lt;/form&gt;
 
 <i>    </i>  &lt;/div&gt;&lt;!-- center --&gt;
 
 <i>    </i>&lt;/div&gt;
 
 &lt;!-- Page Footer --&gt;
 &lt;div id="footer"&gt;
 &lt;br clear="all" /&gt;&lt;hr /&gt;
 Written on November 4, 2010, by:&amp;nbsp;
 &lt;a href="mailto:[email protected]"&gt;James Alarie&lt;/a&gt;.
 &lt;/div&gt;
 
 &lt;/div&gt;
 &lt;/body&gt;
 
 &lt;/html&gt;

Also in #JavaScript _↴

replace smiley code with image table breaks script Problem with Dropdown

Success!

Help @Dick_Withem spread the word by sharing this article on Twitter...

Tweet This

Simple CSS Generator (replace script)

1 Comments(s) _↴

Also in #JavaScript _↴

Success!

Social

Version

Simple CSS Generator (replace script)

1 Comments(s) ↴

Also in #JavaScript ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

1 Comments(s) _↴

Also in #JavaScript _↴