<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en" dir="ltr">
<head>
<title>Chrome Theme Creator - Create Custom Google Chrome Themes Online</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="description" content="Create your own Google Chrome theme online using our free Chrome Theme Creator App."/>
<meta name="keywords" content="Google Chrome Themes, Chrome Themes, Chrome Theme Creator Online, Create Chrome Theme Online"/>
<link href="creator/css/style.v80.css" type="text/css" rel="stylesheet">
<script type="text/javascript" src="creator/creator.v80.js"></script>
<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-8145786-17']);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
</script>
<style>
#main {height:400px;}
</style>
</head>
<body>
<div id="all">
<div id="content" class="clearfix">
<div id="creator">
<div id="left" class="well"></div>
<div id="right">
<div id="canvas"></div>
</div>
</div>
</div>
<div id="top">
<script type="text/javascript"><!--
google_ad_client = "ca-pub-8746842714024895";
/* 970x90 theme creator */
google_ad_slot = "6775599615";
google_ad_width = 970;
google_ad_height = 90;
//-->
</script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>
</div>
<div id="bottom">
<ul class="nav nav-pills breadcrumb">
<li><a target="_blank" href="http://www.themebeta.com/">Themes</a></li>
<li><a target="_blank" href="http://www.themebeta.com/share">Share</a></li>
<li><a href="#faqs">FAQs</a></li>
<li><a target="_blank" href="http://www.themebeta.com/privacy-policy">Privacy Policy</a></li>
<li><a target="_blank" href="http://www.themebeta.com/contact">Feedback</a></li>
<li><a target="_blank" href="http://www.themebeta.com/chrome-theme-creator-online-v5.html">Old Version</a></li>
</ul>
</div>
<div id="manual" style="padding-top:20px;">
<h1><a name="faqs">Online Google Chrome Theme Creator</a></h1>
<dl id="faqs">
<dt class="c"><h3>Where can I learn how to create a Chrome theme?</h3></dt>
<dd>
<p><a href="http://code.google.com/chrome/extensions/themes.html" target="_blank">Themes ( From Google Code )</a></p>
<p><a href="http://code.google.com/p/chromium/wiki/ThemeCreationGuide" target="_blank">Theme Creation Guide</a></p>
<p><a href="https://docs.google.com/Doc?docid=0Aa86IE02TBXPZGtzZDU0NV85ZnFocnQzZGo" target="_blank">Chrome Theme Reference</a></p>
</dd>
<dt class="c"><h3>What is a theme?</h3></dt>
<dd>
<p>A theme is a special kind of extension that changes the way the google chrome browser looks. It is a zipped bundle of fles: one manifest.json file and several png images</p>
<p>Here is an example manifest.json file for a theme:</p>
<pre>
{
"version": "1.0",
"name": "test theme",
"description": "A test theme",
"theme": {
"images" : {
"theme_frame" : "images/theme_frame_camo.png",
"theme_toolbar" : "images/theme_toolbar_camo.png",
"theme_ntp_background" : "images/theme_ntp_background_norepeat.png",
"theme_ntp_attribution" : "images/attribution.png"
},
"colors" : {
"frame" : [71, 105, 91],
"toolbar" : [207, 221, 192],
"ntp_text" : [20, 40, 0],
"ntp_link" : [36, 70, 0],
"ntp_section" : [207, 221, 192],
"button_background" : [255, 255, 255]
},
"tints" : {
"buttons" : [0.33, 0.5, 0.47]
},
"properties" : {
"ntp_background_alignment" : "bottom"
}
}
}
</pre>
<p><strong>version</strong>: One to four dot-separated integers identifying the version of this theme.
<p><strong>name</strong>: A short, plain text string (no more than 45 characters) that identifies the theme.
<p><strong>description</strong>: A description text for your theme.
<p><strong>images</strong>: Image resources for this theme. For example, "theme_ntp_background" uses to specify the background of the new tab pane.
<p><strong>colors</strong>: Colors are in RGB format, which is used to specify the color of the bookmark text, frame, etc.
<p><strong>tints</strong>: You can specify tints to be applied to parts of the UI such as buttons, the frame, and the background tab.
<p>Tints are in Hue-Saturation-Lightness (HSL) format, using floating-point numbers in the range 0 - 1.0: - Hue is an absolute value, with 0 and 1 being red. - Saturation is relative to the currently provided image. 0.5 is no change, 0 is totally desaturated, and 1 is full saturation. - Lightness is also relative, with 0.5 being no change, 0 as all pixels black, and 1 as all pixels white. You can alternatively use -1.0 for any of the HSL values to specify no change.
<p><strong>properties</strong>: this field lets you specify properties such as background alignment, background repeat.
</dd>
<dt class="c"><h3>What is this online chrome theme creator?</h3></dt>
<dd>
<p>The online chrome theme creator is a simple theme maker tool for the people who are unfamiliar with the .json file. It provide a simple way to change images, choose colors and tints, preview and pack your chrome theme online.</p>
</dd>
<dt class="c"><h3>What kind of images can I use?</h3></dt>
<dd>
<p>We recently support both png and jpg images. png images are recommended.</p>
</dd>
<dt class="c"><h3>What is the recommended size for each image?</h3></dt>
<dd>
<p>- theme_frame: ∞ x 30px</p>
<p>- theme_toolbar: ∞ x 120px</p>
<p>- theme_tab_background: ∞ x 65px</p>
<p>- theme_ntp_background: Recommended Minimum Size for images 800 x 600px</p>
<p>- theme_frame_overlay: 1100 x 40px</p>
<p>- theme_button_background: 30 x 30px</p>
</dd>
</dl>
<div style="margin-top:20px;padding-top:10px;margin-bottom:20px;border-top:1px solid #ccc;color:#666;">
<p>ThemeBeta.com is a web site for Theme Designers to create and share Chrome Themes online.<br />ThemeBeta.com is not sponsored or affiliated by Google Inc.</p>
</div>
</div>
</div>
<script>
function gOnResize(){
var twidth = 380 + Math.round(screen.width/2);
var theight = Math.round(screen.height/2+45-84);
if(twidth < 970){
twidth = 970;
}
document.getElementById('all').style.width=twidth+'px';
if(theight > 400){
document.getElementById('main').style.height=theight+'px';
}
}
creator.run(document.getElementById('left'), document.getElementById('canvas'));
window.onresize = function(){
gOnResize();
};
gOnResize();
</script>
<div id="fb-root"></div>
<script>(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/en_US/all.js#xfbml=1";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<script type="text/javascript" src="https://apis.google.com/js/plusone.js">
{parsetags: 'explicit'}
</script>
<script type="text/javascript">gapi.plusone.go();</script>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
</body>
</html>
