WordPress.org
Get WordPress

Plugin Directory

Changeset 1582226


Ignore:
Timestamp:
01/25/2017 11:15:26 PM (9 years ago)
Author:
adtechmedia
Message:

add default positioning and styling per theme

Location:
adtechmedia/trunk
Files:
2 added
10 edited

Legend:

Unmodified
Added
Removed

  • adtechmedia/trunk/adtechmedia-init.php

    r1552939 r1582226  
    6363    require_once( 'adtechmedia-plugin.php' );
    6464
     65    Adtechmedia_ServerOptions::delete_options();
    6566    $adtechmedia_plugin = new Adtechmedia_Plugin();
    6667    $adtechmedia_plugin->uninstall();

  • adtechmedia/trunk/adtechmedia-lifecycle.php

    r1552939 r1582226  
    4949        // To avoid running install() more then once.
    5050        $this->mark_as_installed();
     51
     52        // Set server options for Service Worker.
     53        Adtechmedia_ServerOptions::set_options();
    5154    }
    5255
    … …  
    9699        $this->add_plugin_option( 'content_paywall', 'transactions' );
    97100        $this->add_plugin_option( 'content_offset_type', 'paragraphs' );
     101        $this->add_plugin_option( 'template_position', '{"sticky":true,"width":"600px","offset_top":"20px","offset_left":"-60px","scrolling_offset_top":"100px"}' );
     102        $this->add_plugin_option( 'template_overall_styles', '.atm-base-modal {background-color: #ffffff;}.atm-targeted-modal .atm-head-modal .atm-modal-heading {background-color: #ffffff;}.atm-targeted-modal{border: 1px solid #d3d3d3;}.atm-targeted-modal{box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.1);}.atm-base-modal .atm-footer{background-color: #fafafa;}.atm-base-modal .atm-footer{border: 1px solid #e3e3e3;}.atm-targeted-container .mood-block-info,.atm-targeted-modal,.atm-targeted-modal .atm-head-modal .atm-modal-body p,.atm-unlock-line .unlock-btn {font-family: \'Merriweather\', sans-serif;}' );
    98103        $this->check_api_key_exists();
    99104        $this->check_prop();
    100105
     106        // Add schedule event update properties.
     107        wp_clear_scheduled_hook( 'adtechmedia_update_event' );
     108        wp_schedule_event( time(), 'daily', 'adtechmedia_update_event' );
    101109    }
    102110
    … …  
    160168     */
    161169    public function deactivate() {
     170        wp_clear_scheduled_hook( 'adtechmedia_update_event' );
    162171    }
    163172

  • adtechmedia/trunk/adtechmedia-optionsmanager.php

    r1552939 r1582226  
    421421            $this->get_plugin_option( 'price_currency' ),
    422422            $this->get_plugin_option( 'content_paywall' ),
    423             $this->get_target_cb_js( json_decode( stripslashes( $this->get_plugin_option( 'template_position' ) ), true ) )
     423            $this->get_target_cb_js( json_decode( stripslashes( $this->get_plugin_option( 'template_position' ) ), true ) ),
     424            $this->get_toggle_cb_js( json_decode( stripslashes( $this->get_plugin_option( 'template_position' ) ), true ) )
    424425        );
    425426        Adtechmedia_ContentManager::clear_all_content();
    … …  
    461462                cb();
    462463                }";
     464    }
     465
     466    /**
     467     * Get JS to toggleCb function
     468     *
     469     * @param array $position array of position properties.
     470     * @return string
     471     */
     472    public function get_toggle_cb_js( $position ) {
     473        $sticky = ! empty( $position['sticky'] ) ? $position['sticky'] : false;
     474        if ( ! empty( $position['scrolling_offset_top'] ) ) {
     475            $position['scrolling_offset_top'] = (int) $position['scrolling_offset_top'];
     476        }
     477        $scrolling_offset_top = ! empty( $position['scrolling_offset_top'] ) ? $position['scrolling_offset_top'] : 0;
     478        if ( ! $sticky ) {
     479            $scrolling_offset_top = -10;
     480        }
     481        return "function(cb) {
     482                var adjustMarginTop = function (e) {
     483                var modalOffset = (window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0) >= $scrolling_offset_top;
     484                if (modalOffset) {
     485                  cb(true);
     486                } else {
     487                  cb(false);
     488                }
     489                };
     490                document.addEventListener('scroll', adjustMarginTop);
     491                adjustMarginTop(null);}";
    463492    }
    464493

  • adtechmedia/trunk/adtechmedia-plugin.php

    r1559870 r1582226  
    200200        }
    201201        add_action( 'save_post', array( &$this, 'clear_cache_on_update' ) );
     202
     203        // Update properties event.
     204        add_action( 'adtechmedia_update_event', array( &$this, 'update_prop' ) );
     205
    202206        if ( ! is_admin() && (empty( $key ) || empty( $property_id )) ) {
    203207            return;
    … …  
    313317
    314318    /**
    315      * Get JS to toggleCb function
    316      *
    317      * @param array $position array of position properties.
    318      * @return string
    319      */
    320     public function get_toggle_cb_js( $position ) {
    321         $sticky = ! empty( $position['sticky'] ) ? $position['sticky'] : false;
    322         if ( ! empty( $position['scrolling_offset_top'] ) ) {
    323             $position['scrolling_offset_top'] = (int) $position['scrolling_offset_top'];
    324         }
    325         $scrolling_offset_top = ! empty( $position['scrolling_offset_top'] ) ? $position['scrolling_offset_top'] : 0;
    326         if ( ! $sticky ) {
    327             $scrolling_offset_top = -10;
    328         }
    329         return "function(cb) {
    330                 var adjustMarginTop = function (e) {
    331                 var modalOffset = (window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0) >= $scrolling_offset_top;
    332                 if (modalOffset) {
    333                   cb(true);
    334                 } else {
    335                   cb(false);
    336                 }
    337                 };
    338                 document.addEventListener('scroll', adjustMarginTop);
    339                 adjustMarginTop(null);}";
    340     }
    341 
    342     /**
    343319     * Register plugin scripts
    344320     *
    … …  
    383359    public function add_adtechmedia_scripts() {
    384360        if ( $script = $this->get_plugin_option( 'BuildPath' ) ) {
     361            $is_old = $this->get_plugin_option( 'atm-js-is-old' );
     362            $is_old = empty( $is_old ) ? '0' : '1';
     363            if ( $is_old ) {
     364                $this->update_prop();
     365            }
    385366            $path = plugins_url( '/js/atm.min.js', __FILE__ );
    386367            $plugin_dir = plugin_dir_path( __FILE__ );
    387368            $file = $plugin_dir . '/js/atm.min.js';
    388             $is_old = $this->get_plugin_option( 'atm-js-is-old' );
    389             $is_old = empty( $is_old ) ? '0' : '1';
    390369            if ( ! file_exists( $file ) || '1' == $is_old || ( time() - filemtime( $file ) ) > Adtechmedia_Config::get( 'atm_js_cache_time' ) ) {
    391370                $hash = $this->get_plugin_option( 'atm-js-hash' );
    … …  
    403382            }
    404383            wp_enqueue_script( 'Adtechmedia', $path . '?v=' . filemtime( $file ), null, null, true );
     384            wp_enqueue_script( 'Adtechmedia-frontend-js', plugins_url( '/js/frontend.js', __FILE__ ) );
    405385        }
    406386    }

  • adtechmedia/trunk/adtechmedia-request.php

    r1552939 r1582226  
    258258     * @param string  $pledged_type pledged type.
    259259     * @param string  $get_target_cb_js target cb js.
     260     * @param string  $get_toggle_cb_js toggle cb js.
    260261     * @return array|bool
    261262     */
    … …  
    274275        $currency,
    275276        $pledged_type,
    276         $get_target_cb_js
     277        $get_target_cb_js,
     278        $get_toggle_cb_js
    277279    ) {
    278280        if ( empty( $key ) ) {
    … …  
    315317                ],
    316318                'targetModal' => [
    317                     // 'toggleCb' => 'function(cb) {cb(true);}',
     319                    'toggleCb' => $get_toggle_cb_js,
    318320                    'targetCb' => $get_target_cb_js,
    319321                ],

  • adtechmedia/trunk/adtechmedia.php

    r1559870 r1582226  
    33 * Plugin Name: AdTechMedia
    44 * Plugin URI: http://wordpress.org/extend/plugins/adtechmedia/
    5  * Version: 0.4
     5 * Version: 0.5
    66 * Author: AdTechMedia.io
    77 * Description: AdTechMedia is an adtech platform with micropayments capabilities for media content. We help publishers and content providers to generate complimentary revenue streams that are immune to ad blocking software (e.g. native advertising or native micropayments). Our solutions are white labeled, data driven and realtime. To learn more, contact hello@adtechmedia.io or visit www.adtechmedia.io.
    … …  
    7272    include_once( 'adtechmedia-init.php' );
    7373    include_once( 'adtechmedia-request.php' );
     74    include_once( 'adtechmedia-serveroptions.php' );
    7475    include_once( 'adtechmedia-config.php' );
    7576    include_once( 'adtechmedia-contentmanager.php' );

  • adtechmedia/trunk/css/main.css

    r1552939 r1582226  
    594594    -webkit-appearance: none;
    595595    -moz-appearance: none;
     596    -webkit-box-shadow: none;
     597    -moz-box-shadow: none;
     598    box-shadow: none;
    596599}
    597600
    … …  
    16601663    padding-top: 16px;
    16611664}
     1665
     1666.form-select select {
     1667    height: 31px;
     1668}

  • adtechmedia/trunk/js/main.js

    r1552939 r1582226  
    303303        var styleInputsKey = viewKey + section.dataTab + 'style';
    304304        styleInputs[styleInputsKey] = {
    305           inputs : sectionTab.find(getDatatemplate('style') + ' input ')
     305          inputs : sectionTab.find(getDatatemplate('style') + ' input, ' + getDatatemplate('style') + ' select')
    306306        };
    307307        jQuery.each(section.options, function (j, option) {
    … …  
    364364    var $form = $('section.views-tabs');
    365365    var $inputs = $form.find('input');
     366    var $selects = $form.find('select');
    366367    var $colorInputs = $form.find('input[type="color"]');
    367368    $inputs.bind('keyup', throttledSync);
    368369    $colorInputs.bind('change', throttledSync);
     370    $selects.bind('change', throttledSync);
    369371
    370372    var overallSync = jQuery.throttle(200, function () {
    … …  
    404406      var btn = jQuery(this);
    405407      var viewKey = jQuery(btn.parents('[data-template]')[0]).data('template');
     408      //console.log(viewKey);
     409      if (viewKey === 'position') {
     410        viewKey = 'pledge';
     411      }
    406412      addLoader(btn);
    407413      jQuery.ajax({

  • adtechmedia/trunk/readme.txt

    r1559870 r1582226  
    55Contributors: yamagleb, alexanderc89
    66Donate link: https://www.adtechmedia.io
    7 Tags: adtechmedia, adtech, media, ads, advertising, micropayments
     7Tags: adtech, advertising, micropayments, media, revenue
    88License: MIT
    99License URI: https://opensource.org/licenses/MIT
    1010Requires at least: 3.6
    1111Tested up to: 4.7
    12 Stable tag: 0.4
     12Stable tag: 0.5
    1313
    1414
    … …  
    3939== Changelog ==
    4040
     41= 0.5 =
     42- Fix TTL and JS related bugs
     43- Add default positioning and styling per theme
     44
    4145= 0.4 =
    4246- Fix Firefox bugs

  • adtechmedia/trunk/views/admin.php

    r1559870 r1582226  
    3333// @codingStandardsIgnoreStart
    3434echo 'var templateInputs =JSON.parse(\'';
    35 $template_inputs = $this->get_plugin_option( 'template_inputs' );
     35$template_inputs = addslashes( $this->get_plugin_option( 'template_inputs' ) );
    3636echo empty( $template_inputs ) ? '{}' : $template_inputs;
    3737echo '\');';
    3838echo 'var templateStyleInputs =JSON.parse(\'';
    39 $template_style_inputs = $this->get_plugin_option( 'template_style_inputs' );
     39$template_style_inputs = addslashes( $this->get_plugin_option( 'template_style_inputs' ) );
    4040echo empty( $template_style_inputs ) ? '{}' : $template_style_inputs;
    4141echo '\');';
    4242echo 'var templatePositionInputs =JSON.parse(\'';
    43 $template_position = $this->get_plugin_option( 'template_position' );
     43$template_position = addslashes( $this->get_plugin_option( 'template_position' ) );
    4444echo empty( $template_position ) ? '{}' : $template_position;
    4545echo '\');';
    4646echo 'var templateOverallStylesInputs =JSON.parse(\'';
    47 $template_overall_styles_inputs = $this->get_plugin_option( 'template_overall_styles_inputs' );
     47$template_overall_styles_inputs = addslashes( $this->get_plugin_option( 'template_overall_styles_inputs' ) );
    4848echo empty( $template_overall_styles_inputs ) ? '{}' : $template_overall_styles_inputs;
    4949echo '\');';
    … …  
    348348
    349349                            <div class="block-info">
    350                                 Speficy the link to video ad that will be used for demo purposes
     350                                Specify the link to video ad that will be used for demo purposes
    351351                            </div>
    352352                        </div>
    … …  
    432432            <div class="templates-views templates-views-common">
    433433                <div class="template-view">
    434                     <div class="header-view">Overall position and styling
     434                    <div class="header-view">Overall styling and position
    435435                    </div>
    436436                    <section class="content-view" >
    437                             <div class="flex-container flex-gutter flex-end" data-template="position">
     437                        <div class="flex-container flex-gutter" data-template="overall-styling">
     438                            <div class="flex-item-2">
     439                                <div class="custom-label">
     440                                    <label>Background Color</label>
     441                                    <div class="custom-input">
     442                                        <input type="color" data-template-css="background-color" value="#ffffff" placeholder="#ffffff" required="" />
     443                                        <span class="bar"></span>
     444                                    </div>
     445                                </div>
     446                            </div>
     447                            <div class="flex-item-2">
     448                                <div class="custom-label">
     449                                    <label>Border</label>
     450                                    <div class="custom-input">
     451                                        <input type="text" data-template-css="border" value="1px solid #d3d3d3" placeholder="1px solid #d3d3d3" required="" />
     452                                        <span class="bar"></span>
     453                                    </div>
     454                                </div>
     455                            </div>
     456                            <div class="flex-item-2">
     457                                <div class="custom-label">
     458                                    <label>Font Family</label>
     459                                    <div class="custom-input">
     460                                        <input type="text" data-template-css="font-family" value="'Merriweather', sans-serif" placeholder="'Merriweather', sans-serif" required="" />
     461                                        <span class="bar"></span>
     462                                    </div>
     463                                </div>
     464                            </div>
     465                            <div class="flex-item-2">
     466                                <div class="custom-label">
     467                                    <label>Box Shadow</label>
     468                                    <div class="custom-input">
     469                                        <input type="text" data-template-css="box-shadow" value="0 1px 2px 0 rgba(0, 0, 0, 0.1)" placeholder="0 1px 2px 0 rgba(0, 0, 0, 0.1)" required="" />
     470                                        <span class="bar"></span>
     471                                    </div>
     472                                </div>
     473                            </div>
     474                            <div class="flex-item-2">
     475                                <div class="custom-label">
     476                                    <label>Footer Background Color</label>
     477                                    <div class="custom-input">
     478                                        <input type="color" data-template-css="footer-background-color" value="#fafafa" placeholder="#fafafa" required="" />
     479                                        <span class="bar"></span>
     480                                    </div>
     481                                </div>
     482                            </div>
     483                            <div class="flex-item-2">
     484                                <div class="custom-label">
     485                                    <label>Footer Border</label>
     486                                    <div class="custom-input">
     487                                        <input type="text" data-template-css="footer-border" value="1px solid #e3e3e3" placeholder="1px solid #e3e3e3" required="" />
     488                                        <span class="bar"></span>
     489                                    </div>
     490                                </div>
     491                            </div>
     492                        </div>
     493
     494                        <div class="flex-container flex-gutter flex-end" data-template="position">
    438495                            <div class="flex-item-2">
    439496                                <span class="accent-color">Sticky</span>
    440497                                <div class="">
    441                                     <input type="checkbox" name="sticky" id="checkbox-sticky" class="cbx hidden"/>
     498                                    <input type="checkbox" name="sticky" id="checkbox-sticky" class="cbx hidden" checked />
    442499                                    <label for="checkbox-sticky" class="custom-checkbox"></label>
    443500                                </div>
    … …  
    447504                                    <label>Width</label>
    448505                                    <div class="custom-input">
    449                                         <input placeholder="width" name="width" type="text">
     506                                        <input type="text" name="width" value="600px" placeholder="600px" />
    450507                                        <span class="bar"></span>
    451508                                    </div>
    … …  
    456513                                    <label>Offset top</label>
    457514                                    <div class="custom-input">
    458                                         <input placeholder="offset top" name="offset_top"  type="text">
     515                                        <input type="text" name="offset_top" value="20px" placeholder="20px" />
    459516                                        <span class="bar"></span>
    460517                                    </div>
    … …  
    465522                                    <label>Offset from center</label>
    466523                                    <div class="custom-input">
    467                                         <input placeholder="offset left" name="offset_left"  type="text">
     524                                        <input type="text" name="offset_left" value="-60px" placeholder="-60px" />
    468525                                        <span class="bar"></span>
    469526                                    </div>
    … …  
    474531                                    <label>Scrolling offset top</label>
    475532                                    <div class="custom-input">
    476                                         <input placeholder="scrolling offset top" name="scrolling_offset_top"  type="text">
     533                                        <input type="text" name="scrolling_offset_top" value="100px" placeholder="100px" />
    477534                                        <span class="bar"></span>
    478535                                    </div>
    479536                                </div>
    480537                            </div>
    481                             </div>
    482 
    483                             <div class="flex-container flex-gutter" data-template="overall-styling">
    484                                 <div class="flex-item-2">
    485                                     <div class="custom-label">
    486                                         <label>Background Color</label>
    487                                         <div class="custom-input">
    488                                             <input placeholder="background-color" data-template-css="background-color" required=""
    489                                                    type="color">
    490                                             <span class="bar"></span>
    491                                         </div>
    492                                     </div>
    493                                 </div>
    494                                 <div class="flex-item-2">
    495                                     <div class="custom-label">
    496                                         <label>Border</label>
    497                                         <div class="custom-input">
    498                                             <input placeholder="border" data-template-css="border" required="" type="text">
    499                                             <span class="bar"></span>
    500                                         </div>
    501                                     </div>
    502                                 </div>
    503                                 <div class="flex-item-2">
    504                                     <div class="custom-label">
    505                                         <label>Font Family</label>
    506                                         <div class="custom-input">
    507                                             <input placeholder="font-family" data-template-css="font-family" required=""
    508                                                    type="text">
    509                                             <span class="bar"></span>
    510                                         </div>
    511                                     </div>
    512                                 </div>
    513                                 <div class="flex-item-2">
    514                                     <div class="custom-label">
    515                                         <label>Box Shadow</label>
    516                                         <div class="custom-input">
    517                                             <input placeholder="box-shadow" data-template-css="box-shadow" required=""
    518                                                    type="text">
    519                                             <span class="bar"></span>
    520                                         </div>
    521                                     </div>
    522                                 </div>
    523                                 <div class="flex-item-2">
    524                                     <div class="custom-label">
    525                                         <label>Footer Background Color</label>
    526                                         <div class="custom-input">
    527                                             <input placeholder="footer background-color" data-template-css="footer-background-color"
    528                                                    required="" type="color" >
    529                                             <span class="bar"></span>
    530                                         </div>
    531                                     </div>
    532                                 </div>
    533                                 <div class="flex-item-2">
    534                                     <div class="custom-label">
    535                                         <label>Footer Border</label>
    536                                         <div class="custom-input">
    537                                             <input placeholder="footer-border" required=""
    538                                                    data-template-css="footer-border"
    539                                                    type="text">
    540                                             <span class="bar"></span>
    541                                         </div>
    542                                     </div>
    543                                 </div>
    544                             </div>
    545 
    546                         </section>
     538                            <div class="flex-item-2">
     539                                <div class="custom-input pull-right">
     540                                    <button type="button" class="btn save-templates"><i
     541                                            class="mdi mdi-check"></i> Save
     542                                    </button>
     543                                </div>
     544                            </div>
     545                        </div>
     546
     547                    </section>
    547548                </div>
    548549            </div>
    549550            <div class="clearfix">
    550551                <div class="">
    551 
    552 
    553552
    554553                    <section class="views-tabs">
    … …  
    628627                                                        <label>Salutation</label>
    629628                                                        <div class="custom-input">
    630                                                             <input placeholder="Dear {user}," name="welcome"
    631                                                                    value="Dear {user}," required="" type="text">
     629                                                            <input type="text" name="welcome" value="Dear {user}," placeholder="Dear {user}," required="" />
    632630                                                            <span class="bar"></span>
    633631                                                        </div>
    … …  
    639637                                                                <label>Color</label>
    640638                                                                <div class="custom-input">
    641                                                                     <input placeholder="color" data-template-css="color"
    642                                                                            required="" type="color">
     639                                                                    <input type="color" data-template-css="color" placeholder="#404040" required="" />
    643640                                                                    <span class="bar"></span>
    644641                                                                </div>
    … …  
    649646                                                                <label>Font Size</label>
    650647                                                                <div class="custom-input">
    651                                                                     <input placeholder="font-size"
    652                                                                            data-template-css="font-size" required=""
    653                                                                            type="text">
     648                                                                    <input type="text" data-template-css="font-size" placeholder="13px" required="" />
    654649                                                                    <span class="bar"></span>
    655650                                                                </div>
    … …  
    659654                                                            <div class="custom-label">
    660655                                                                <label>Font Weight</label>
    661                                                                 <div class="custom-input">
    662                                                                     <input placeholder="font-weight"
    663                                                                            data-template-css="font-weight" required=""
    664                                                                            type="text">
     656                                                                <div class="form-select">
     657                                                                    <select data-template-css="font-weight">
     658                                                                        <option selected>normal</option>
     659                                                                        <option>bold</option>
     660                                                                        <option>bolder</option>
     661                                                                        <option>lighter</option>
     662                                                                        <option>100</option>
     663                                                                        <option>200</option>
     664                                                                        <option>300</option>
     665                                                                        <option>400</option>
     666                                                                        <option>500</option>
     667                                                                        <option>600</option>
     668                                                                        <option>700</option>
     669                                                                        <option>800</option>
     670                                                                        <option>900</option>
     671                                                                    </select>
    665672                                                                    <span class="bar"></span>
    666673                                                                </div>
    … …  
    673680                                                            <div class="custom-label">
    674681                                                                <label>Font Style</label>
    675                                                                 <div class="custom-input">
    676                                                                     <input placeholder="font-style"
    677                                                                            data-template-css="font-style" required=""
    678                                                                            type="text">
     682                                                                <div class="form-select">
     683                                                                    <select data-template-css="font-style">
     684                                                                        <option selected>normal</option>
     685                                                                        <option>italic</option>
     686                                                                        <option>oblique</option>
     687                                                                    </select>
    679688                                                                    <span class="bar"></span>
    680689                                                                </div>
    … …  
    684693                                                            <div class="custom-label">
    685694                                                                <label>Text Align</label>
    686                                                                 <div class="custom-input">
    687                                                                     <input placeholder="text-align"
    688                                                                            data-template-css="text-align" required=""
    689                                                                            type="text">
     695                                                                <div class="form-select">
     696                                                                    <select data-template-css="text-align">
     697                                                                        <option selected>left</option>
     698                                                                        <option>right</option>
     699                                                                        <option>center</option>
     700                                                                        <option>justify</option>
     701                                                                    </select>
    690702                                                                    <span class="bar"></span>
    691703                                                                </div>
    … …  
    695707                                                            <div class="custom-label">
    696708                                                                <label>Text Transform</label>
    697                                                                 <div class="custom-input">
    698                                                                     <input placeholder="text-transform"
    699                                                                            data-template-css="text-transform"
    700                                                                            required="" type="text">
     709                                                                <div class="form-select">
     710                                                                    <select data-template-css="text-transform">
     711                                                                        <option selected>none</option>
     712                                                                        <option>capitalize</option>
     713                                                                        <option>uppercase</option>
     714                                                                        <option>lowercase</option>
     715                                                                    </select>
    701716                                                                    <span class="bar"></span>
    702717                                                                </div>
    … …  
    715730                                                        <label>Message (Expanded View)</label>
    716731                                                        <div class="custom-input">
    717                                                             <input name="message-expanded"
    718                                                                    placeholder="Please support quality journalism. Would you pledge to pay a small fee of {price} to continue reading?"
    719                                                                    value="Please support quality journalism. Would you pledge to pay a small fee of {price} to continue reading?"
    720                                                                    required="" type="text">
     732                                                            <input type="text" name="message-expanded" value="Please support quality journalism. Would you pledge to pay a small fee of {price} to continue reading?" placeholder="Please support quality journalism. Would you pledge to pay a small fee of {price} to continue reading?" required="" />
    721733                                                            <span class="bar"></span>
    722734                                                        </div>
    … …  
    725737                                                        <label>Message (Collapsed View)</label>
    726738                                                        <div class="custom-input">
    727                                                             <input name="message-collapsed"
    728                                                                    placeholder="Please support quality journalism."
    729                                                                    value="Please support quality journalism. {pledge-button}"
    730                                                                    required="" type="text">
     739                                                            <input type="text" name="message-collapsed" value="Please support quality journalism. {pledge-button}" placeholder="Please support quality journalism." required="" />
    731740                                                            <span class="bar"></span>
    732741                                                        </div>
    … …  
    737746                                                                <label>Color</label>
    738747                                                                <div class="custom-input">
    739                                                                     <input placeholder="color" data-template-css="color"
    740                                                                            required="" type="color">
     748                                                                    <input type="color" data-template-css="color" placeholder="#404040" required="" />
    741749                                                                    <span class="bar"></span>
    742750                                                                </div>
    … …  
    747755                                                                <label>Font Size</label>
    748756                                                                <div class="custom-input">
    749                                                                     <input placeholder="font-size"
    750                                                                            data-template-css="font-size" required=""
    751                                                                            type="text">
     757                                                                    <input type="text" data-template-css="font-size" placeholder="13px" required="" />
    752758                                                                    <span class="bar"></span>
    753759                                                                </div>
    … …  
    757763                                                            <div class="custom-label">
    758764                                                                <label>Font Weight</label>
    759                                                                 <div class="custom-input">
    760                                                                     <input placeholder="font-weight"
    761                                                                            data-template-css="font-weight" required=""
    762                                                                            type="text">
     765                                                                <div class="form-select">
     766                                                                    <select data-template-css="font-weight">
     767                                                                        <option selected>normal</option>
     768                                                                        <option>bold</option>
     769                                                                        <option>bolder</option>
     770                                                                        <option>lighter</option>
     771                                                                        <option>100</option>
     772                                                                        <option>200</option>
     773                                                                        <option>300</option>
     774                                                                        <option>400</option>
     775                                                                        <option>500</option>
     776                                                                        <option>600</option>
     777                                                                        <option>700</option>
     778                                                                        <option>800</option>
     779                                                                        <option>900</option>
     780                                                                    </select>
    763781                                                                    <span class="bar"></span>
    764782                                                                </div>
    … …  
    771789                                                            <div class="custom-label">
    772790                                                                <label>Font Style</label>
    773                                                                 <div class="custom-input">
    774                                                                     <input placeholder="font-style"
    775                                                                            data-template-css="font-style" required=""
    776                                                                            type="text">
     791                                                                <div class="form-select">
     792                                                                    <select data-template-css="font-style">
     793                                                                        <option selected>normal</option>
     794                                                                        <option>italic</option>
     795                                                                        <option>oblique</option>
     796                                                                    </select>
    777797                                                                    <span class="bar"></span>
    778798                                                                </div>
    … …  
    782802                                                            <div class="custom-label">
    783803                                                                <label>Text Align</label>
    784                                                                 <div class="custom-input">
    785                                                                     <input placeholder="text-align"
    786                                                                            data-template-css="text-align" required=""
    787                                                                            type="text">
     804                                                                <div class="form-select">
     805                                                                    <select data-template-css="text-align">
     806                                                                        <option selected>left</option>
     807                                                                        <option>right</option>
     808                                                                        <option>center</option>
     809                                                                        <option>justify</option>
     810                                                                    </select>
    788811                                                                    <span class="bar"></span>
    789812                                                                </div>
    … …  
    793816                                                            <div class="custom-label">
    794817                                                                <label>Text Transform</label>
    795                                                                 <div class="custom-input">
    796                                                                     <input placeholder="text-transform"
    797                                                                            data-template-css="text-transform" required=""
    798                                                                            type="text">
     818                                                                <div class="form-select">
     819                                                                    <select data-template-css="text-transform">
     820                                                                        <option selected>none</option>
     821                                                                        <option>capitalize</option>
     822                                                                        <option>uppercase</option>
     823                                                                        <option>lowercase</option>
     824                                                                    </select>
    799825                                                                    <span class="bar"></span>
    800826                                                                </div>
    … …  
    812838                                                        <label>Connect Message</label>
    813839                                                        <div class="custom-input">
    814                                                             <input placeholder="Already used us before? {connect_url}"
    815                                                                    value="Already used us before? {connect_url}"
    816                                                                    required="" type="text">
     840                                                            <input type="text" value="Already used us before? {connect_url}" placeholder="Already used us before? {connect_url}" required="" />
    817841                                                            <span class="bar"></span>
    818842                                                        </div>
    … …  
    822846                                                        <label>Disconnect Message</label>
    823847                                                        <div class="custom-input">
    824                                                             <input placeholder="Not {user}? {disconnect_url}"
    825                                                                    value="Not {user}? {disconnect_url}" required=""
    826                                                                    type="text">
     848                                                            <input type="text" value="Not {user}? {disconnect_url}" placeholder="Not {user}? {disconnect_url}" required="" />
    827849                                                            <span class="bar"></span>
    828850                                                        </div>
    … …  
    834856                                                                <label>Color</label>
    835857                                                                <div class="custom-input">
    836                                                                     <input placeholder="color" required="" type="color">
     858                                                                    <input type="color" placeholder="#404040" required="" />
    837859                                                                    <span class="bar"></span>
    838860                                                                </div>
    … …  
    843865                                                                <label>Font Size</label>
    844866                                                                <div class="custom-input">
    845                                                                     <input placeholder="font-size" required=""
    846                                                                            type="text">
     867                                                                    <input type="text" placeholder="12px" required="" />
    847868                                                                    <span class="bar"></span>
    848869                                                                </div>
    … …  
    852873                                                            <div class="custom-label">
    853874                                                                <label>Font Weight</label>
    854                                                                 <div class="custom-input">
    855                                                                     <input placeholder="font-weight" required=""
    856                                                                            type="text">
     875                                                                <div class="form-select">
     876                                                                    <select data-template-css="font-weight">
     877                                                                        <option selected>normal</option>
     878                                                                        <option>bold</option>
     879                                                                        <option>bolder</option>
     880                                                                        <option>lighter</option>
     881                                                                        <option>100</option>
     882                                                                        <option>200</option>
     883                                                                        <option>300</option>
     884                                                                        <option>400</option>
     885                                                                        <option>500</option>
     886                                                                        <option>600</option>
     887                                                                        <option>700</option>
     888                                                                        <option>800</option>
     889                                                                        <option>900</option>
     890                                                                    </select>
    857891                                                                    <span class="bar"></span>
    858892                                                                </div>
    … …  
    865899                                                            <div class="custom-label">
    866900                                                                <label>Font Style</label>
    867                                                                 <div class="custom-input">
    868                                                                     <input placeholder="font-style" required=""
    869                                                                            type="text">
     901                                                                <div class="form-select">
     902                                                                    <select data-template-css="font-style">
     903                                                                        <option selected>normal</option>
     904                                                                        <option>italic</option>
     905                                                                        <option>oblique</option>
     906                                                                    </select>
    870907                                                                    <span class="bar"></span>
    871908                                                                </div>
    … …  
    875912                                                            <div class="custom-label">
    876913                                                                <label>Text Align</label>
    877                                                                 <div class="custom-input">
    878                                                                     <input placeholder="text-align" required=""
    879                                                                            type="text">
     914                                                                <div class="form-select">
     915                                                                    <select data-template-css="text-align">
     916                                                                        <option selected>left</option>
     917                                                                        <option>right</option>
     918                                                                        <option>center</option>
     919                                                                        <option>justify</option>
     920                                                                    </select>
    880921                                                                    <span class="bar"></span>
    881922                                                                </div>
    … …  
    885926                                                            <div class="custom-label">
    886927                                                                <label>Text Transform</label>
    887                                                                 <div class="custom-input">
    888                                                                     <input placeholder="text-transform" required=""
    889                                                                            type="text">
     928                                                                <div class="form-select">
     929                                                                    <select data-template-css="text-transform">
     930                                                                        <option selected>none</option>
     931                                                                        <option>capitalize</option>
     932                                                                        <option>uppercase</option>
     933                                                                        <option>lowercase</option>
     934                                                                    </select>
    890935                                                                    <span class="bar"></span>
    891936                                                                </div>
    … …  
    906951                                                                <label>Micropayments Button Text</label>
    907952                                                                <div class="custom-input">
    908                                                                     <input placeholder="PLEDGE {price}"
    909                                                                            value="PLEDGE {price}" required=""
    910                                                                            type="text">
     953                                                                    <input type="text" value="PLEDGE {price}" placeholder="PLEDGE {price}" required="" />
    911954                                                                    <span class="bar"></span>
    912955                                                                </div>
    … …  
    917960                                                                <label>Micropayments Button Icon</label>
    918961                                                                <div class="custom-input">
    919                                                                     <input placeholder="fa-check" value="fa-check"
    920                                                                            required="" type="text">
     962                                                                    <input type="text" placeholder="fa-check" value="fa-check" required="" />
    921963                                                                    <span class="bar"></span>
    922964                                                                </div>
    … …  
    930972                                                                <label>Background Color</label>
    931973                                                                <div class="custom-input">
    932                                                                     <input placeholder="background-color" required=""
    933                                                                            type="color">
     974                                                                    <input type="color" placeholder="#1b93f2" required="" />
    934975                                                                    <span class="bar"></span>
    935976                                                                </div>
    … …  
    940981                                                                <label>Border</label>
    941982                                                                <div class="custom-input">
    942                                                                     <input placeholder="border" required="" type="text">
     983                                                                    <input type="text" placeholder="1px solid #1b93f2" required="" />
    943984                                                                    <span class="bar"></span>
    944985                                                                </div>
    … …  
    949990                                                                <label>Font Size</label>
    950991                                                                <div class="custom-input">
    951                                                                     <input placeholder="font-size" required=""
    952                                                                            type="text">
     992                                                                    <input type="text" placeholder="11px" required="" />
    953993                                                                    <span class="bar"></span>
    954994                                                                </div>
    … …  
    9611001                                                            <div class="custom-label">
    9621002                                                                <label>Font Weight</label>
    963                                                                 <div class="custom-input">
    964                                                                     <input placeholder="font-weight" required=""
    965                                                                            type="text">
     1003                                                                <div class="form-select">
     1004                                                                    <select data-template-css="font-weight">
     1005                                                                        <option selected>normal</option>
     1006                                                                        <option>bold</option>
     1007                                                                        <option>bolder</option>
     1008                                                                        <option>lighter</option>
     1009                                                                        <option>100</option>
     1010                                                                        <option>200</option>
     1011                                                                        <option>300</option>
     1012                                                                        <option>400</option>
     1013                                                                        <option>500</option>
     1014                                                                        <option>600</option>
     1015                                                                        <option>700</option>
     1016                                                                        <option>800</option>
     1017                                                                        <option>900</option>
     1018                                                                    </select>
    9661019                                                                    <span class="bar"></span>
    9671020                                                                </div>
    … …  
    9721025                                                                <label>Border Radius</label>
    9731026                                                                <div class="custom-input">
    974                                                                     <input placeholder="border-radius" required=""
    975                                                                            type="text">
     1027                                                                    <input type="text" placeholder="2px" required="" />
    9761028                                                                    <span class="bar"></span>
    9771029                                                                </div>
    … …  
    9821034                                                                <label>Color</label>
    9831035                                                                <div class="custom-input">
    984                                                                     <input placeholder="color" required="" type="color">
     1036                                                                    <input type="color" placeholder="#ffffff" required="" />
    9851037                                                                    <span class="bar"></span>
    9861038                                                                </div>
    … …  
    9931045                                                            <div class="custom-label">
    9941046                                                                <label>Font Style</label>
    995                                                                 <div class="custom-input">
    996                                                                     <input placeholder="font-style" required=""
    997                                                                            type="text">
     1047                                                                <div class="form-select">
     1048                                                                    <select data-template-css="font-style">
     1049                                                                        <option selected>normal</option>
     1050                                                                        <option>italic</option>
     1051                                                                        <option>oblique</option>
     1052                                                                    </select>
    9981053                                                                    <span class="bar"></span>
    9991054                                                                </div>
    … …  
    10031058                                                            <div class="custom-label">
    10041059                                                                <label>Text Align</label>
    1005                                                                 <div class="custom-input">
    1006                                                                     <input placeholder="text-align" required=""
    1007                                                                            type="text">
     1060                                                                <div class="form-select">
     1061                                                                    <select data-template-css="text-align">
     1062                                                                        <option selected>left</option>
     1063                                                                        <option>right</option>
     1064                                                                        <option>center</option>
     1065                                                                        <option>justify</option>
     1066                                                                    </select>
    10081067                                                                    <span class="bar"></span>
    10091068                                                                </div>
    … …  
    10131072                                                            <div class="custom-label">
    10141073                                                                <label>Text Transform</label>
    1015                                                                 <div class="custom-input">
    1016                                                                     <input placeholder="text-transform" required=""
    1017                                                                            type="text">
     1074                                                                <div class="form-select">
     1075                                                                    <select data-template-css="text-transform">
     1076                                                                        <option selected>none</option>
     1077                                                                        <option>capitalize</option>
     1078                                                                        <option>uppercase</option>
     1079                                                                        <option>lowercase</option>
     1080                                                                    </select>
    10181081                                                                    <span class="bar"></span>
    10191082                                                                </div>
    … …  
    10341097                                                                <label>Closing Arrow</label>
    10351098                                                                <div class="custom-input">
    1036                                                                     <input placeholder="fa-chevron-circle-up"
    1037                                                                            value="fa-chevron-circle-up" required=""
    1038                                                                            type="text">
     1099                                                                    <input type="text" placeholder="fa-chevron-circle-up" value="fa-chevron-circle-up" required="" />
    10391100                                                                    <span class="bar"></span>
    10401101                                                                </div>
    … …  
    10451106                                                                <label>Color</label>
    10461107                                                                <div class="custom-input">
    1047                                                                     <input placeholder="color" value="" required=""
    1048                                                                            type="color">
     1108                                                                    <input type="color" value="#404040" placeholder="#404040" required="" />
    10491109                                                                    <span class="bar"></span>
    10501110                                                                </div>
    … …  
    10581118                                                                <label>Opening Arrow</label>
    10591119                                                                <div class="custom-input">
    1060                                                                     <input placeholder="fa-chevron-circle-down"
    1061                                                                            value="fa-chevron-circle-down" required=""
    1062                                                                            type="text">
     1120                                                                    <input type="text" placeholder="fa-chevron-circle-down" value="fa-chevron-circle-down" required="" />
    10631121                                                                    <span class="bar"></span>
    10641122                                                                </div>
    … …  
    10691127                                                                <label>Color</label>
    10701128                                                                <div class="custom-input">
    1071                                                                     <input placeholder="color" value="" required=""
    1072                                                                            type="color">
     1129                                                                    <input type="color" value="#404040" placeholder="#404040" required="" />
    10731130                                                                    <span class="bar"></span>
    10741131                                                                </div>
    … …  
    11161173                                                        <label>Salutation</label>
    11171174                                                        <div class="custom-input">
    1118                                                             <input name="salutation" placeholder="Dear {user}," value="Dear {user},"
    1119                                                                    required="" type="text">
     1175                                                            <input type="text" name="salutation" value="Dear {user}," placeholder="Dear {user}," required="" />
    11201176                                                            <span class="bar"></span>
    11211177                                                        </div>
    … …  
    11271183                                                                <label>Color</label>
    11281184                                                                <div class="custom-input">
    1129                                                                     <input placeholder="color" data-template-css="color" required="" type="color">
     1185                                                                    <input type="color" data-template-css="color" placeholder="#404040" required="" />
    11301186                                                                    <span class="bar"></span>
    11311187                                                                </div>
    … …  
    11361192                                                                <label>Font Size</label>
    11371193                                                                <div class="custom-input">
    1138                                                                     <input placeholder="font-size" required=""
    1139                                                                            data-template-css="font-size"
    1140                                                                            type="text">
     1194                                                                    <input type="text" data-template-css="font-size" placeholder="13px" required="" />
    11411195                                                                    <span class="bar"></span>
    11421196                                                                </div>
    … …  
    11461200                                                            <div class="custom-label">
    11471201                                                                <label>Font Weight</label>
    1148                                                                 <div class="custom-input">
    1149                                                                     <input data-template-css="font-weight" placeholder="font-weight" required=""
    1150                                                                            type="text">
     1202                                                                <div class="form-select">
     1203                                                                    <select data-template-css="font-weight">
     1204                                                                        <option selected>normal</option>
     1205                                                                        <option>bold</option>
     1206                                                                        <option>bolder</option>
     1207                                                                        <option>lighter</option>
     1208                                                                        <option>100</option>
     1209                                                                        <option>200</option>
     1210                                                                        <option>300</option>
     1211                                                                        <option>400</option>
     1212                                                                        <option>500</option>
     1213                                                                        <option>600</option>
     1214                                                                        <option>700</option>
     1215                                                                        <option>800</option>
     1216                                                                        <option>900</option>
     1217                                                                    </select>
    11511218                                                                    <span class="bar"></span>
    11521219                                                                </div>
    … …  
    11591226                                                            <div class="custom-label">
    11601227                                                                <label>Font Style</label>
    1161                                                                 <div class="custom-input">
    1162                                                                     <input placeholder="font-style" required=""
    1163                                                                            type="text">
     1228                                                                <div class="form-select">
     1229                                                                    <select data-template-css="font-style">
     1230                                                                        <option selected>normal</option>
     1231                                                                        <option>italic</option>
     1232                                                                        <option>oblique</option>
     1233                                                                    </select>
    11641234                                                                    <span class="bar"></span>
    11651235                                                                </div>
    … …  
    11691239                                                            <div class="custom-label">
    11701240                                                                <label>Text Align</label>
    1171                                                                 <div class="custom-input">
    1172                                                                     <input placeholder="text-align" required=""
    1173                                                                            type="text">
     1241                                                                <div class="form-select">
     1242                                                                    <select data-template-css="text-align">
     1243                                                                        <option selected>left</option>
     1244                                                                        <option>right</option>
     1245                                                                        <option>center</option>
     1246                                                                        <option>justify</option>
     1247                                                                    </select>
    11741248                                                                    <span class="bar"></span>
    11751249                                                                </div>
    … …  
    11791253                                                            <div class="custom-label">
    11801254                                                                <label>Text Transform</label>
    1181                                                                 <div class="custom-input">
    1182                                                                     <input placeholder="text-transform" required=""
    1183                                                                            type="text">
     1255                                                                <div class="form-select">
     1256                                                                    <select data-template-css="text-transform">
     1257                                                                        <option selected>none</option>
     1258                                                                        <option>capitalize</option>
     1259                                                                        <option>uppercase</option>
     1260                                                                        <option>lowercase</option>
     1261                                                                    </select>
    11841262                                                                    <span class="bar"></span>
    11851263                                                                </div>
    … …  
    11971275                                                        <label>Message (Expanded View)</label>
    11981276                                                        <div class="custom-input">
    1199                                                             <input
    1200                                                                 name="message-expanded"
    1201                                                                 placeholder="Please support quality journalism. Would you pledge to pay a small fee of {price} to continue reading?"
    1202                                                                 value="Please support quality journalism. Would you pledge to pay a small fee of {price} to continue reading?"
    1203                                                                 required="" type="text">
     1277                                                            <input type="text" name="message-expanded" value="Please support quality journalism. Would you pledge to pay a small fee of {price} to continue reading?" placeholder="Please support quality journalism. Would you pledge to pay a small fee of {price} to continue reading?" required="" />
    12041278                                                            <span class="bar"></span>
    12051279                                                        </div>
    … …  
    12091283                                                        <label>Message (Collapsed View)</label>
    12101284                                                        <div class="custom-input">
    1211                                                             <input
    1212                                                                 name="message-collapsed"
    1213                                                                 placeholder="Support quality journalism. {pay-button} "
    1214                                                                 value="Support quality journalism. {pay-button} "
    1215                                                                 required="" type="text">
     1285                                                            <input type="text" name="message-collapsed" value="Support quality journalism. {pay-button} " placeholder="Support quality journalism. {pay-button} " required="" />
    12161286                                                            <span class="bar"></span>
    12171287                                                        </div>
    … …  
    12231293                                                                <label>Color</label>
    12241294                                                                <div class="custom-input">
    1225                                                                     <input data-template-css="color" placeholder="color" required="" type="color">
     1295                                                                    <input type="color" data-template-css="color" placeholder="#404040" required="" />
    12261296                                                                    <span class="bar"></span>
    12271297                                                                </div>
    … …  
    12321302                                                                <label>Font Size</label>
    12331303                                                                <div class="custom-input">
    1234                                                                     <input data-template-css="font-size" placeholder="font-size" required=""
    1235                                                                            type="text">
     1304                                                                    <input type="text" data-template-css="font-size" placeholder="13px" required="" />
    12361305                                                                    <span class="bar"></span>
    12371306                                                                </div>
    … …  
    12411310                                                            <div class="custom-label">
    12421311                                                                <label>Font Weight</label>
    1243                                                                 <div class="custom-input">
    1244                                                                     <input data-template-css="font-weight" placeholder="font-weight" required=""
    1245                                                                            type="text">
     1312                                                                <div class="form-select">
     1313                                                                    <select data-template-css="font-weight">
     1314                                                                        <option selected>normal</option>
     1315                                                                        <option>bold</option>
     1316                                                                        <option>bolder</option>
     1317                                                                        <option>lighter</option>
     1318                                                                        <option>100</option>
     1319                                                                        <option>200</option>
     1320                                                                        <option>300</option>
     1321                                                                        <option>400</option>
     1322                                                                        <option>500</option>
     1323                                                                        <option>600</option>
     1324                                                                        <option>700</option>
     1325                                                                        <option>800</option>
     1326                                                                        <option>900</option>
     1327                                                                    </select>
    12461328                                                                    <span class="bar"></span>
    12471329                                                                </div>
    … …  
    12541336                                                            <div class="custom-label">
    12551337                                                                <label>Font Style</label>
    1256                                                                 <div class="custom-input">
    1257                                                                     <input data-template-css="font-style" placeholder="font-style" required=""
    1258                                                                            type="text">
     1338                                                                <div class="form-select">
     1339                                                                    <select data-template-css="font-style">
     1340                                                                        <option selected>normal</option>
     1341                                                                        <option>italic</option>
     1342                                                                        <option>oblique</option>
     1343                                                                    </select>
    12591344                                                                    <span class="bar"></span>
    12601345                                                                </div>
    … …  
    12641349                                                            <div class="custom-label">
    12651350                                                                <label>Text Align</label>
    1266                                                                 <div class="custom-input">
    1267                                                                     <input data-template-css="text-align" placeholder="text-align" required=""
    1268                                                                            type="text">
     1351                                                                <div class="form-select">
     1352                                                                    <select data-template-css="text-align">
     1353                                                                        <option selected>left</option>
     1354                                                                        <option>right</option>
     1355                                                                        <option>center</option>
     1356                                                                        <option>justify</option>
     1357                                                                    </select>
    12691358                                                                    <span class="bar"></span>
    12701359                                                                </div>
    … …  
    12741363                                                            <div class="custom-label">
    12751364                                                                <label>Text Transform</label>
    1276                                                                 <div class="custom-input">
    1277                                                                     <input  data-template-css="text-transform" placeholder="text-transform" required=""
    1278                                                                            type="text">
     1365                                                                <div class="form-select">
     1366                                                                    <select data-template-css="text-transform">
     1367                                                                        <option selected>none</option>
     1368                                                                        <option>capitalize</option>
     1369                                                                        <option>uppercase</option>
     1370                                                                        <option>lowercase</option>
     1371                                                                    </select>
    12791372                                                                    <span class="bar"></span>
    12801373                                                                </div>
    … …  
    12921385                                                        <label>Connect Message</label>
    12931386                                                        <div class="custom-input">
    1294                                                             <input placeholder="Already used us before? {connect_url}"
    1295                                                                    value="Already used us before? {connect_url}"
    1296                                                                    required=""
    1297                                                                    type="text">
     1387                                                            <input type="text" value="Already used us before? {connect_url}" placeholder="Already used us before? {connect_url}" required="" />
    12981388                                                            <span class="bar"></span>
    12991389                                                        </div>
    … …  
    13031393                                                        <label>Disconnect Message</label>
    13041394                                                        <div class="custom-input">
    1305                                                             <input placeholder="Not {user}? {disconnect_url}"
    1306                                                                    value="Not {user}? {disconnect_url}" required=""
    1307                                                                    type="text">
     1395                                                            <input type="text" value="Not {user}? {disconnect_url}" placeholder="Not {user}? {disconnect_url}" required="" />
    13081396                                                            <span class="bar"></span>
    13091397                                                        </div>
    … …  
    13151403                                                                <label>Color</label>
    13161404                                                                <div class="custom-input">
    1317                                                                     <input placeholder="color" required="" type="color">
     1405                                                                    <input type="color" placeholder="#404040" required="" />
    13181406                                                                    <span class="bar"></span>
    13191407                                                                </div>
    … …  
    13241412                                                                <label>Font Size</label>
    13251413                                                                <div class="custom-input">
    1326                                                                     <input placeholder="font-size" required=""
    1327                                                                            type="text">
     1414                                                                    <input type="text" placeholder="12px" required="" />
    13281415                                                                    <span class="bar"></span>
    13291416                                                                </div>
    … …  
    13331420                                                            <div class="custom-label">
    13341421                                                                <label>Font Weight</label>
    1335                                                                 <div class="custom-input">
    1336                                                                     <input placeholder="font-weight" required=""
    1337                                                                            type="text">
     1422                                                                <div class="form-select">
     1423                                                                    <select data-template-css="font-weight">
     1424                                                                        <option selected>normal</option>
     1425                                                                        <option>bold</option>
     1426                                                                        <option>bolder</option>
     1427                                                                        <option>lighter</option>
     1428                                                                        <option>100</option>
     1429                                                                        <option>200</option>
     1430                                                                        <option>300</option>
     1431                                                                        <option>400</option>
     1432                                                                        <option>500</option>
     1433                                                                        <option>600</option>
     1434                                                                        <option>700</option>
     1435                                                                        <option>800</option>
     1436                                                                        <option>900</option>
     1437                                                                    </select>
    13381438                                                                    <span class="bar"></span>
    13391439                                                                </div>
    … …  
    13461446                                                            <div class="custom-label">
    13471447                                                                <label>Font Style</label>
    1348                                                                 <div class="custom-input">
    1349                                                                     <input placeholder="font-style" required=""
    1350                                                                            type="text">
     1448                                                                <div class="form-select">
     1449                                                                    <select data-template-css="font-style">
     1450                                                                        <option selected>normal</option>
     1451                                                                        <option>italic</option>
     1452                                                                        <option>oblique</option>
     1453                                                                    </select>
    13511454                                                                    <span class="bar"></span>
    13521455                                                                </div>
    … …  
    13561459                                                            <div class="custom-label">
    13571460                                                                <label>Text Align</label>
    1358                                                                 <div class="custom-input">
    1359                                                                     <input placeholder="text-align" required=""
    1360                                                                            type="text">
     1461                                                                <div class="form-select">
     1462                                                                    <select data-template-css="text-align">
     1463                                                                        <option selected>left</option>
     1464                                                                        <option>right</option>
     1465                                                                        <option>center</option>
     1466                                                                        <option>justify</option>
     1467                                                                    </select>
    13611468                                                                    <span class="bar"></span>
    13621469                                                                </div>
    … …  
    13661473                                                            <div class="custom-label">
    13671474                                                                <label>Text Transform</label>
    1368                                                                 <div class="custom-input">
    1369                                                                     <input placeholder="text-transform" required=""
    1370                                                                            type="text">
     1475                                                                <div class="form-select">
     1476                                                                    <select data-template-css="text-transform">
     1477                                                                        <option selected>none</option>
     1478                                                                        <option>capitalize</option>
     1479                                                                        <option>uppercase</option>
     1480                                                                        <option>lowercase</option>
     1481                                                                    </select>
    13711482                                                                    <span class="bar"></span>
    13721483                                                                </div>
    … …  
    13861497                                                                <label>Background Color</label>
    13871498                                                                <div class="custom-input">
    1388                                                                     <input placeholder="background-color" required=""
    1389                                                                            type="color">
     1499                                                                    <input type="color" placeholder="#ffffff" required="" />
    13901500                                                                    <span class="bar"></span>
    13911501                                                                </div>
    … …  
    13961506                                                                <label>Border</label>
    13971507                                                                <div class="custom-input">
    1398                                                                     <input placeholder="border" required="" type="text">
     1508                                                                    <input type="text" placeholder="1px solid #e2e2e2" required="" />
    13991509                                                                    <span class="bar"></span>
    14001510                                                                </div>
    … …  
    14051515                                                                <label>Border Radius</label>
    14061516                                                                <div class="custom-input">
    1407                                                                     <input placeholder="border-radius" required=""
    1408                                                                            type="text">
     1517                                                                    <input type="text" placeholder="3px" required="" />
    14091518                                                                    <span class="bar"></span>
    14101519                                                                </div>
    … …  
    14181527                                                                <label>Font Size</label>
    14191528                                                                <div class="custom-input">
    1420                                                                     <input placeholder="font-size" required=""
    1421                                                                            type="text">
     1529                                                                    <input type="text" placeholder="13px" required="" />
    14221530                                                                    <span class="bar"></span>
    14231531                                                                </div>
    … …  
    14271535                                                            <div class="custom-label">
    14281536                                                                <label>Font Weight</label>
    1429                                                                 <div class="custom-input">
    1430                                                                     <input placeholder="font-weight" required=""
    1431                                                                            type="text">
     1537                                                                <div class="form-select">
     1538                                                                    <select data-template-css="font-weight">
     1539                                                                        <option selected>normal</option>
     1540                                                                        <option>bold</option>
     1541                                                                        <option>bolder</option>
     1542                                                                        <option>lighter</option>
     1543                                                                        <option>100</option>
     1544                                                                        <option>200</option>
     1545                                                                        <option>300</option>
     1546                                                                        <option>400</option>
     1547                                                                        <option>500</option>
     1548                                                                        <option>600</option>
     1549                                                                        <option>700</option>
     1550                                                                        <option>800</option>
     1551                                                                        <option>900</option>
     1552                                                                    </select>
    14321553                                                                    <span class="bar"></span>
    14331554                                                                </div>
    … …  
    14381559                                                                <label>Color</label>
    14391560                                                                <div class="custom-input">
    1440                                                                     <input placeholder="color" required="" type="color">
     1561                                                                    <input type="color" placeholder="#404040" required="" />
    14411562                                                                    <span class="bar"></span>
    14421563                                                                </div>
    … …  
    14501571                                                                <label>Box Shadow</label>
    14511572                                                                <div class="custom-input">
    1452                                                                     <input placeholder="box-shadow" required=""
    1453                                                                            type="text">
     1573                                                                    <input type="text" placeholder="inset 2px 3px 3px rgba(0, 0, 0, 0.07)" required="" />
    14541574                                                                    <span class="bar"></span>
    14551575                                                                </div>
    … …  
    14591579                                                            <div class="custom-label">
    14601580                                                                <label>Text Transform</label>
    1461                                                                 <div class="custom-input">
    1462                                                                     <input placeholder="text-transform" required=""
    1463                                                                            type="text">
     1581                                                                <div class="form-select">
     1582                                                                    <select data-template-css="text-transform">
     1583                                                                        <option selected>none</option>
     1584                                                                        <option>capitalize</option>
     1585                                                                        <option>uppercase</option>
     1586                                                                        <option>lowercase</option>
     1587                                                                    </select>
    14641588                                                                    <span class="bar"></span>
    14651589                                                                </div>
    … …  
    14691593                                                            <div class="custom-label">
    14701594                                                                <label>Text Align</label>
    1471                                                                 <div class="custom-input">
    1472                                                                     <input placeholder="text-align" required=""
    1473                                                                            type="text">
     1595                                                                <div class="form-select">
     1596                                                                    <select data-template-css="text-align">
     1597                                                                        <option selected>left</option>
     1598                                                                        <option>right</option>
     1599                                                                        <option>center</option>
     1600                                                                        <option>justify</option>
     1601                                                                    </select>
    14741602                                                                    <span class="bar"></span>
    14751603                                                                </div>
    … …  
    14891617                                                                <label>Pay Button Text</label>
    14901618                                                                <div class="custom-input">
    1491                                                                     <input placeholder="PAY" value="PAY" required=""
    1492                                                                            type="text">
     1619                                                                    <input type="text" value="PAY" placeholder="PAY" required="" />
    14931620                                                                    <span class="bar"></span>
    14941621                                                                </div>
    … …  
    14991626                                                                <label>Pay Button Icon</label>
    15001627                                                                <div class="custom-input">
    1501                                                                     <input placeholder="fa-check" value="fa-check"
    1502                                                                            required="" type="text">
     1628                                                                    <input type="text" value="fa-check" placeholder="fa-check" required="" />
    15031629                                                                    <span class="bar"></span>
    15041630                                                                </div>
    … …  
    15121638                                                                <label>Setup Button Text</label>
    15131639                                                                <div class="custom-input">
    1514                                                                     <input placeholder="SETUP" value="SETUP" required=""
    1515                                                                            type="text">
     1640                                                                    <input type="text" value="SETUP" placeholder="SETUP" required="" />
    15161641                                                                    <span class="bar"></span>
    15171642                                                                </div>
    … …  
    15221647                                                                <label>Setup Button Icon</label>
    15231648                                                                <div class="custom-input">
    1524                                                                     <input placeholder="fa-cog" value="fa-cog"
    1525                                                                            required=""
    1526                                                                            type="text">
     1649                                                                    <input type="text" value="fa-cog" placeholder="fa-cog" required="" />
    15271650                                                                    <span class="bar"></span>
    15281651                                                                </div>
    … …  
    15361659                                                                <label>Background Color</label>
    15371660                                                                <div class="custom-input">
    1538                                                                     <input placeholder="background-color" required=""
    1539                                                                            type="color">
     1661                                                                    <input type="color" placeholder="#1b93f2" required="" />
    15401662                                                                    <span class="bar"></span>
    15411663                                                                </div>
    … …  
    15461668                                                                <label>Border</label>
    15471669                                                                <div class="custom-input">
    1548                                                                     <input placeholder="border" required="" type="text">
     1670                                                                    <input type="text" placeholder="1px solid #1b93f2" required="" />
    15491671                                                                    <span class="bar"></span>
    15501672                                                                </div>
    … …  
    15551677                                                                <label>Font Size</label>
    15561678                                                                <div class="custom-input">
    1557                                                                     <input placeholder="font-size" required=""
    1558                                                                            type="text">
     1679                                                                    <input type="text" placeholder="11px" required="" />
    15591680                                                                    <span class="bar"></span>
    15601681                                                                </div>
    … …  
    15671688                                                            <div class="custom-label">
    15681689                                                                <label>Font Weight</label>
    1569                                                                 <div class="custom-input">
    1570                                                                     <input placeholder="font-weight" required=""
    1571                                                                            type="text">
     1690                                                                <div class="form-select">
     1691                                                                    <select data-template-css="font-weight">
     1692                                                                        <option selected>normal</option>
     1693                                                                        <option>bold</option>
     1694                                                                        <option>bolder</option>
     1695                                                                        <option>lighter</option>
     1696                                                                        <option>100</option>
     1697                                                                        <option>200</option>
     1698                                                                        <option>300</option>
     1699                                                                        <option>400</option>
     1700                                                                        <option>500</option>
     1701                                                                        <option>600</option>
     1702                                                                        <option>700</option>
     1703                                                                        <option>800</option>
     1704                                                                        <option>900</option>
     1705                                                                    </select>
    15721706                                                                    <span class="bar"></span>
    15731707                                                                </div>
    … …  
    15781712                                                                <label>Border Radius</label>
    15791713                                                                <div class="custom-input">
    1580                                                                     <input placeholder="border-radius" required=""
    1581                                                                            type="text">
     1714                                                                    <input type="text" placeholder="2px" required="" />
    15821715                                                                    <span class="bar"></span>
    15831716                                                                </div>
    … …  
    15881721                                                                <label>Color</label>
    15891722                                                                <div class="custom-input">
    1590                                                                     <input placeholder="color" required="" type="color">
     1723                                                                    <input type="color" placeholder="#ffffff" required="" />
    15911724                                                                    <span class="bar"></span>
    15921725                                                                </div>
    … …  
    15991732                                                            <div class="custom-label">
    16001733                                                                <label>Font Style</label>
    1601                                                                 <div class="custom-input">
    1602                                                                     <input placeholder="font-style" required=""
    1603                                                                            type="text">
     1734                                                                <div class="form-select">
     1735                                                                    <select data-template-css="font-style">
     1736                                                                        <option selected>normal</option>
     1737                                                                        <option>italic</option>
     1738                                                                        <option>oblique</option>
     1739                                                                    </select>
    16041740                                                                    <span class="bar"></span>
    16051741                                                                </div>
    … …  
    16091745                                                            <div class="custom-label">
    16101746                                                                <label>Text Align</label>
    1611                                                                 <div class="custom-input">
    1612                                                                     <input placeholder="text-align" required=""
    1613                                                                            type="text">
     1747                                                                <div class="form-select">
     1748                                                                    <select data-template-css="text-align">
     1749                                                                        <option selected>left</option>
     1750                                                                        <option>right</option>
     1751                                                                        <option>center</option>
     1752                                                                        <option>justify</option>
     1753                                                                    </select>
    16141754                                                                    <span class="bar"></span>
    16151755                                                                </div>
    … …  
    16191759                                                            <div class="custom-label">
    16201760                                                                <label>Text Transform</label>
    1621                                                                 <div class="custom-input">
    1622                                                                     <input placeholder="text-transform" required=""
    1623                                                                            type="text">
     1761                                                                <div class="form-select">
     1762                                                                    <select data-template-css="text-transform">
     1763                                                                        <option selected>none</option>
     1764                                                                        <option>capitalize</option>
     1765                                                                        <option>uppercase</option>
     1766                                                                        <option>lowercase</option>
     1767                                                                    </select>
    16241768                                                                    <span class="bar"></span>
    16251769                                                                </div>
    … …  
    16391783                                                                <label>Closing Arrow</label>
    16401784                                                                <div class="custom-input">
    1641                                                                     <input placeholder="fa-chevron-circle-up"
    1642                                                                            value="fa-chevron-circle-up" required=""
    1643                                                                            type="text">
     1785                                                                    <input type="text" value="fa-chevron-circle-up" placeholder="fa-chevron-circle-up" required="" />
    16441786                                                                    <span class="bar"></span>
    16451787                                                                </div>
    … …  
    16501792                                                                <label>Color</label>
    16511793                                                                <div class="custom-input">
    1652                                                                     <input placeholder="color" value="" required=""
    1653                                                                            type="color">
     1794                                                                    <input type="color" value="#404040" placeholder="#404040" required="" />
    16541795                                                                    <span class="bar"></span>
    16551796                                                                </div>
    … …  
    16631804                                                                <label>Opening Arrow</label>
    16641805                                                                <div class="custom-input">
    1665                                                                     <input placeholder="fa-chevron-circle-down"
    1666                                                                            value="fa-chevron-circle-down" required=""
    1667                                                                            type="text">
     1806                                                                    <input type="text" value="fa-chevron-circle-down" placeholder="fa-chevron-circle-down" required="" />
    16681807                                                                    <span class="bar"></span>
    16691808                                                                </div>
    … …  
    16741813                                                                <label>Color</label>
    16751814                                                                <div class="custom-input">
    1676                                                                     <input placeholder="color" value="" required=""
    1677                                                                            type="color">
     1815                                                                    <input type="color" value="#404040" placeholder="#404040" required="" />
    16781816                                                                    <span class="bar"></span>
    16791817                                                                </div>
    … …  
    17201858                                                        <label>Message (Expanded View)</label>
    17211859                                                        <div class="custom-input">
    1722                                                             <input
    1723                                                                 name="message-expanded"
    1724                                                                 placeholder="Thanks for contributing {price} and help us do the job we {heart}"
    1725                                                                 value="Thanks for contributing {price} and help us do the job we {heart}"
    1726                                                                 required="" type="text">
     1860                                                            <input type="text" name="message-expanded" value="Thanks for contributing {price} and help us do the job we {heart}" placeholder="Thanks for contributing {price} and help us do the job we {heart}" required="" />
    17271861                                                            <span class="bar"></span>
    17281862                                                        </div>
    … …  
    17321866                                                        <label>Message (Collapsed View)</label>
    17331867                                                        <div class="custom-input">
    1734                                                             <input
    1735                                                                 name="message-collapsed"
    1736                                                                 placeholder="Premium content unlocked. notSatisfied_url Get immediate"
    1737                                                                 value="Premium content unlocked. notSatisfied_url Get immediate"
    1738                                                                 required="" type="text">
     1868                                                            <input type="text" name="message-collapsed" value="Premium content unlocked. notSatisfied_url Get immediate" placeholder="Premium content unlocked. notSatisfied_url Get immediate" required="" />
    17391869                                                            <span class="bar"></span>
    17401870                                                        </div>
    … …  
    17461876                                                                <label>Color</label>
    17471877                                                                <div class="custom-input">
    1748                                                                     <input placeholder="color" data-template-css="color" required="" type="color">
     1878                                                                    <input type="color" data-template-css="color" placeholder="#404040" required="" />
    17491879                                                                    <span class="bar"></span>
    17501880                                                                </div>
    … …  
    17551885                                                                <label>Font Size</label>
    17561886                                                                <div class="custom-input">
    1757                                                                     <input placeholder="font-size" data-template-css="font-size" required=""
    1758                                                                            type="text">
     1887                                                                    <input type="text" data-template-css="font-size" placeholder="13px" required="" />
    17591888                                                                    <span class="bar"></span>
    17601889                                                                </div>
    … …  
    17641893                                                            <div class="custom-label">
    17651894                                                                <label>Font Weight</label>
    1766                                                                 <div class="custom-input">
    1767                                                                     <input placeholder="font-weight" data-template-css="font-weight" required=""
    1768                                                                            type="text">
     1895                                                                <div class="form-select">
     1896                                                                    <select data-template-css="font-weight">
     1897                                                                        <option selected>normal</option>
     1898                                                                        <option>bold</option>
     1899                                                                        <option>bolder</option>
     1900                                                                        <option>lighter</option>
     1901                                                                        <option>100</option>
     1902                                                                        <option>200</option>
     1903                                                                        <option>300</option>
     1904                                                                        <option>400</option>
     1905                                                                        <option>500</option>
     1906                                                                        <option>600</option>
     1907                                                                        <option>700</option>
     1908                                                                        <option>800</option>
     1909                                                                        <option>900</option>
     1910                                                                    </select>
    17691911                                                                    <span class="bar"></span>
    17701912                                                                </div>
    … …  
    17771919                                                            <div class="custom-label">
    17781920                                                                <label>Font Style</label>
    1779                                                                 <div class="custom-input">
    1780                                                                     <input placeholder="font-style" data-template-css="font-style" required=""
    1781                                                                            type="text">
     1921                                                                <div class="form-select">
     1922                                                                    <select data-template-css="font-style">
     1923                                                                        <option selected>normal</option>
     1924                                                                        <option>italic</option>
     1925                                                                        <option>oblique</option>
     1926                                                                    </select>
    17821927                                                                    <span class="bar"></span>
    17831928                                                                </div>
    … …  
    17871932                                                            <div class="custom-label">
    17881933                                                                <label>Text Align</label>
    1789                                                                 <div class="custom-input">
    1790                                                                     <input placeholder="text-align" data-template-css="text-align" required=""
    1791                                                                            type="text">
     1934                                                                <div class="form-select">
     1935                                                                    <select data-template-css="text-align">
     1936                                                                        <option selected>left</option>
     1937                                                                        <option>right</option>
     1938                                                                        <option>center</option>
     1939                                                                        <option>justify</option>
     1940                                                                    </select>
    17921941                                                                    <span class="bar"></span>
    17931942                                                                </div>
    … …  
    17971946                                                            <div class="custom-label">
    17981947                                                                <label>Text Transform</label>
    1799                                                                 <div class="custom-input">
    1800                                                                     <input placeholder="text-transform" data-template-css="text-transform"  required=""
    1801                                                                            type="text">
     1948                                                                <div class="form-select">
     1949                                                                    <select data-template-css="text-transform">
     1950                                                                        <option selected>none</option>
     1951                                                                        <option>capitalize</option>
     1952                                                                        <option>uppercase</option>
     1953                                                                        <option>lowercase</option>
     1954                                                                    </select>
    18021955                                                                    <span class="bar"></span>
    18031956                                                                </div>
    … …  
    18151968                                                        <label>Message</label>
    18161969                                                        <div class="custom-input" data-template="expanded">
    1817                                                             <input
    1818                                                                 name="body-feeling"
    1819                                                                 placeholder="How do you feel now?"
    1820                                                                    value="How do you feel now?" required="" type="text">
     1970                                                            <input type="text" name="body-feeling" value="How do you feel now?" placeholder="How do you feel now?" required="" />
    18211971                                                            <span class="bar"></span>
    18221972                                                        </div>
    … …  
    18281978                                                                <label>Color</label>
    18291979                                                                <div class="custom-input">
    1830                                                                     <input placeholder="color"  data-template-css="color" required="" type="color">
     1980                                                                    <input type="color" data-template-css="color" placeholder="#404040" required="" />
    18311981                                                                    <span class="bar"></span>
    18321982                                                                </div>
    … …  
    18371987                                                                <label>Font Size</label>
    18381988                                                                <div class="custom-input">
    1839                                                                     <input placeholder="font-size"  data-template-css="font-size" required=""
    1840                                                                            type="text">
     1989                                                                    <input type="text" data-template-css="font-size" placeholder="13px" required="" />
    18411990                                                                    <span class="bar"></span>
    18421991                                                                </div>
    … …  
    18461995                                                            <div class="custom-label">
    18471996                                                                <label>Font Weight</label>
    1848                                                                 <div class="custom-input">
    1849                                                                     <input placeholder="font-weight" data-template-css="font-weight" required=""
    1850                                                                            type="text">
     1997                                                                <div class="form-select">
     1998                                                                    <select data-template-css="font-weight">
     1999                                                                        <option selected>normal</option>
     2000                                                                        <option>bold</option>
     2001                                                                        <option>bolder</option>
     2002                                                                        <option>lighter</option>
     2003                                                                        <option>100</option>
     2004                                                                        <option>200</option>
     2005                                                                        <option>300</option>
     2006                                                                        <option>400</option>
     2007                                                                        <option>500</option>
     2008                                                                        <option>600</option>
     2009                                                                        <option>700</option>
     2010                                                                        <option>800</option>
     2011                                                                        <option>900</option>
     2012                                                                    </select>
    18512013                                                                    <span class="bar"></span>
    18522014                                                                </div>
    … …  
    18592021                                                            <div class="custom-label">
    18602022                                                                <label>Font Style</label>
    1861                                                                 <div class="custom-input">
    1862                                                                     <input placeholder="font-style" data-template-css="font-style" required=""
    1863                                                                            type="text">
     2023                                                                <div class="form-select">
     2024                                                                    <select data-template-css="font-style">
     2025                                                                        <option selected>normal</option>
     2026                                                                        <option>italic</option>
     2027                                                                        <option>oblique</option>
     2028                                                                    </select>
    18642029                                                                    <span class="bar"></span>
    18652030                                                                </div>
    … …  
    18692034                                                            <div class="custom-label">
    18702035                                                                <label>Text Align</label>
    1871                                                                 <div class="custom-input">
    1872                                                                     <input placeholder="text-align" data-template-css="text-align" required=""
    1873                                                                            type="text">
     2036                                                                <div class="form-select">
     2037                                                                    <select data-template-css="text-align">
     2038                                                                        <option selected>left</option>
     2039                                                                        <option>right</option>
     2040                                                                        <option>center</option>
     2041                                                                        <option>justify</option>
     2042                                                                    </select>
    18742043                                                                    <span class="bar"></span>
    18752044                                                                </div>
    … …  
    18792048                                                            <div class="custom-label">
    18802049                                                                <label>Text Transform</label>
    1881                                                                 <div class="custom-input">
    1882                                                                     <input placeholder="text-transform" data-template-css="text-transform" required=""
    1883                                                                            type="text">
     2050                                                                <div class="form-select">
     2051                                                                    <select data-template-css="text-transform">
     2052                                                                        <option selected>none</option>
     2053                                                                        <option>capitalize</option>
     2054                                                                        <option>uppercase</option>
     2055                                                                        <option>lowercase</option>
     2056                                                                    </select>
    18842057                                                                    <span class="bar"></span>
    18852058                                                                </div>
    … …  
    18932066                                                                <label>Happy Mood Text</label>
    18942067                                                                <div class="custom-input">
    1895                                                                     <input
    1896                                                                         name="body-feeling-happy"
    1897                                                                         placeholder="Happy" value="Happy" required=""
    1898                                                                            type="text">
     2068                                                                    <input type="text" name="body-feeling-happy" value="Happy" placeholder="Happy" required="" />
    18992069                                                                    <span class="bar"></span>
    19002070                                                                </div>
    … …  
    19052075                                                                <label>Happy Mood Color</label>
    19062076                                                                <div class="custom-input">
    1907                                                                     <input placeholder="color" data-template-css="color" required="" type="color">
     2077                                                                    <input type="color" data-template-css="color" placeholder="#92c563" required="" />
    19082078                                                                    <span class="bar"></span>
    19092079                                                                </div>
    … …  
    19172087                                                                <label>Neutral Mood Text</label>
    19182088                                                                <div class="custom-input">
    1919                                                                     <input
    1920                                                                         name="body-feeling-ok"
    1921                                                                         placeholder="OK" value="Ok" required=""
    1922                                                                            type="text">
     2089                                                                    <input type="text" name="body-feeling-ok" value="OK" placeholder="Ok" required="" />
    19232090                                                                    <span class="bar"></span>
    19242091                                                                </div>
    … …  
    19292096                                                                <label>Neutral Mood Color</label>
    19302097                                                                <div class="custom-input">
    1931                                                                     <input placeholder="color" data-template-css="color"  required="" type="color">
     2098                                                                    <input type="color" data-template-css="color" placeholder="#eed16a" required="" />
    19322099                                                                    <span class="bar"></span>
    19332100                                                                </div>
    … …  
    19412108                                                                <label>Not happy Mood Text</label>
    19422109                                                                <div class="custom-input">
    1943                                                                     <input
    1944                                                                         name="body-feeling-not-happy"
    1945                                                                         placeholder="Not happy" value="Not happy"
    1946                                                                            required="" type="text">
     2110                                                                    <input type="text" name="body-feeling-not-happy" value="Not happy" placeholder="Not happy" required="" />
    19472111                                                                    <span class="bar"></span>
    19482112                                                                </div>
    … …  
    19532117                                                                <label>Not happy Mood Color</label>
    19542118                                                                <div class="custom-input">
    1955                                                                     <input placeholder="color" data-template-css="color"  required="" type="color">
     2119                                                                    <input type="color" data-template-css="color" placeholder="#e27378" required="" />
    19562120                                                                    <span class="bar"></span>
    19572121                                                                </div>
    … …  
    19692133                                                        <label>Message</label>
    19702134                                                        <div class="custom-input">
    1971                                                             <input
    1972                                                                 name="body-share-experience"
    1973                                                                 placeholder="Share your experience"
    1974                                                                    value="Share your experience" required=""
    1975                                                                    type="text">
     2135                                                            <input type="text" name="body-share-experience" value="Share your experience" placeholder="Share your experience" required="" />
    19762136                                                            <span class="bar"></span>
    19772137                                                        </div>
    … …  
    19832143                                                                <label>Color</label>
    19842144                                                                <div class="custom-input">
    1985                                                                     <input  data-template-css="color" placeholder="color" required="" type="color">
     2145                                                                    <input type="color" data-template-css="color" placeholder="#404040" required="" />
    19862146                                                                    <span class="bar"></span>
    19872147                                                                </div>
    … …  
    19922152                                                                <label>Font Size</label>
    19932153                                                                <div class="custom-input">
    1994                                                                     <input  data-template-css="font-size" placeholder="font-size" required=""
    1995                                                                            type="text">
     2154                                                                    <input type="text" data-template-css="font-size" placeholder="13px" required="" />
    19962155                                                                    <span class="bar"></span>
    19972156                                                                </div>
    … …  
    20012160                                                            <div class="custom-label">
    20022161                                                                <label>Font Weight</label>
    2003                                                                 <div class="custom-input">
    2004                                                                     <input data-template-css="font-weight" placeholder="font-weight" required=""
    2005                                                                            type="text">
     2162                                                                <div class="form-select">
     2163                                                                    <select data-template-css="font-weight">
     2164                                                                        <option selected>normal</option>
     2165                                                                        <option>bold</option>
     2166                                                                        <option>bolder</option>
     2167                                                                        <option>lighter</option>
     2168                                                                        <option>100</option>
     2169                                                                        <option>200</option>
     2170                                                                        <option>300</option>
     2171                                                                        <option>400</option>
     2172                                                                        <option>500</option>
     2173                                                                        <option>600</option>
     2174                                                                        <option>700</option>
     2175                                                                        <option>800</option>
     2176                                                                        <option>900</option>
     2177                                                                    </select>
    20062178                                                                    <span class="bar"></span>
    20072179                                                                </div>
    … …  
    20142186                                                            <div class="custom-label">
    20152187                                                                <label>Font Style</label>
    2016                                                                 <div class="custom-input">
    2017                                                                     <input data-template-css="font-style" placeholder="font-style" required=""
    2018                                                                            type="text">
     2188                                                                <div class="form-select">
     2189                                                                    <select data-template-css="font-style">
     2190                                                                        <option selected>normal</option>
     2191                                                                        <option>italic</option>
     2192                                                                        <option>oblique</option>
     2193                                                                    </select>
    20192194                                                                    <span class="bar"></span>
    20202195                                                                </div>
    … …  
    20242199                                                            <div class="custom-label">
    20252200                                                                <label>Text Align</label>
    2026                                                                 <div class="custom-input">
    2027                                                                     <input  data-template-css="text-align"  placeholder="text-align" required=""
    2028                                                                            type="text">
     2201                                                                <div class="form-select">
     2202                                                                    <select data-template-css="text-align">
     2203                                                                        <option selected>left</option>
     2204                                                                        <option>right</option>
     2205                                                                        <option>center</option>
     2206                                                                        <option>justify</option>
     2207                                                                    </select>
    20292208                                                                    <span class="bar"></span>
    20302209                                                                </div>
    … …  
    20342213                                                            <div class="custom-label">
    20352214                                                                <label>Text Transform</label>
    2036                                                                 <div class="custom-input">
    2037                                                                     <input data-template-css="text-transform"  placeholder="text-transform" required=""
    2038                                                                            type="text">
     2215                                                                <div class="form-select">
     2216                                                                    <select data-template-css="text-transform">
     2217                                                                        <option selected>none</option>
     2218                                                                        <option>capitalize</option>
     2219                                                                        <option>uppercase</option>
     2220                                                                        <option>lowercase</option>
     2221                                                                    </select>
    20392222                                                                    <span class="bar"></span>
    20402223                                                                </div>
    … …  
    20482231                                                                <label>Share Tool</label>
    20492232                                                                <div class="custom-input">
    2050                                                                     <input placeholder="fa-facebook" value="fa-facebook"
    2051                                                                            required="" type="text">
     2233                                                                    <input type="text" value="fa-facebook" placeholder="fa-facebook" required="" />
    20522234                                                                    <span class="bar"></span>
    20532235                                                                </div>
    … …  
    20582240                                                                <label>Share Tool Color</label>
    20592241                                                                <div class="custom-input">
    2060                                                                     <input placeholder="color" required="" type="color">
     2242                                                                    <input type="color" placeholder="#3B579D" required="" />
    20612243                                                                    <span class="bar"></span>
    20622244                                                                </div>
    … …  
    20702252                                                                <label>Share Tool</label>
    20712253                                                                <div class="custom-input">
    2072                                                                     <input placeholder="fa-twitter" value="fa-twitter"
    2073                                                                            required="" type="text">
     2254                                                                    <input type="text" value="fa-twitter" placeholder="fa-twitter" required="" />
    20742255                                                                    <span class="bar"></span>
    20752256                                                                </div>
    … …  
    20802261                                                                <label>Share Tool Color</label>
    20812262                                                                <div class="custom-input">
    2082                                                                     <input placeholder="color" required="" type="color">
     2263                                                                    <input type="color" placeholder="#4AC7F9" required="" />
    20832264                                                                    <span class="bar"></span>
    20842265                                                                </div>
    … …  
    20922273                                                                <label>Share Tool</label>
    20932274                                                                <div class="custom-input">
    2094                                                                     <input placeholder="fa-email" value="fa-email"
    2095                                                                            required="" type="text">
     2275                                                                    <input type="text" value="fa-email" placeholder="fa-email" required="" />
    20962276                                                                    <span class="bar"></span>
    20972277                                                                </div>
    … …  
    21022282                                                                <label>Share Tool Color</label>
    21032283                                                                <div class="custom-input">
    2104                                                                     <input placeholder="color" required="" type="color">
     2284                                                                    <input type="color" placeholder="#ff0000" required="" />
    21052285                                                                    <span class="bar"></span>
    21062286                                                                </div>
    … …  
    21142294                                                                <label>Share Tool</label>
    21152295                                                                <div class="custom-input">
    2116                                                                     <input placeholder="fa-share" value="fa-share"
    2117                                                                            required="" type="text">
     2296                                                                    <input type="text" value="fa-share" placeholder="fa-share" required="" />
    21182297                                                                    <span class="bar"></span>
    21192298                                                                </div>
    … …  
    21242303                                                                <label>Share Tool Color</label>
    21252304                                                                <div class="custom-input">
    2126                                                                     <input placeholder="color" required="" type="color">
     2305                                                                    <input type="color" placeholder="#000000" required="" />
    21272306                                                                    <span class="bar"></span>
    21282307                                                                </div>
    … …  
    21422321                                                                <label>Refund Button Text</label>
    21432322                                                                <div class="custom-input">
    2144                                                                     <input placeholder="REFUND" value="REFUND"
    2145                                                                            required=""
    2146                                                                            type="text">
     2323                                                                    <input type="text" value="REFUND" placeholder="REFUND" required="" />
    21472324                                                                    <span class="bar"></span>
    21482325                                                                </div>
    … …  
    21532330                                                                <label>Refund Button Icon</label>
    21542331                                                                <div class="custom-input">
    2155                                                                     <input placeholder="fa-money" value="fa-money"
    2156                                                                            required="" type="text">
     2332                                                                    <input type="text" value="fa-money" placeholder="fa-money" required="" />
    21572333                                                                    <span class="bar"></span>
    21582334                                                                </div>
    … …  
    21662342                                                                <label>Background Color</label>
    21672343                                                                <div class="custom-input">
    2168                                                                     <input placeholder="background-color" required=""
    2169                                                                            type="color">
     2344                                                                    <input type="color" placeholder="#1b93f2" required="" />
    21702345                                                                    <span class="bar"></span>
    21712346                                                                </div>
    … …  
    21762351                                                                <label>Border</label>
    21772352                                                                <div class="custom-input">
    2178                                                                     <input placeholder="border" required="" type="text">
     2353                                                                    <input type="text" placeholder="1px solid #1b93f2" required="" />
    21792354                                                                    <span class="bar"></span>
    21802355                                                                </div>
    … …  
    21852360                                                                <label>Font Size</label>
    21862361                                                                <div class="custom-input">
    2187                                                                     <input placeholder="font-size" required=""
    2188                                                                            type="text">
     2362                                                                    <input type="text" placeholder="11px" required="" />
    21892363                                                                    <span class="bar"></span>
    21902364                                                                </div>
    … …  
    21972371                                                            <div class="custom-label">
    21982372                                                                <label>Font Weight</label>
    2199                                                                 <div class="custom-input">
    2200                                                                     <input placeholder="font-weight" required=""
    2201                                                                            type="text">
     2373                                                                <div class="form-select">
     2374                                                                    <select data-template-css="font-weight">
     2375                                                                        <option selected>normal</option>
     2376                                                                        <option>bold</option>
     2377                                                                        <option>bolder</option>
     2378                                                                        <option>lighter</option>
     2379                                                                        <option>100</option>
     2380                                                                        <option>200</option>
     2381                                                                        <option>300</option>
     2382                                                                        <option>400</option>
     2383                                                                        <option>500</option>
     2384                                                                        <option>600</option>
     2385                                                                        <option>700</option>
     2386                                                                        <option>800</option>
     2387                                                                        <option>900</option>
     2388                                                                    </select>
    22022389                                                                    <span class="bar"></span>
    22032390                                                                </div>
    … …  
    22082395                                                                <label>Border Radius</label>
    22092396                                                                <div class="custom-input">
    2210                                                                     <input placeholder="border-radius" required=""
    2211                                                                            type="text">
     2397                                                                    <input type="text" placeholder="2px" required="" />
    22122398                                                                    <span class="bar"></span>
    22132399                                                                </div>
    … …  
    22182404                                                                <label>Color</label>
    22192405                                                                <div class="custom-input">
    2220                                                                     <input placeholder="color" required="" type="color">
     2406                                                                    <input type="color" placeholder="#ffffff" required="" />
    22212407                                                                    <span class="bar"></span>
    22222408                                                                </div>
    … …  
    22292415                                                            <div class="custom-label">
    22302416                                                                <label>Font Style</label>
    2231                                                                 <div class="custom-input">
    2232                                                                     <input placeholder="font-style" required=""
    2233                                                                            type="text">
     2417                                                                <div class="form-select">
     2418                                                                    <select data-template-css="font-style">
     2419                                                                        <option selected>normal</option>
     2420                                                                        <option>italic</option>
     2421                                                                        <option>oblique</option>
     2422                                                                    </select>
    22342423                                                                    <span class="bar"></span>
    22352424                                                                </div>
    … …  
    22392428                                                            <div class="custom-label">
    22402429                                                                <label>Text Align</label>
    2241                                                                 <div class="custom-input">
    2242                                                                     <input placeholder="text-align" required=""
    2243                                                                            type="text">
     2430                                                                <div class="form-select">
     2431                                                                    <select data-template-css="text-align">
     2432                                                                        <option selected>left</option>
     2433                                                                        <option>right</option>
     2434                                                                        <option>center</option>
     2435                                                                        <option>justify</option>
     2436                                                                    </select>
    22442437                                                                    <span class="bar"></span>
    22452438                                                                </div>
    … …  
    22492442                                                            <div class="custom-label">
    22502443                                                                <label>Text Transform</label>
    2251                                                                 <div class="custom-input">
    2252                                                                     <input placeholder="text-transform" required=""
    2253                                                                            type="text">
     2444                                                                <div class="form-select">
     2445                                                                    <select data-template-css="text-transform">
     2446                                                                        <option selected>none</option>
     2447                                                                        <option>capitalize</option>
     2448                                                                        <option>uppercase</option>
     2449                                                                        <option>lowercase</option>
     2450                                                                    </select>
    22542451                                                                    <span class="bar"></span>
    22552452                                                                </div>
    … …  
    22692466                                                                <label>Closing Arrow</label>
    22702467                                                                <div class="custom-input">
    2271                                                                     <input placeholder="fa-chevron-circle-up"
    2272                                                                            value="fa-chevron-circle-up" required=""
    2273                                                                            type="text">
     2468                                                                    <input type="text" value="fa-chevron-circle-up" placeholder="fa-chevron-circle-up" required="" />
    22742469                                                                    <span class="bar"></span>
    22752470                                                                </div>
    … …  
    22802475                                                                <label>Color</label>
    22812476                                                                <div class="custom-input">
    2282                                                                     <input placeholder="color" value="" required=""
    2283                                                                            type="color">
     2477                                                                    <input type="color" value="#404040" placeholder="#404040" required="" />
    22842478                                                                    <span class="bar"></span>
    22852479                                                                </div>
    … …  
    22932487                                                                <label>Opening Arrow</label>
    22942488                                                                <div class="custom-input">
    2295                                                                     <input placeholder="fa-chevron-circle-down"
    2296                                                                            value="fa-chevron-circle-down" required=""
    2297                                                                            type="text">
     2489                                                                    <input type="text" value="fa-chevron-circle-down" placeholder="fa-chevron-circle-down" required="" />
    22982490                                                                    <span class="bar"></span>
    22992491                                                                </div>
    … …  
    23042496                                                                <label>Color</label>
    23052497                                                                <div class="custom-input">
    2306                                                                     <input placeholder="color" value="" required=""
    2307                                                                            type="color">
     2498                                                                    <input type="color" value="#404040" placeholder="#404040" required="" />
    23082499                                                                    <span class="bar"></span>
    23092500                                                                </div>
    … …  
    23742565                                                                <label>Unlock Button Text</label>
    23752566                                                                <div class="custom-input">
    2376                                                                     <input placeholder="UNLOCK CONTENT"
    2377                                                                            value="UNLOCK CONTENT" required=""
    2378                                                                            type="text">
     2567                                                                    <input type="text" value="UNLOCK CONTENT" placeholder="UNLOCK CONTENT" required="" />
    23792568                                                                    <span class="bar"></span>
    23802569                                                                </div>
    … …  
    23852574                                                                <label>Unlock Button Icon</label>
    23862575                                                                <div class="custom-input">
    2387                                                                     <input placeholder="fa-unlock-alt"
    2388                                                                            value="fa-unlock-alt"
    2389                                                                            required="" type="text">
     2576                                                                    <input type="text" value="fa-unlock-alt" placeholder="fa-unlock-alt" required="" />
    23902577                                                                    <span class="bar"></span>
    23912578                                                                </div>
    … …  
    23992586                                                                <label>Background Color</label>
    24002587                                                                <div class="custom-input">
    2401                                                                     <input placeholder="background-color" required=""
    2402                                                                            type="color">
     2588                                                                    <input type="color" placeholder="#1b93f2" required="" />
    24032589                                                                    <span class="bar"></span>
    24042590                                                                </div>
    … …  
    24092595                                                                <label>Border</label>
    24102596                                                                <div class="custom-input">
    2411                                                                     <input placeholder="border" required="" type="text">
     2597                                                                    <input type="text" placeholder="1px solid #1b93f2" required="" />
    24122598                                                                    <span class="bar"></span>
    24132599                                                                </div>
    … …  
    24182604                                                                <label>Font Size</label>
    24192605                                                                <div class="custom-input">
    2420                                                                     <input placeholder="font-size" required=""
    2421                                                                            type="text">
     2606                                                                    <input type="text" placeholder="11px" required="" />
    24222607                                                                    <span class="bar"></span>
    24232608                                                                </div>
    … …  
    24302615                                                            <div class="custom-label">
    24312616                                                                <label>Font Weight</label>
    2432                                                                 <div class="custom-input">
    2433                                                                     <input placeholder="font-weight" required=""
    2434                                                                            type="text">
     2617                                                                <div class="form-select">
     2618                                                                    <select data-template-css="font-weight">
     2619                                                                        <option selected>normal</option>
     2620                                                                        <option>bold</option>
     2621                                                                        <option>bolder</option>
     2622                                                                        <option>lighter</option>
     2623                                                                        <option>100</option>
     2624                                                                        <option>200</option>
     2625                                                                        <option>300</option>
     2626                                                                        <option>400</option>
     2627                                                                        <option>500</option>
     2628                                                                        <option>600</option>
     2629                                                                        <option>700</option>
     2630                                                                        <option>800</option>
     2631                                                                        <option>900</option>
     2632                                                                    </select>
    24352633                                                                    <span class="bar"></span>
    24362634                                                                </div>
    … …  
    24412639                                                                <label>Border Radius</label>
    24422640                                                                <div class="custom-input">
    2443                                                                     <input placeholder="border-radius" required=""
    2444                                                                            type="text">
     2641                                                                    <input type="text" placeholder="2px" required="" />
    24452642                                                                    <span class="bar"></span>
    24462643                                                                </div>
    … …  
    24512648                                                                <label>Color</label>
    24522649                                                                <div class="custom-input">
    2453                                                                     <input placeholder="color" required="" type="color">
     2650                                                                    <input type="color" placeholder="#ffffff" required="" />
    24542651                                                                    <span class="bar"></span>
    24552652                                                                </div>
    … …  
    24622659                                                            <div class="custom-label">
    24632660                                                                <label>Font Style</label>
    2464                                                                 <div class="custom-input">
    2465                                                                     <input placeholder="font-style" required=""
    2466                                                                            type="text">
     2661                                                                <div class="form-select">
     2662                                                                    <select data-template-css="font-style">
     2663                                                                        <option selected>normal</option>
     2664                                                                        <option>italic</option>
     2665                                                                        <option>oblique</option>
     2666                                                                    </select>
    24672667                                                                    <span class="bar"></span>
    24682668                                                                </div>
    … …  
    24722672                                                            <div class="custom-label">
    24732673                                                                <label>Text Align</label>
    2474                                                                 <div class="custom-input">
    2475                                                                     <input placeholder="text-align" required=""
    2476                                                                            type="text">
     2674                                                                <div class="form-select">
     2675                                                                    <select data-template-css="text-align">
     2676                                                                        <option selected>left</option>
     2677                                                                        <option>right</option>
     2678                                                                        <option>center</option>
     2679                                                                        <option>justify</option>
     2680                                                                    </select>
    24772681                                                                    <span class="bar"></span>
    24782682                                                                </div>
    … …  
    24822686                                                            <div class="custom-label">
    24832687                                                                <label>Text Transform</label>
    2484                                                                 <div class="custom-input">
    2485                                                                     <input placeholder="text-transform" required=""
    2486                                                                            type="text">
     2688                                                                <div class="form-select">
     2689                                                                    <select data-template-css="text-transform">
     2690                                                                        <option selected>none</option>
     2691                                                                        <option>capitalize</option>
     2692                                                                        <option>uppercase</option>
     2693                                                                        <option>lowercase</option>
     2694                                                                    </select>
    24872695                                                                    <span class="bar"></span>
    24882696                                                                </div>
    … …  
    25322740                                                        <label>Price</label>
    25332741                                                        <div class="custom-input">
    2534                                                             <input placeholder="{price}" value="{price}" required=""
    2535                                                                    type="text">
     2742                                                            <input type="text" value="{price}" placeholder="{price}" required="" />
    25362743                                                            <span class="bar"></span>
    25372744                                                        </div>
    … …  
    25432750                                                                <label>Background Color</label>
    25442751                                                                <div class="custom-input">
    2545                                                                     <input placeholder="background-color" required=""
    2546                                                                            type="color">
     2752                                                                    <input type="color" placeholder="#f3f3f3" required="" />
    25472753                                                                    <span class="bar"></span>
    25482754                                                                </div>
    … …  
    25532759                                                                <label>Border</label>
    25542760                                                                <div class="custom-input">
    2555                                                                     <input placeholder="border" required="" type="text">
     2761                                                                    <input type="text" placeholder="1px solid #d3d3d3" required="" />
    25562762                                                                    <span class="bar"></span>
    25572763                                                                </div>
    … …  
    25622768                                                                <label>Border Radius</label>
    25632769                                                                <div class="custom-input">
    2564                                                                     <input placeholder="border-radius" required=""
    2565                                                                            type="text">
     2770                                                                    <input type="text" placeholder="50%" required="" />
    25662771                                                                    <span class="bar"></span>
    25672772                                                                </div>
    … …  
    25752780                                                                <label>Color</label>
    25762781                                                                <div class="custom-input">
    2577                                                                     <input placeholder="color" required="" type="color">
     2782                                                                    <input type="color" placeholder="#404040" required="" />
    25782783                                                                    <span class="bar"></span>
    25792784                                                                </div>
    … …  
    25832788                                                            <div class="custom-label">
    25842789                                                                <label>Font Style</label>
    2585                                                                 <div class="custom-input">
    2586                                                                     <input placeholder="font-style" required=""
    2587                                                                            type="text">
     2790                                                                <div class="form-select">
     2791                                                                    <select data-template-css="font-style">
     2792                                                                        <option selected>normal</option>
     2793                                                                        <option>italic</option>
     2794                                                                        <option>oblique</option>
     2795                                                                    </select>
    25882796                                                                    <span class="bar"></span>
    25892797                                                                </div>
    … …  
    25932801                                                            <div class="custom-label">
    25942802                                                                <label>Font Weight</label>
    2595                                                                 <div class="custom-input">
    2596                                                                     <input placeholder="font-weight" required=""
    2597                                                                            type="text">
     2803                                                                <div class="form-select">
     2804                                                                    <select data-template-css="font-weight">
     2805                                                                        <option selected>normal</option>
     2806                                                                        <option>bold</option>
     2807                                                                        <option>bolder</option>
     2808                                                                        <option>lighter</option>
     2809                                                                        <option>100</option>
     2810                                                                        <option>200</option>
     2811                                                                        <option>300</option>
     2812                                                                        <option>400</option>
     2813                                                                        <option>500</option>
     2814                                                                        <option>600</option>
     2815                                                                        <option>700</option>
     2816                                                                        <option>800</option>
     2817                                                                        <option>900</option>
     2818                                                                    </select>
    25982819                                                                    <span class="bar"></span>
    25992820                                                                </div>
    … …  
    26062827                                    </div>
    26072828                                </div>
     2829                            </div>
     2830                            <div class="custom-input pull-right">
     2831                                <button type="button" class="btn save-templates"><i class="mdi mdi-check"></i> Save</button>
    26082832                            </div>
    26092833                        </div>
    … …  
    26152839    </section>
    26162840</main>
    2617 
    2618 
Note: See TracChangeset for help on using the changeset viewer.