1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
|
---
title: Background Themes
slug: Mozilla/Add-ons/Themes/Background
translation_of: Mozilla/Add-ons/Themes/Lightweight_themes
---
<p>{{AddonSidebar}}</p>
<h2 id="How_to_Create_Your_Own_Background_Theme">How to Create Your Own Background Theme</h2>
<div class="primary auto" id="getting-started">
<p>Themes are made up of a "header" graphic image file, which skins the default Firefox UI background.</p>
<p>Finished Your Design? You can <a href="https://addons.mozilla.org/developers/theme/submit">submit it right now!</a></p>
<h3 id="Creating_a_Theme_Header_Image">Creating a Theme Header Image</h3>
<p>The header image is displayed as the background of the top of the browser window, nestling in behind the toolbars, address bar, search bar and the tab strip. It will be <strong>anchored to the top-right corner</strong> of the browser window.</p>
<p class="screenshot"><img alt="" src="https://mdn.mozillademos.org/files/9929/header-step.jpg" style="height: 215px; width: 1059px;"></p>
<ul>
<li><a href="https://addons.cdn.mozilla.net/static/img/docs/themes/header.jpg">View a sample Theme Header here.</a></li>
</ul>
<h4 id="Image_Requirements">Image Requirements</h4>
<ul>
<li>Dimensions should be <strong>3000px wide × 200px high</strong></li>
<li>PNG or JPG file format</li>
<li>Image must be no larger than 300 KB in file size</li>
</ul>
<h4 id="Tips">Tips</h4>
<ul>
<li>Subtle, soft contrast images and gradients work best; highly detailed images will compete with the browser UI.</li>
<li>Firefox may reveal more of the lower portion of the image if another toolbar or other UI element is added to the top of the window.</li>
<li>The upper right-hand side of the image should have the most important information—as a user increases the width of the browser window, the browser reveals more of the left-hand side of the image.</li>
</ul>
<h4 id="Online_Image_Editor_Resources">Online Image Editor Resources</h4>
<ul>
<li><a href="http://www.pixlr.com">Pixlr</a> — Pixlr offers professional and easy-to-use tools for creating and editing images within a browser.</li>
<li><a href="http://www.photoshop.com">Photoshop</a> — Tweak, rotate and touch up photos with Photoshop® Express, a free online photo editor.</li>
</ul>
<h3 id="Creating_a_Theme_Footer_Image">Creating a Theme Footer Image</h3>
<p>In older versions of Firefox, or newer versions with certain add-ons installed, the footer image is displayed as the background of the bottom of the browser window, behind the add-on and find bars. It will be anchored to the bottom-left corner of the browser window. Footer images are optional.</p>
<p class="screenshot"><img alt="" src="https://mdn.mozillademos.org/files/9935/footer-step.jpg" style="height: 56px; width: 1249px;"></p>
<ul>
<li><a href="https://addons.cdn.mozilla.net/static/img/docs/themes/footer.jpg">View a sample Theme Footer here.</a></li>
</ul>
<h4 id="Image_Requirements_2">Image Requirements</h4>
<ul>
<li>Dimensions should be <strong>3000px wide × 100px high</strong></li>
<li>PNG or JPG file format</li>
<li>Image must be no larger than 300 KB in file size</li>
</ul>
<h4 id="Tips_2">Tips</h4>
<ul>
<li>Subtle, soft contrast images and gradients work best; highly detailed images will compete with the browser UI.</li>
<li>Firefox may reveal more of the upper portion of the image if the find bar is open or if an extension adds more height to the bottom of the window.</li>
<li>The left-hand side of the image should have the most importan information—as a user increases the width of the browser window, the browser reveals more of the right-hand side of the image.</li>
</ul>
<h3 id="Submitting_your_Theme_Images">Submitting your Theme Images</h3>
<p>To get started submitting your images, go to the Theme Submission page:</p>
<ol class="itemized">
<li><strong>Name your theme</strong> — pick a unique name for your theme. Duplicate names are not allowed, so you may need to try a few times to find a unique name.</li>
<li><strong>Pick a category and tags</strong> — select a category and enter some tags that best describe your theme. Keep in mind that a reviewer may reject your theme if it is obvious that your category and/or tags are unrelated to your theme.</li>
<li><strong>Describe your theme</strong> — write a short description of your theme. Keep in mind that a reviewer may reject your theme if your description is not an accurate representation of your theme.</li>
<li><strong>Select a license for your theme</strong> — decide on a copyright license for your work. <a href="http://creativecommons.org/licenses/">Read more about the types of Creative Common licenses.</a>
<ul>
<li><strong>Important:</strong> Please be sure you have the rights to use the image in your theme!</li>
</ul>
</li>
<li><strong>Upload your images</strong> — make sure they are under 300 KB in size and JPG or PNG format!</li>
<li><strong>Select text and tab colors</strong> — you can choose the tab ("background") color and foreground text color that work best with your header image.</li>
<li><strong>Preview your theme</strong> — you're ready to preview your theme! Simply mouse over the image above the Submit Theme button, and see how it looks instantly.</li>
<li><strong>Submit your theme</strong> — if everything looks right, click the Submit Theme button and you're done! You can see all the themes you've authored on your profile page.
<ul>
<li><strong>Tip:</strong> to ensure that your theme is approved for the gallery, be sure it complies with the content guidelines and terms of service!</li>
</ul>
</li>
</ol>
<p class="screenshot"><img alt="" src="https://mdn.mozillademos.org/files/9933/submission-step.jpg" style="height: 1800px; width: 785px;"></p>
<p class="call-to-submit"><a class="button prominent" href="https://addons.mozilla.org/en-US/developers/theme/submit">Submit Your Theme Now</a></p>
<h2 class="call-to-submit" id="More_Tutorials">More Tutorials</h2>
<p><a href="http://vanillaorchidstutorials.blogspot.com/2015/11/mozilla-themes-focal-point-sizing.html">Mozilla Themes Focal Point on Sizing</a> - A tutorial on theming with a focus on sizing, by VanillaOrchids.</p>
</div>
|
