www.webdeveloper.com
Results 1 to 2 of 2

Thread: Simple CSS Generator (replace script)

Hybrid View

  1. #1
    Join Date
    Feb 2003
    Posts
    28

    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.

    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

  2. #2
    Join Date
    Nov 2002
    Location
    Flint, Michigan, USA
    Posts
    588
    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 &quot;Go&quot; button to see the new CSS code.&nbsp; 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:&nbsp; 
                <input type="text" value="?" name="Page4HeaderBG" id="Page4HeaderBG" onfocus="this.select();" />
              </label>
              <br />
              <label>
                Page4HeaderFont:&nbsp; 
                <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();" />&nbsp;
              <input type="reset" value="Reset" title="Reset" />&nbsp; 
              <br />
             </div><!-- form -->
            </form>
            
          </div><!-- center -->
      
        </div>
      
    <!-- Page Footer -->
        <div id="footer">
          <br clear="all" /><hr />
          Written on November 4, 2010, by:&nbsp;
          <a href="mailto:jalarie@umich.edu">James Alarie</a>.
        </div>
    
       </div>
      </body>
    
    </html>

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles