Location: PHPKode > projects > ezStats for XBOX Live > ezStats2_xbl/admin/templates/style.html
<script type="text/javascript" charset="utf-8">
	$(document).ready(function(){
		(function($) {
			$.extend({
				save_settings: function(elem) {
					// AJAX starten
					$.ajax({
						type:     "POST",
						url:      "action.php",
						dataType: "json",
						data: {
							action: "style",
							sid:    "$sid",
							input:  {
								name: elem.attr("name"),
								value:  elem.val()
							}
						},
						beforeSend: function() {
							$('aside').stop(true, true).hide().text('%saving% ...').fadeIn();
						},
						error: function(data) {
							if (data && data.responseText)
								$('aside').text("").html(data.responseText).fadeIn();
						},
						success:    function(data) {
							if (data && data.message) 
								 $('aside').text(data.message);
							else $('aside').fadeOut();
							
							// Weiterleiten, falls Parameter uebergeben wurde
							if (data && data.href) document.location.href = data.href;
						}
					});
				},
				preset_settings: function(preset) {
					$.ajax({
						type:     "POST",
						url:      "action.php",
						dataType: "json",
						data: {
							sid: "$sid",
							action: "style",
							input:  {
								preset: preset
							}
						},
						error: function(data) {
							if (data && data.responseText) $('aside').text("").html(data.responseText).fadeIn();
						},
						success: function(data) {
							document.location.href = "index.php?style&sid=$sid";
						}
					});
				},
				reset_settings: function(input) {
					$.ajax({
						type:     "POST",
						url:      "action.php",
						dataType: "json",
						data: {
							sid: "$sid",
							action: "style",
							input: "reset_settings"
						},
						error: function(data) {
							if (data && data.responseText) $('aside').text("").html(data.responseText).fadeIn();
						},
						success: function(data) {
							document.location.href = "index.php?style&sid=$sid";
						}
					});
				}
			});
		})(jQuery);
		
		
		/* Eingaben speichern */
		$('#modes select').on("change", function(e) {
			var elem = $(this);
			var next = elem.nextAll("input");
			
			next.val(elem.val());
			$.save_settings(next);
			elem.val("...");
		});
		
		
		/* Eingaben speichern */
		$('#modes input, #modes textarea').bind("keyup change", function(e) {
			$.save_settings($(this));
		});
		
		
		/* Content-Opener */
		$('#modes a').on('click', function(e) {
			e.preventDefault();
			$('#modes ul').hide();
			$(this).next("ul").fadeIn();
		});
		
		
		
		/* Preset-Button */
		$('#preset').live("click", function(e) {
			e.preventDefault();
			var link = $(this);
			
			link
				.addClass("delete")
				.text(link.attr("delphrase"))
				.click(function() {
					$.preset_settings($('#options_preset').val());
				});
			
		});
		
		
		/* Reset-Button */
		$('#reset').live("click", function(e) {
			e.preventDefault();
			var link = $(this);
			
			link
				.addClass("delete")
				.text(link.attr("delphrase"))
				.click(function() {
					$.reset_settings();
				});
			
		});
	});
</script>


<style>
	#modes a {
		display: block;
		float: right;
		text-align: right;
		text-decoration: none;
		width: 100%;
	}
	#modes h2 {
		display: inline-block;
		float: left;
	}
</style>


