function qpp_styles($id)
{
qpp_change_form_update();
if (isset($_POST['Submit']) && check_admin_referer("save_qpp")) {
$options = array('font', 'font-family', 'font-size', 'font-colour', 'text-font-family', 'text-font-size', 'text-font-colour', 'form-border', 'input-border', 'required-border', 'error-colour', 'border', 'width', 'widthtype', 'background', 'backgroundhex', 'backgroundimage', 'corners', 'custom', 'use_custom', 'usetheme', 'styles', 'submit-colour', 'submit-background', 'submit-button', 'submit-border', 'submitwidth', 'submitwidthset', 'submitposition', 'coupon-colour', 'coupon-background', 'header-type', 'header-size', 'header-colour', 'slider-background', 'slider-revealed', 'handle-background', 'handle-border', 'output-size', 'output-colour');
foreach ($options as $item) {
$style[$item] = stripslashes($_POST[$item]);
$style[$item] = filter_var($style[$item], FILTER_SANITIZE_STRING);
}
update_option('qpp_style' . $id, $style);
qpp_create_css_file('update');
qpp_admin_notice("The form styles have been updated.");
}
if (isset($_POST['Reset']) && check_admin_referer("save_qpp")) {
delete_option('qpp_style' . $id);
qpp_create_css_file('update');
qpp_admin_notice("The form styles have been reset.");
}
$percent = $pixel = $none = $plain = $shadow = $roundshadow = $round = $white = $square = $theme = $submitrandom = $submitpixel = $submitright = '';
$qpp_setup = qpp_get_stored_setup();
$id = $qpp_setup['current'];
$style = qpp_get_stored_style($id);
${$style}['font'] = 'checked';
${$style}['widthtype'] = 'checked';
${$style}['submitwidth'] = 'checked';
${$style}['submitposition'] = 'checked';
${$style}['border'] = 'checked';
${$style}['background'] = 'checked';
${$style}['corners'] = 'checked';
${$style}['styles'] = 'checked';
${$style}['header-type'] = 'checked';
$content = '<div class="qpp-settings"><div class="qpp-options">';
if ($id) {
$content .= '<h2>Style options for ' . $id . '</h2>';
} else {
$content .= '<h2>Default form style options</h2>';
}
$content .= qpp_change_form($qpp_setup);
$content .= '
<form method="post" action="">
<p<span<b>Note:</b> Leave fields blank if you don\'t want to use them</span></p>
<table>
<tr>
<td colspan="2"><h2>Form Width</h2></td>
</tr>
<tr>
<td width="30%"></td>
<td><input style="margin:0; padding:0; border:none;" type="radio" name="widthtype" value="percent" ' . $percent . ' /> 100% (fill the available space)<br />
<input style="margin:0; padding:0; border:none;" type="radio" name="widthtype" value="pixel" ' . $pixel . ' /> Pixel (fixed): <input type="text" style="width:4em" label="width" name="width" value="' . $style['width'] . '" /> use px, em or %. Default is px.</td>
</tr>
<tr>
<td colspan="2"><h2>Form Border</h2>
<p>Note: The rounded corners and shadows only work on CSS3 supported browsers and even then not in IE8. Don\'t blame me, blame Microsoft.</p></td
</tr>
<tr>
<td>Type:</td>
<td><input type="radio" name="border" value="none" ' . $none . ' /> No border<br />
<input type="radio" name="border" value="plain" ' . $plain . ' /> Plain Border<br />
<input type="radio" name="border" value="rounded" ' . $rounded . ' /> Round Corners (Not IE8)<br />
<input type="radio" name="border" value="shadow" ' . $shadow . ' /> Shadowed Border(Not IE8)<br />
<input type="radio" name="border" value="roundshadow" ' . $roundshadow . ' /> Rounded Shadowed Border (Not IE8)</td>
</tr>
<tr>
<td>Style:</td>
<td><input type="text" label="form-border" name="form-border" value="' . $style['form-border'] . '" /></td>
</tr>
<tr>
<td colspan="2"><h2>Background</h2></td>
</tr>
<tr>
<td>Colour:</td>
<td><input type="radio" name="background" value="white" ' . $white . ' /> White<br />
<input type="radio" name="background" value="theme" ' . $theme . ' /> Use theme colours<br />
<input style="margin-bottom:5px;" type="radio" name="background" value="color" ' . $color . ' />
<input type="text" class="qpp-color" label="background" name="backgroundhex" value="' . $style['backgroundhex'] . '" /></td>
</tr>
<tr><td>Background<br>Image:</td>
<td>
<input id="qpp_background_image" type="text" name="backgroundimage" value="' . $style['backgroundimage'] . '" />
<input id="qpp_upload_background_image" class="button" type="button" value="Upload Image" /></td>
</tr>
<tr><td colspan="2"><h2>Font Styles</h2></td>
</tr>
<tr>
<td></td>
<td><input style="margin:0; padding:0; border:none" type="radio" name="font" value="theme" ' . $theme . ' /> Use theme font styles<br />
<input style="margin:0; padding:0; border:none" type="radio" name="font" value="plugin" ' . $plugin . ' /> Use Plugin font styles (enter font family and size below)
</td>
</tr>
<tr>
<td colspan="2"><h2>Form Header</h2></td>
</tr>
<tr>
<td style="vertical-align:top;">' . __('Header', 'quick-event-manager') . '</td>
<td><input style="margin:0; padding:0; border:none;" type="radio" name="header-type" value="h2" ' . $h2 . ' /> H2 <input style="margin:0; padding:0; border:none;" type="radio" name="header-type" value="h3" ' . $h3 . ' /> H3 <input style="margin:0; padding:0; border:none;" type="radio" name="header-type" value="h4" ' . $h4 . ' /> H4</td>
</tr>
<tr>
<td>Header Size:</td>
<td><input type="text" style="width:6em" label="header-size" name="header-size" value="' . $style['header-size'] . '" /></td>
</tr>
<tr><td>Header Colour:</td>
<td><input type="text" class="qpp-color" label="header-colour" name="header-colour" value="' . $style['header-colour'] . '" /></td>
</tr>
<tr>
<td colspan="2"><h2>Input fields</h2></td>
</tr>
<tr>
<td>Font Family: </td>
<td><input type="text" label="font-family" name="font-family" value="' . $style['font-family'] . '" /></td>
</tr>
<tr>
<td>Font Size: </td>
<td><input type="text" label="font-size" name="font-size" value="' . $style['font-size'] . '" /></td>
</tr>
<tr>
<td>Font Colour: </td>
<td><input type="text" class="qpp-color" label="font-colour" name="font-colour" value="' . $style['font-colour'] . '" /></td
</tr>
<tr>
<td>Normal Border: </td>
<td><input type="text" label="input-border" name="input-border" value="' . $style['input-border'] . '" /></td>
</tr>
<tr>
<td>Required Border: </td>
<td><input type="text" name="required-border" value="' . $style['required-border'] . '" /></td>
</tr>
<tr>
<td>Error Colour: </td>
<td><input type="text" class="qpp-color" name="error-colour" value="' . $style['error-colour'] . '" /></td>
</tr>
<tr>
<td>Corners: </td>
<td><input style="margin:0; padding:0; border:none;" type="radio" name="corners" value="corner" ' . $corner . ' /> Use theme settings<br />
<input style="margin:0; padding:0; border:none;" type="radio" name="corners" value="square" ' . $square . ' /> Square corners<br />
<input style="margin:0; padding:0; border:none;" type="radio" name="corners" value="round" ' . $round . ' /> 5px rounded corners</td></tr>
<tr>
<td colspan="2"><h2>Apply Coupon Button</h2></td>
</tr>
<tr>
<td>Font Colour: </td>
<td><input type="text" class="qpp-color" label="coupon-colour" name="coupon-colour" value="' . $style['coupon-colour'] . '" /></td>
</tr>
<tr>
<td>Background: </td>
<td><input type="text" class="qpp-color" label="coupon-background" name="coupon-background" value="' . $style['coupon-background'] . '" /><br>Other settings are the same as the Submit Button</td>
</tr>
<tr>
<td colspan="2"><h2>Other text content</h2></td>
</tr>
<tr>
<td>Font Family: </td>
<td><input type="text" label="text-font-family" name="text-font-family" value="' . $style['text-font-family'] . '" /></td>
</tr>
<tr>
<td>Font Size: </td>
<td><input type="text" style="width:6em" label="text-font-size" name="text-font-size" value="' . $style['text-font-size'] . '" /></td>
</tr>
<tr>
<td>Font Colour: </td>
<td><input type="text" class="qpp-color" label="text-font-colour" name="text-font-colour" value="' . $style['text-font-colour'] . '" /></td>
</tr>
<tr>
<td colspan="2"><h2>Submit Button</h2></td>
</tr>
<tr>
<td>Font Colour:</td>
<td><input type="text" class="qpp-color" label="submit-colour" name="submit-colour" value="' . $style['submit-colour'] . '" /></td></tr>
<tr>
<td>Background:</td>
<td><input type="text" class="qpp-color" label="submit-background" name="submit-background" value="' . $style['submit-background'] . '" /></td></tr>
<tr>
<td>Border:</td>
<td><input type="text" label="submit-border" name="submit-border" value="' . $style['submit-border'] . '" /></td></tr>
<tr>
<td>Size:</td>
<td><input style="margin:0; padding:0; border:none;" type="radio" name="submitwidth" value="submitpercent" ' . $submitpercent . ' /> Same width as the form<br />
<input style="margin:0; padding:0; border:none;" type="radio" name="submitwidth" value="submitrandom" ' . $submitrandom . ' /> Same width as the button text<br />
<input style="margin:0; padding:0; border:none;" type="radio" name="submitwidth" value="submitpixel" ' . $submitpixel . ' /> Set your own width: <input type="text" style="width:5em" label="submitwidthset" name="submitwidthset" value="' . $style['submitwidthset'] . '" /> (px, % or em)</td></tr>
<tr>
<td>Position:</td>
<td><input style="margin:0; padding:0; border:none;" type="radio" name="submitposition" value="submitleft" ' . $submitleft . ' /> Left <input style="margin:0; padding:0; border:none;" type="radio" name="submitposition" value="submitright" ' . $submitright . ' /> Right</td>
</tr>
<tr>
<td>Button Image: </td><td>
<input id="qpp_submit_button" type="text" name="submit-button" value="' . $style['submit-button'] . '" />
<input id="qpp_upload_submit_button" class="button-secondary" type="button" value="Upload Image" /></td></tr>
<tr>
<td colspan="2"><h2>Slider</h2></td>
</tr>
<tr>
<td>Normal Background</td>
<td><input type="text" class="qpp-color" label="input-border" name="slider-background" value="' . $style['slider-background'] . '" /></td>
</tr>
<tr>
<td>Revealed Background</td>
<td><input type="text" class="qpp-color" label="input-border" name="slider-revealed" value="' . $style['slider-revealed'] . '" /></td>
</tr>
<tr>
<td>Handle Background</td>
<td><input type="text" class="qpp-color" label="input-border" name="handle-background" value="' . $style['handle-background'] . '" /></td>
</tr>
<tr>
<td>Handle Border</td>
<td><input type="text" class="qpp-color" label="input-border" name="handle-border" value="' . $style['handle-border'] . '" /></td>
</tr>
<tr>
<td>Output Size</td>
<td><input type="text" style="width:5em" label="input-border" name="output-size" value="' . $style['output-size'] . '" /></td>
</tr>
<tr>
<td>Output Colour</td>
<td><input type="text" class="qpp-color" label="input-border" name="output-colour" value="' . $style['output-colour'] . '" /></td>
</tr>
</table>
<h2>Custom CSS</h2>
<p><input type="checkbox" style="margin:0; padding: 0; border: nocapne" name="use_custom" ' . $style['use_custom'] . ' value="checked" /> Use Custom CSS</p>
<p><textarea style="width:100%; height: 200px" name="custom">' . $style['custom'] . '</textarea></p>
<p>To see all the styling use the <a href="' . get_admin_url() . 'plugin-editor.php?file=quick-paypal-payments/quick-paypal-payments.css">CSS editor</a>.</p>
<p>The main style wrapper is the <code>.qpp-style</code> id.</p>
<p>The form borders are: #none, #plain, #rounded, #shadow, #roundshadow.</p>
<p><input type="submit" name="Submit" class="button-primary" style="color: #FFF;" value="Save Changes" /> <input type="submit" name="Reset" class="button-primary" style="color: #FFF;" value="Reset" onclick="return window.confirm( \'Are you sure you want to reset the form styles?\' );"/></p>';
$content .= wp_nonce_field("save_qpp");
$content .= '</form>
</div>
<div class="qpp-options" style="float:right;"> <h2>Test Form</h2>
<p>Not all of your style selections will display here (because of how WordPress works). So check the form on your site.</p>';
if ($id) {
$form = ' form="' . $id . '"';
}
$args = array('form' => $id, 'id' => '', 'amount' => '');
$content .= qpp_loop($args);
$content .= '<p>There are some more examples of payment forms <a href="http://quick-plugins.com/quick-paypal-payments/paypal-examples/" target="_blank">on this page</a>.</p>
<p>And there are loads of shortcode options <a href="http://quick-plugins.com/quick-paypal-payments/paypal-payments-shortcodes/" target="_blank">on this page</a>.</p>
</div></div>';
echo $content;
}
function qpp_generate_css()
{
$qpp_form = qpp_get_stored_setup();
$arr = explode(",", $qpp_form['alternative']);
foreach ($arr as $item) {
$corners = $input = $background = $paragraph = $submit = '';
$style = qpp_get_stored_style($item);
if ($item != '') {
$id = '.' . $item;
} else {
$id = '.default';
}
if ($style['font'] == 'plugin') {
$font = "font-family: " . $style['text-font-family'] . "; font-size: " . $style['text-font-size'] . ";color: " . $style['text-font-colour'] . ";line-height:100%;";
$inputfont = "font-family: " . $style['font-family'] . "; font-size: " . $style['font-size'] . "; color: " . $style['font-colour'] . ";";
$submitfont = "font-family: " . $style['font-family'];
if ($style['header-size'] || $style['header-colour']) {
$header = ".qpp-style" . $id . " " . $style['header-type'] . " {font-size: " . $style['header-size'] . "; color: " . $style['header-colour'] . ";}";
}
}
$input = ".qpp-style" . $id . " input[type=text], .qpp-style" . $id . " select {border: " . $style['input-border'] . ";" . $inputfont . ";font-size: inherit;height:auto;line-height:normal;}\r\n";
$required = ".qpp-style" . $id . " input[type=text].required {border: " . $style['required-border'] . ";}\r\n";
$paragraph = ".qpp-style" . $id . " p{" . $font . ";}\r\n";
if ($style['submitwidth'] == 'submitpercent') {
$submitwidth = 'width:100%;';
}
if ($style['submitwidth'] == 'submitrandom') {
$submitwidth = 'width:auto;';
}
if ($style['submitwidth'] == 'submitpixel') {
$submitwidth = 'width:' . $style['submitwidthset'] . ';';
}
if ($style['submitposition'] == 'submitleft') {
$submitposition = 'text-align:left;';
} else {
$submitposition = 'text-align:right;';
}
$submitbutton = ".qpp-style" . $id . " p.submit {" . $submitposition . "}\n.qpp-style" . $id . " #submitimage, .qpp-style" . $id . " #submitimage:hover {" . $submitwidth . "height:auto;overflow:hidden;}\n.qpp-style" . $id . " #submit, .qpp-style" . $id . " #submit:hover {" . $submitwidth . "color:" . $style['submit-colour'] . ";background:" . $style['submit-background'] . ";border:" . $style['submit-border'] . ";" . $submitfont . ";font-size: inherit;text-align:center;}\r\n";
$couponbutton = ".qpp-style" . $id . " #couponsubmit, .qpp-style" . $id . " #couponsubmit:hover{" . $submitwidth . "color:" . $style['coupon-colour'] . ";background:" . $style['coupon-background'] . ";border:" . $style['submit-border'] . ";" . $submitfont . ";font-size: inherit;margin: 3px 0px 7px;\npadding: 6px;text-align:center;}\r\n";
if ($style['border'] != 'none') {
$border = ".qpp-style" . $id . " #" . $style['border'] . " {border:" . $style['form-border'] . ";}\r\n";
}
if ($style['background'] == 'white') {
$bg = "background:#FFF";
$background = ".qpp-style" . $id . " div {background:#FFF;}\r\n";
}
if ($style['background'] == 'color') {
$background = ".qpp-style" . $id . " div {background:" . $style['backgroundhex'] . ";}\r\n";
$bg = "background:" . $style['backgroundhex'] . ";";
}
if ($style['backgroundimage']) {
$background = ".qpp-style" . $id . " #" . $style['border'] . " {background: url('" . $style['backgroundimage'] . "');}\r\n";
}
$formwidth = preg_split('#(?<=\\d)(?=[a-z%])#i', $style['width']);
if (!$formwidth[1]) {
$formwidth[1] = 'px';
}
if ($style['widthtype'] == 'pixel') {
$width = $formwidth[0] . $formwidth[1];
} else {
$width = '100%';
}
if ($style['corners'] == 'round') {
$corner = '5px';
} else {
$corner = '0';
}
$corners = ".qpp-style" . $id . " input[type=text], .qpp-style" . $id . " textarea, .qpp-style" . $id . " select, .qpp-style" . $id . " #submit {border-radius:" . $corner . ";}\r\n";
if ($style['corners'] == 'theme') {
$corners = '';
}
$slider = '.qpp-style' . $id . ' div.rangeslider, .qpp-style' . $id . ' div.rangeslider__fill {background: ' . $style['slider-background'] . ';}
.qpp-style' . $id . ' div.rangeslider__fill {background: ' . $style['slider-revealed'] . ';}
.qpp-style' . $id . ' div.rangeslider__handle {background: ' . $style['handle-background'] . ';border: 1px solid ' . $style['handle-border'] . ';}
.qpp-style' . $id . ' div.qpp-slideroutput{font-size:' . $style['output-size'] . ';color:' . $style['output-colour'] . ';}' . "\r";
$code .= ".qpp-style" . $id . " {width:" . $width . ";}\r\n" . $border . $corners . $header . $paragraph . $input . $required . $background . $submitbutton . $couponbutton . $slider;
$code .= '.qpp-style' . $id . ' input#qpptotal {font-weight:bold;padding: 0;margin-left:3px;border:none;' . $bg . '}' . "\r\n\r\n";
if ($style['use_custom'] == 'checked') {
$code .= $style['styles'] . "\r\n";
}
}
return $code;
}
