www.webdeveloper.com
Results 1 to 2 of 2

Thread: Simple CSS Generator (replace script)

  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
    652
    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

"

"

X vBulletin 4.2.2 Debug Information

  • Page Generation 0.13100 seconds
  • Memory Usage 2,883KB
  • Queries Executed 15 (?)
More Information
Template Usage (33):
  • (1)SHOWTHREAD
  • (1)ad_footer_end
  • (1)ad_footer_start
  • (1)ad_global_above_footer
  • (1)ad_global_below_navbar
  • (1)ad_global_header1
  • (1)ad_global_header2
  • (1)ad_navbar_below
  • (1)ad_showthread_firstpost_sig
  • (1)ad_showthread_firstpost_start
  • (1)ad_thread_first_post_content
  • (1)ad_thread_last_post_content
  • (1)bbcode_code
  • (1)footer
  • (1)forumjump
  • (1)forumrules
  • (1)gobutton
  • (1)header
  • (1)headinclude
  • (1)headinclude_bottom
  • (2)memberaction_dropdown
  • (1)navbar
  • (4)navbar_link
  • (1)navbar_moderation
  • (1)navbar_noticebit
  • (1)navbar_tabs
  • (2)option
  • (2)postbit
  • (2)postbit_onlinestatus
  • (2)postbit_wrapper
  • (1)spacer_close
  • (1)spacer_open
  • (1)tagbit_wrapper 

Phrase Groups Available (6):
  • global
  • inlinemod
  • postbit
  • posting
  • reputationlevel
  • showthread
Included Files (26):
  • ./showthread.php
  • ./global.php
  • ./includes/class_bootstrap.php
  • ./includes/init.php
  • ./includes/class_core.php
  • ./includes/config.php
  • ./includes/functions.php
  • ./includes/functions_navigation.php
  • ./includes/class_friendly_url.php
  • ./includes/class_hook.php
  • ./includes/class_bootstrap_framework.php
  • ./vb/vb.php
  • ./vb/phrase.php
  • ./includes/functions_facebook.php
  • ./includes/functions_calendar.php
  • ./includes/functions_bigthree.php
  • ./includes/class_postbit.php
  • ./includes/class_bbcode.php
  • ./includes/functions_reputation.php
  • ./includes/functions_notice.php
  • ./packages/vbattach/attach.php
  • ./vb/types.php
  • ./vb/cache.php
  • ./vb/cache/db.php
  • ./vb/cache/observer/db.php
  • ./vb/cache/observer.php 

Hooks Called (73):
  • init_startup
  • friendlyurl_resolve_class
  • init_startup_session_setup_start
  • database_pre_fetch_array
  • database_post_fetch_array
  • init_startup_session_setup_complete
  • global_bootstrap_init_start
  • global_bootstrap_init_complete
  • cache_permissions
  • fetch_postinfo_query
  • fetch_postinfo
  • fetch_threadinfo_query
  • fetch_threadinfo
  • fetch_foruminfo
  • load_show_variables
  • load_forum_show_variables
  • global_state_check
  • global_bootstrap_complete
  • global_start
  • style_fetch
  • global_setup_complete
  • showthread_start
  • showthread_getinfo
  • strip_bbcode
  • friendlyurl_clean_fragment
  • friendlyurl_geturl
  • forumjump
  • cache_templates
  • cache_templates_process
  • template_register_var
  • template_render_output
  • fetch_template_start
  • fetch_template_complete
  • parse_templates
  • fetch_musername
  • notices_check_start
  • notices_noticebit
  • process_templates_complete
  • friendlyurl_redirect_canonical
  • showthread_post_start
  • showthread_query_postids
  • showthread_query
  • bbcode_fetch_tags
  • bbcode_create
  • showthread_postbit_create
  • postbit_factory
  • postbit_display_start
  • postbit_imicons
  • bbcode_parse_start
  • bbcode_parse_complete_precache
  • bbcode_parse_complete
  • postbit_display_complete
  • memberaction_dropdown
  • tag_fetchbit
  • tag_fetchbit_complete
  • forumrules
  • navbits
  • navbits_complete
  • build_navigation_data
  • build_navigation_array
  • check_navigation_permission
  • process_navigation_links_start
  • process_navigation_links_complete
  • set_navigation_menu_element
  • build_navigation_menudata
  • build_navigation_listdata
  • build_navigation_list
  • set_navigation_tab_main
  • set_navigation_tab_fallback
  • navigation_tab_complete
  • fb_like_button
  • showthread_complete
  • page_templates