<article style="width: 500px; min-height: 0;">
	<h1>%style_headline%</h1>
	<p>%style_text1%</p>
	<p>%style_text2%</p>
	<p>%style_text3% (<a href="http://code.google.com/p/ezstats/issues/list">ezStats Support</a>)</a></p>
	<p>&nbsp;</p>
	
	<form id="modes">
		<fieldset>
			<a href="#"><h2>%standalone_mode%</h2> %open%</a>
			<ul style="display: none; clear: both;">
				<li>
					<label style="width: 180px" for="body_bg_image">Background Image</label>
					<select id="options_body_bg_image" name="options_body_bg_image" style="margin-bottom: 2px">$options_body_bg_image</select>
					
					<label style="width: 180px" for="body_bg_image">&nbsp;</label>
					<input type="text" size="35" name="body_bg_image" value="$preset[body_bg_image]" />
					
					<legend style="margin: 0">%body_bg_image%</legend>
				</li>
				<li>
					<label style="width: 180px" for="header_background_image">URL of Header Image</label>
					<input type="text" size="35" name="header_background_image" value="$preset[header_background_image]" style="margin-bottom: 2px" />
					
					<label style="width: 180px" for="header_padding_top">Header Height</label>
					<input type="text" size="35" name="header_padding_top" value="$preset[header_padding_top]" style="margin-bottom: 2px" />
					
					<label style="width: 180px" for="header_margin">Header Margins</label>
					<input type="text" size="35" name="header_margin" value="$preset[header_margin]" style="margin-bottom: 2px" />
					
					<label style="width: 240px" for="header_hgroup_left">Headlines Position (Left / Top)</label>
					<input type="text" size="7" name="header_hgroup_left" value="$preset[header_hgroup_left]" style="margin-bottom: 2px" />&nbsp;&nbsp;&nbsp;
					<input type="text" size="7" name="header_hgroup_top" value="$preset[header_hgroup_top]" style="margin-bottom: 2px" />
					
					<label style="width: 180px" for="header_custom_css">Custom CSS Code</label>
					<textarea name="header_custom_css" cols="61" rows="3">$preset[header_custom_css]</textarea>
					
					<legend style="margin: 0">%header_background%</legend>
				</li>
				<li>
					<label style="width: 180px" for="body_width">Body Width</label>
					<input type="text" size="35" name="body_width" value="$preset[body_width]" />
					<legend style="margin: 0">%body_width%</legend>
				</li>
				<li>
					<label style="width: 180px" for="section_bg_image">Leaderboard Background</label>
					<select id="options_section_bg_image" name="options_section_bg_image" style="margin-bottom: 2px">$options_section_bg_image</select>
					
					<label style="width: 180px" for="section_bg_image">&nbsp;</label>
					<input type="text" size="35" name="section_bg_image" value="$preset[section_bg_image]" />
					
					<legend style="margin: 0">%section_bg_image%</legend>
				</li>
				<li>
					<label style="width: 180px" for="section_border_radius">Leaderboard Border Radius</label>
					<input type="text" size="35" name="section_border_radius" value="$preset[section_border_radius]" />
					<legend style="margin: 0">%section_border_radius%</legend>
				</li>
				<li>
					<label style="width: 180px" for="section_box_shadow">Shadow outwards</label>
					<input type="text" size="35" name="section_box_shadow" value="$preset[section_box_shadow]" style="margin-bottom: 2px" />
					
					<label style="width: 180px" for="section_box_shadow_inset">Shadow inwards</label>
					<input type="text" size="35" name="section_box_shadow_inset" value="$preset[section_box_shadow_inset]" />
					
					<legend style="margin: 0">%section_box_shadow%</legend>
				</li>
				<br/><br/>
				<li>
					<label style="width: 180px" for="font_family">Font Family</label>
					<input type="text" size="35" name="font_family" value="$preset[font_family]" style="margin-bottom: 2px" />
					
					<label style="width: 180px" for="font_family_headline">Font Family (Headlines)</label>
					<input type="text" size="35" name="font_family_headline" value="$preset[font_family_headline]" />
					
					<legend style="margin: 0">%font_family%</legend>
				</li>
				<li>
					<label style="width: 180px" for="font_size">Font Size</label>
					<input type="text" size="35" name="font_size" value="$preset[font_size]" />
					<legend style="margin: 0">%font_size%</legend>
				</li>
				<li>
					<label style="width: 180px" for="font_text_shadow_headline">Text Shadow</label>
					<input type="text" size="35" name="font_text_shadow_headline" value="$preset[font_text_shadow_headline]" />
					<legend style="margin: 0">%font_text_shadow_headline%</legend>
				</li>
				<li>
					<label style="width: 180px" for="font_color">Font Color</label>
					<input type="text" size="35" name="font_color" value="$preset[font_color]" style="margin-bottom: 2px" />
					
					<label style="width: 180px" for="font_color_invert">Font Color (inverted)</label>
					<input type="text" size="35" name="font_color_invert" value="$preset[font_color_invert]" style="margin-bottom: 2px" />
					
					<label style="width: 180px" for="font_color_headline">Font Color (Headlines)</label>
					<input type="text" size="35" name="font_color_headline" value="$preset[font_color_headline]" style="margin-bottom: 2px" />
					
					<label style="width: 180px" for="font_color_link">Font Color (Links)</label>
					<input type="text" size="35" name="font_color_link" value="$preset[font_color_link]" style="margin-bottom: 2px" />
					
					<label style="width: 180px" for="font_color_link_hover">Font Color (hovered Links)</label>
					<input type="text" size="35" name="font_color_link_hover" value="$preset[font_color_link_hover]"/>
					
					<legend style="margin: 0">%font_color%</legend>
				</li>
			</ul>
			<br/><br/>
		</fieldset>
		
		
		<fieldset>
			<a href="#"><h2>%plugin_mode%</h2> %open%</a>
			<ul style="display: none; clear: both;">
				<li>
					<label style="width: 180px" for="plugin_bg_image">Background Image</label>
					<input type="text" size="35" name="plugin_bg_image" value="$preset[plugin_bg_image]" />
					<legend style="margin: 0">%plugin_bg_image%</legend>
				</li>
				<li>
					<label style="width: 180px" for="plugin_font_size">Font Size</label>
					<input type="text" size="35" name="plugin_font_size" value="$preset[plugin_font_size]" style="margin-bottom: 2px" />
					
					<label style="width: 180px" for="plugin_font_color">Font Color</label>
					<input type="text" size="35" name="plugin_font_color" value="$preset[plugin_font_color]" style="margin-bottom: 2px" />
					
					<label style="width: 180px" for="plugin_font_family">Font Family</label>
					<input type="text" size="35" name="plugin_font_family" value="$preset[plugin_font_family]" style="margin-bottom: 2px" />
					
					<label style="width: 180px" for="plugin_font_color_invert">Font Color (inverted)</label>
					<input type="text" size="35" name="plugin_font_color_invert" value="$preset[plugin_font_color_invert]" style="margin-bottom: 2px" />
					
					<label style="width: 180px" for="plugin_font_small">Font Size (small)</label>
					<input type="text" size="35" name="plugin_font_small" value="$preset[plugin_font_small]" style="margin-bottom: 2px" />
					
					<label style="width: 180px" for="plugin_font_color_link">Font Color (Links)</label>
					<input type="text" size="35" name="plugin_font_color_link" value="$preset[plugin_font_color_link]" style="margin-bottom: 2px" />
					
					<label style="width: 180px" for="plugin_link_decoration">Link Decoration</label>
					<input type="text" size="35" name="plugin_link_decoration" value="$preset[plugin_link_decoration]" style="margin-bottom: 2px" />
					
					<label style="width: 180px" for="plugin_line_height">Line Height</label>
					<input type="text" size="35" name="plugin_line_height" value="$preset[plugin_line_height]"/>
					
					<legend style="margin: 0">%plugin_font_size%</legend>
				</li>
			</ul>
			<br/><br/>
		</fieldset>
		
		
		<fieldset>
			<a href="#"><h2>%both_modes%</h2> %open%</a>
			<ul style="display: none; clear: both;">
				<li>
					<label style="width: 245px" for="overview_border_color">Border Color</label>
					<input type="text" size="28" name="overview_border_color" value="$preset[overview_border_color]" style="margin-bottom: 2px" />
					
					<label style="width: 245px" for="overview_cell_padding">Cell Padding</label>
					<input type="text" size="28" name="overview_cell_padding" value="$preset[overview_cell_padding]" style="margin-bottom: 2px" />
					
					<label style="width: 245px" for="overview_thead_border_color">Head Border Color</label>
					<input type="text" size="28" name="overview_thead_border_color" value="$preset[overview_thead_border_color]" style="margin-bottom: 2px" />
					
					<label style="width: 245px" for="overview_thead_bg_color">Head Background Color</label>
					<input type="text" size="28" name="overview_thead_bg_color" value="$preset[overview_thead_bg_color]" style="margin-bottom: 2px" />
					
					<label style="width: 245px" for="overview_thead_bg_color_rgba">Head Background Color (RGBA)</label>
					<input type="text" size="28" name="overview_thead_bg_color_rgba" value="$preset[overview_thead_bg_color_rgba]" style="margin-bottom: 2px" />
					
					<label style="width: 245px" for="overview_thead_bg_highlight_color">Head Active Background Color</label>
					<input type="text" size="28" name="overview_thead_bg_highlight_color" value="$preset[overview_thead_bg_highlight_color]" style="margin-bottom: 2px" />
					
					<label style="width: 245px" for="overview_thead_bg_highlight_color_rgba">Head Active Background Color (RGBA)</label>
					<input type="text" size="28" name="overview_thead_bg_highlight_color_rgba" value="$preset[overview_thead_bg_highlight_color_rgba]" style="margin-bottom: 2px" />
					
					<label style="width: 245px" for="overview_gfx_thead_bg">Sorter Image (Both)</label>
					<input type="text" size="28" name="overview_gfx_thead_bg" value="$preset[overview_gfx_thead_bg]" style="margin-bottom: 2px" />
					
					<label style="width: 245px" for="overview_gfx_thead_asc">Sorter Image (ASC)</label>
					<input type="text" size="28" name="overview_gfx_thead_asc" value="$preset[overview_gfx_thead_asc]" style="margin-bottom: 2px" />
					
					<label style="width: 245px" for="overview_gfx_thead_desc">Sorter Image (DESC)</label>
					<input type="text" size="28" name="overview_gfx_thead_desc" value="$preset[overview_gfx_thead_desc]"/>
					
					<legend style="margin: 0">%overview_border_color%</legend>
				</li>
				<li>
					<label style="width: 245px" for="bubble_font_color">Tooltipp Font Color</label>
					<input type="text" size="28" name="bubble_font_color" value="$preset[bubble_font_color]" style="margin-bottom: 2px" />
					
					<label style="width: 245px" for="bubble_font_size">Tooltipp Font Size</label>
					<input type="text" size="28" name="bubble_font_size" value="$preset[bubble_font_size]" style="margin-bottom: 2px" />
					
					<label style="width: 245px" for="bubble_font_family">Tooltipp Font Family</label>
					<input type="text" size="28" name="bubble_font_family" value="$preset[bubble_font_family]" style="margin-bottom: 2px" />
					
					<label style="width: 245px" for="bubble_color">Tooltipp Background Color</label>
					<input type="text" size="28" name="bubble_color" value="$preset[bubble_color]" style="margin-bottom: 2px" />
					
					<label style="width: 245px" for="bubble_color_rgba">Tooltipp Background Color (RGBA)</label>
					<input type="text" size="28" name="bubble_color_rgba" value="$preset[bubble_color_rgba]" />
					
					<legend style="margin: 0">%bubble_font_color%</legend>
				</li>
				<li>
					<label style="width: 245px" for="rankbar_bg_color">Rank Background Color</label>
					<input type="text" size="28" name="rankbar_bg_color" value="$preset[rankbar_bg_color]" style="margin-bottom: 2px" />
					
					<label style="width: 245px" for="rankbar_bg_color_rgba">Rank Background Color (RGBA)</label>
					<input type="text" size="28" name="rankbar_bg_color_rgba" value="$preset[rankbar_bg_color_rgba]" style="margin-bottom: 2px" />
					
					<label style="width: 245px" for="rankline_bg_color">Rank Foreground Color</label>
					<input type="text" size="28" name="rankline_bg_color" value="$preset[rankline_bg_color]" style="margin-bottom: 2px" />
					
					<label style="width: 245px" for="rankline_bg_color_rgba">Rank Foreground Color (RGBA)</label>
					<input type="text" size="28" name="rankline_bg_color_rgba" value="$preset[rankline_bg_color_rgba]" />
					
					<legend style="margin: 0">%rankbar_bg_color%</legend>
				</li>
			</ul>
		</fieldset>
	</form>
</article>
<article style="width: 300px; margin: 0 0 40px 0; min-height: 0;">
	<h2>%preset%</h2>
	<ul>
		<li>%style_text5%</li>
		<li>&nbsp;</li>
		<li><select id="options_preset" name="options_preset" style="margin-bottom: 2px">$options_preset</select></li>
		<li>&nbsp;</li>
		<li><a class="button" defphrase="%set%" delphrase="%set%?" id="preset" href="#">%set%</a></li>
	</ul>
</article>
<article style="width: 300px; min-height: 0;">
	<h2>%reset%</h2>
	<ul>
		<li>%style_text4%</li>
		<li>&nbsp;</li>
		<li><a class="button" defphrase="%reset%" delphrase="%reset%?" id="reset" action="reset" href="#">%reset%</a></li>
	</ul>
</article>
<div class="clear"></div>
Return current item: ezStats for XBOX Live