| OLD | NEW |
|---|
| (Empty) |
| 1 | |
| 2 # Theme Creation Guide | |
| 3 | |
| 4 The Google Chrome Extensions Help Docs provided some info on how to create theme
as an extension, but for a pure designer, the details of the `*`.cc file can be
overwhelming and confusing. Also, having a clear documentation, enables a new d
esigner to start designing on the go! (Also makes life easier... he he he). | |
| 5 | |
| 6 Experimenting with the creation of theme and the possible UI elements that could
be themed helped create this help document(working progress).It would be helpfu
l if **people contribute** to this document in any possible way, that would make
it a good Theme Creation Guide! | |
| 7 | |
| 8 --- | |
| 9 | |
| 10 **So how do you create a theme for Google chrome?** | |
| 11 | |
| 12 **Things you'll need to create a theme** | |
| 13 1. A basic text editor (preferably one that shows line numbers-because on pack
aging a theme, Chrome might point out the error in the control file - manifest.j
son, if any. It is recommended using Notepad++ which is a free and very useful e
ditor!). | |
| 14 1. An image editor - preferably an advance editor that can allow you to create
good content (Using simple editors can do the job of creating themes, but very
sloppy ones! It is recommended to use Photoshop, alternatively you may use the f
ree editors like Gimp and Paint.net, [click here](http://sixrevisions.com/graphi
cs-design/10-excellent-open-source-and-free-alternatives-to-photoshop/)). | |
| 15 1. If you are using Photoshop, you can download [this Chrome window design](ht
tp://www.chromium.org/user-experience/visual-design/chrome_0.2_psd.zip) which is
broken down in layers, and makes it easy to visualize what the theme should loo
k like. | |
| 16 1. Some creative ideas about what the theme is going to look like - the colors
, patterns and design. | |
| 17 1. Package your theme and publish it in one of the following ways - | |
| 18 1. [Upload](https://chrome.google.com/webstore/developer/dashboard) the them
e to the [Chrome Web Store](https://chrome.google.com/webstore/) | |
| 19 1. Use Chrome to package it by yourself. More information can be found [here
](http://code.google.com/chrome/extensions/hosting.html) | |
| 20 1. Package it by yourself. More information can be found [here](http://code.
google.com/chrome/extensions/packaging.html). | |
| 21 | |
| 22 _Now that you have the needed tools, let's get started._ | |
| 23 | |
| 24 First create a folder with the name of the theme, inside it you need to create a
folder (usually named _images_, but it's your choice). | |
| 25 | |
| 26 _Then you need to create two things:_ | |
| 27 The first part is to create the images (PNG images) needed for the theme and put
them in the _images_ folder (in the next section you'll see a list of images th
at can be created for a theme), then create a file named "manifest.json", it nee
ds to be inside the theme folder (here is an example file [manifest.json](http:/
/src.chromium.org/viewvc/chrome/trunk/src/chrome/test/data/extensions/theme/mani
fest.json?revision=72690&view=markup), open it with basic text editor to see the
contents and remember that all notation in this file is in **lower case**) | |
| 28 | |
| 29 Then we package the theme and test it. | |
| 30 | |
| 31 There are a number of things that can be themed in Chrome. | |
| 32 | |
| 33 (See [Description of Elements](#Description_of_Elements.md) section for detailed
explanation.) | |
| 34 | |
| 35 ### Image Elements | |
| 36 _Image elements are defined under the "images" section in the manifest.json file
._ | |
| 37 | |
| 38 |Number|Description|manifest.json Notation |Recommended Size (W x H)| | |
| 39 |:-----|:----------|:----------------------|:-----------------------| | |
| 40 |1 |The frame of the chrome browser/the area that is behind the tabs.|["them
e\_frame"](#theme_frame.md)|∞ x 80 | | |
| 41 |1. 1 |The same area as above, only that this represents the inactive state.|["
theme\_frame\_inactive"](#theme_frame_inactive.md)| | | |
| 42 |1. 2 |The same area under the incognito mode, when the window is active|["them
e\_frame\_incognito"](#theme_frame_incognito.md)| | | |
| 43 |1. 3 |The same area but in the incognito mode, when the window is inactive.|["
theme\_frame\_incognito\_inactive"](#theme_frame_incognito_inactive.md)|
| | |
| 44 |2 |This represents both the current tab and the toolbar together|["theme\_t
oolbar"](#theme_toolbar.md)|∞ x 120 | | |
| 45 |3 |This is the area that covers the tabs that are not active|["theme\_tab\_
background"](#theme_tab_background.md)|∞ x 65 | | |
| 46 |3. 1 |The same thing as above, but used for the incognito mode|["theme\_tab\_b
ackground\_incognito"](#theme_tab_background_incognito.md)|
| | |
| 47 |4 |(Not yet confirmed) The tab background for something!|["theme\_tab\_back
ground\_v"](#theme_tab_background_v.md)| | | |
| 48 |5 |This is the theme's inner background-the large white space is covered by
this|["theme\_ntp\_background"](#theme_ntp_background.md)|Recommended Minimum S
ize for images 800 x 600 | | |
| 49 |6 |This is the image that appears at the top left of the frame|["theme\_fra
me\_overlay"](#theme_frame_overlay.md)|1100 x 40 | | |
| 50 |6. 1 |Same as above but displayed when window is inactive|["theme\_frame\_over
lay\_inactive"](#theme_frame_overlay_inactive.md)| | | |
| 51 |7 |This is the area that covers the toolbar buttons|["theme\_button\_backgr
ound"](#theme_button_background.md)|30 x 30 | | |
| 52 |8 |This is the image that will be displayed in the 'theme created by' secti
on|["theme\_ntp\_attribution"](#theme_ntp_attribution.md)|
| | |
| 53 |9 |The background for the window control buttons (close, maximize, etc.,)|[
"theme\_window\_control\_background"](#theme_window_control_background.md)|
| | |
| 54 | |
| 55 | |
| 56 ### Color Elements | |
| 57 _Color elements are defined under the "colors" section in the manifest.json file
._ | |
| 58 | |
| 59 Colors are entered as RGB values, some elements can contain opacity value also. | |
| 60 e.g. `"ntp_section" : [15, 15, 15, 0.6]` | |
| 61 | |
| 62 | |
| 63 |Number | Description |manifest.json Notation| | |
| 64 |:------|:------------|:---------------------| | |
| 65 |10 |The color of the frame, that covers the smaller outer frame|["frame"](#
Frame.md) | | |
| 66 |10. 1 |The color of the same element, but in inactive mode|["frame\_inactive"]
(#Frame_inactive.md)| | |
| 67 |10. 2 |The color of the same element, but in incognito mode|["frame\_incognito
"](#Frame_incognito.md)| | |
| 68 |10. 3 |The color of the same element, but in incognito, inactive mode|["frame\
_incognito\_inactive"](#Frame_incognito_inactive.md)| | |
| 69 |10. 4 |The color of the toolbar background (visible by pressing Ctrl+B)|["tool
bar"](#toolbar.md)| | |
| 70 |11 |The color of text, in the title of current tab|["tab\_text"](#tab_text.
md)| | |
| 71 |12 |The color of text, in the title of all inactive tabs|["tab\_background\
_text"](#tab_background_text.md)| | |
| 72 |13 |The color of the bookmark element's text|["bookmark\_text"](#bookmark_t
ext.md)| | |
| 73 |14 |The theme's inner background color|["ntp\_background"](#ntp_background.
md)| | |
| 74 |14. 1 |The color of all the text that comes in the inner background area|["ntp
\_text"](#ntp_text.md)| | |
| 75 |14. 2 |The color of the links that appear in the background area|["ntp\_link"]
(#ntp_link.md)| | |
| 76 |14. 3 |The color of the underline of all links in the background area|["ntp\_l
ink\_underline"](#ntp_link_underline.md)| | |
| 77 |14. 4 |The color of the section frames when mouse over|["ntp\_header"](#ntp_he
ader.md)| | |
| 78 |14. 5 |The color of Recently closed tabs area's bg and frame of quick links|["
ntp\_section"](#ntp_section.md)| | |
| 79 |14. 6 |The color of text in the section|["ntp\_section\_text"](#ntp_section_te
xt.md)| | |
| 80 |14. 7 |The color of the links that appear in the section area|["ntp\_section\_
link"](#ntp_section_link.md)| | |
| 81 |14. 8 |The color of underline of links in the section area|["ntp\_section\_lin
k\_underline"](#ntp_section_link_underline.md)| | |
| 82 |15 |Unconfirmed yet-The color of the window control buttons (close, maximiz
e, etc.)|["control\_background"](#control_background.md)| | |
| 83 |16 |The background color of all the toolbar buttons|["button\_background"](
#button_background.md)| | |
| 84 | |
| 85 ### Tint Elements | |
| 86 Tint elements change the hue, saturation and lightness of images. | |
| 87 | |
| 88 _Tint elements come under the "tints" section in the manifest.json file._ | |
| 89 | |
| 90 |Number|Description|manifest.json Notation| | |
| 91 |:-----|:----------|:---------------------| | |
| 92 |17 |The color tint that can be applied to various buttons in chrome|["button
s"](#buttons.md)| | |
| 93 |18 |The color tint that can be applied to the frame of chrome|["frame"](#fra
me.md) | | |
| 94 |18. 1 |The color tint that is applied when the chrome window is inactive|["fram
e\_inactive"](#frame_inactive.md)| | |
| 95 |18. 2 |The color tint to the frame-in incognito mode|["frame\_incognito"](#fram
e_incognito.md)| | |
| 96 |18. 3 |Same as above, but when the window is inactive (and in incognito mode)|[
"frame\_incognito\_inactive"](#frame_incognito_inactive.md)| | |
| 97 |19 |The color tint of the inactive tabs in incognito mode|["background\_tab"
](#background_tab.md)| | |
| 98 | |
| 99 ### UI Property Elements | |
| 100 _Property elements come under the "properties" section in the manifest.json file
._ | |
| 101 | |
| 102 |Number|Description|manifest.json Notation| | |
| 103 |:-----|:----------|:---------------------| | |
| 104 |20 |The property that tells the alignment of the inner backrground image|["n
tp\_background\_alignment"](#ntp_background_alignment.md)| | |
| 105 |21 |This property specifies if the above background should be repeated|["ntp
\_background\_repeat"](#ntp_background_repeat.md)| | |
| 106 |22 |This lets you select the type of google chrome header you want|["ntp\_lo
go\_alternate"](#ntp_logo_alternate.md)| | |
| 107 | |
| 108 _Phew! lots of things to theme! Actually not!_ | |
| 109 | |
| 110 These are the elements that google chrome allows a user to theme, but it's the u
ser's whish to decide what elements are going to be edited. The things that you
don't need changed can be left alone (in case of which those elements will have
their default value/image).Remember that each element goes into it's own section
in the manifest file - color elements should be listed under "colors", image el
ements under "images" and so on. | |
| 111 | |
| 112 _Let's go through the elements one by one._ | |
| 113 | |
| 114 ## Description of Elements | |
| 115 | |
| 116 ### Basic Theme Elements | |
| 117 _These elements are the starting point, by using only them, you can quickly crea
te a basic theme._ | |
| 118 | |
| 119 * #### theme\_frame | |
| 120 | |
| 121 This is an image, this image represents the area behind the tabs. There is no st
rict dimensions for this image, the rest of the area in the frame that is not co
vered by this image is covered by the color element [frame](#Frame.md). It would
be helpful to know that this image by default repeats along the x-axis. Hence i
f you create a small square image, it will be automatically repeated along x-axi
s-which means you can create patterns if you use short sized images. | |
| 122 | |
| 123 Remember this image doesn't repeat along-y, hence make sure it is long enough to
cover the toolbar area-anything over 80px height is good, usually with grading
alpha transparency at the bottom so that the image blends with the "frame" color
.(you can create a large sized frame image, that extends and coveres the frame b
orders too) | |
| 124 | |
| 125 Else you might see a small seperation to the extreme top left of the frame, when
the window is in restored mode due to the wrong size of the image. | |
| 126 | |
| 127 Alternatively one can decide to create an image with loooong width-long enough t
hat the image repetition is not seen-this method allowes you to create one conti
nuous design for the frame-but this method might slow down the loading time of t
he theme since large resolution screens require image of larger width (or else y
ou'll see the repetition of the image).Note that if you don't include this image
, the default frame of chrome-the blue one is displayed, the color element ["fra
me"](#Frame.md) doesn't override this. | |
| 128 | |
| 129 * #### theme\_toolbar | |
| 130 | |
| 131 This is an image that covers the area of the current tab and the toolbar below i
t: | |
| 132 | |
| 133 Make sure this image is over 119px in height because the find bar( which appears
when you press Ctrl+F )shares the tool bar image, the width is up to you. Simil
ar to the theme\_frame, this image also tiles along the x-axis so you have the o
ption to create pattern or create a looong width image for the toolbar. Remember
that the toolbar contains some buttons and when the bookmarks are visible (CMD+
B or Ctrl+B), they too occupy space in the toolbar: | |
| 134 | |
| 135 So don't make the design too much crowded, or else the toolbar will not be visua
lly appealing. Usually for the toolbar, a square, tiling image is preferred, whi
ch might be a gradient or just plain color. | |
| 136 | |
| 137 * #### theme\_tab\_background | |
| 138 | |
| 139 This is an image, this represents the tabs - all the inactive tabs. | |
| 140 | |
| 141 usually a less saturated image of theme\_toolbar is used for this. You may also
design something else, but make sure that the design enables the user to disting
uish the inactive tabs from the active one! | |
| 142 This image also tiles default in x-axis and the height of this can be around 65p
x , the width is up to you. | |
| 143 | |
| 144 * #### theme\_ntp\_background | |
| 145 This is the image that is displayed at the large white space in the browser, in
the new tab page, it can contain a background image that contains alpha transpar
ency( the default page that contains various quick access elements-see the help
image).Note that the notation ntp represents new tab page, hence all elements wh
ich contain ntp in the notation will correspond to some element inside the new t
ab page. | |
| 146 | |
| 147 There are two ways you can create the inner background for the browser-use a lar
ge image without repetition/tiling or use a small image that repeats in x-axis a
nd/or y-axis.(see [ntp\_background\_repeat](#ntp_background_repeat.md)) | |
| 148 | |
| 149 There is also option for you to select the alignment of this image, by default t
he image is center aligned, but you may choose to align it the way you want.(see
[ntp\_background\_alignment](#ntp_background_alignment.md)) | |
| 150 | |
| 151 ### Advanced Theme Elements | |
| 152 _Use these to create a more advanced theme._ | |
| 153 * #### theme\_frame\_inactive | |
| 154 | |
| 155 This is an image, representing the area behind the tabs, when the chrome window
is out of focus/inactive. | |
| 156 | |
| 157 All that is applicable to [theme\_frame](#theme_frame.md), applies to this. Usua
lly to avoid making the theme heavy, you can go for [frame\_inactive](#frame_ina
ctive.md) tint, to show that the window is inactive-it's efficient than creating
a whole new image. But it's up to the designer to decide, if it's going to be a
n image seperately for the inactive state or there is going to be a colo tint wh
en the window is inactive. | |
| 158 | |
| 159 * #### theme\_frame\_incognito | |
| 160 | |
| 161 This is similar to the [theme\_frame](#theme_frame.md), but this image represent
s the frame of a window in incognito mode. You may choose to redesign the image
specially for the incognito mode or ignore this, so that whatever you made for [
theme\_frame](#theme_frame.md) will be tinted (see [frame\_incognito](#frame_inc
ognito.md)) and used in incognito mode (it's by default that it gets a dark tint
in incognito mode). | |
| 162 | |
| 163 * #### theme\_frame\_incognito\_inactive | |
| 164 | |
| 165 This is also an image, similar to theme\_frame\_inactive, but this image is for
the inactive frame of a window in incognito mode.(see [frame\_incognito\_inactiv
e](#frame_incognito_inactive.md)) | |
| 166 | |
| 167 * #### theme\_tab\_background\_incognito | |
| 168 | |
| 169 This is an image, that represents the inactive tabs, in the incognito mode. Alte
rnatively one can use the tinting [background\_tab](#background_tab.md), to effe
ct inactive tabs in incognito mode, but there is a slight problem that some may
want to avoid - even if you tint the inactive tabs of the incognito window, the
inactive tabs are made transparent (by default). Hence they'll show the area beh
ind them. i.e. the frame. If you want to avoid this, you can include this image. | |
| 170 | |
| 171 * #### theme\_tab\_background\_v | |
| 172 | |
| 173 Until now, the role of this image is a mystery, that someone needs to unlock! | |
| 174 | |
| 175 * #### theme\_frame\_overlay | |
| 176 | |
| 177 This is the image that will be displayed at the top left corner of the frame, o
ver the [theme\_frame](#theme_frame.md) image.Also this image doesn't repeat by
default.Hence this image may be used in case you don't want the frame area desig
n to repeat.Similar to the theme\_frame ,anything over 80px height is good, usua
lly with grading alpha transparency at the bottom so that the image blends with
the "frame" color. | |
| 178 | |
| 179 * #### theme\_frame\_overlay\_inactive | |
| 180 | |
| 181 This is similar to [theme\_frame\_overlay](#theme_frame_overlay.md), but will be
displayed when the browser window is inactive.If you do not include this image,
theme\_frame\_overlay image will be darkly tinted and used by default-to denote
the inactive frame. | |
| 182 | |
| 183 * #### theme\_button\_background | |
| 184 | |
| 185 This is the image that specifies the background for various buttons(stop,refresh
,back,forward,etc.,) in the toolbar.This image is optional, if you do not includ
e this image, the color element [button\_background](#button_background.md) over
rides the button's background color. | |
| 186 | |
| 187 Whatever image you give for this, the browser leaves off two pixels at top and l
eft of the image and mapps a square 25px image to the buttons as background.And
the icon/symbol of the button(stop,refresh,back,forward,etc.,) is displayed at t
he center. | |
| 188 | |
| 189 * #### theme\_ntp\_attribution | |
| 190 This is the image that is displayed at the bottom right corner of the new tab pa
ge.Chrome automatically puts a heading "Theme created by" and below that display
s whatever image you give as theme\_ntp\_attribution. | |
| 191 | |
| 192 A good practice is to create a small png file enough for an aurthor name(and con
tact if needed) with alpha transparency background.Making large and more color i
ntense image will attract view, but will make the theme a bit heavier(the file s
ize of the theme may increase with bigger png file) but it's your choice anyway. | |
| 193 | |
| 194 * #### theme\_window\_control\_background | |
| 195 | |
| 196 This is the image that specifies the background for the window control buttons(m
inimize,maximize,close and new tab).This image is also not necessary until you d
esperatly need to change the control button background.If the image is included,
the browser leaves off 1px at the top and left of image and maps a 16px height
button from it, the width varies according to buttons though. | |
| 197 | |
| 198 If this image is not included, the control buttons assume the background color s
pecified in the color element button\_background. | |
| 199 | |
| 200 <a href='Hidden comment: NOTE: The following three section headings Frame,Frame
_inactive,Frame_incognito,Frame_incognito_inactive - all these contain capitali
sed F intentionally so that internal page navigation is possible'></a> | |
| 201 | |
| 202 * #### Frame | |
| 203 | |
| 204 This is a color element, that specifies the color of the frame area of the brows
er(the area behind the tabs + the border).It occupies the area that is not cover
ed by the [theme\_frame](#theme_frame.md) image. | |
| 205 The format to specify this element in the manifest.json file is : `"frame" : [R,
G,B]` | |
| 206 | |
| 207 * #### Frame\_inactive | |
| 208 | |
| 209 This is a color element, that specifies the color of the frame area of the brows
er but when the window is inactive/out of focus (the area behind the tabs + the
border).It occupies the area that is not covered by the [theme\_frame](#theme_fr
ame.md) image. | |
| 210 The format to specify this element in the manifest.json file is : `"frame_inacti
ve" : [R,G,B]` | |
| 211 | |
| 212 * #### Frame\_incognito | |
| 213 | |
| 214 This is a color element similar to ["frame"](#Frame.md) ,but under the incognito
mode. | |
| 215 | |
| 216 * #### Frame\_incognito\_inactive | |
| 217 | |
| 218 This is a color element similar to ["frame\_inactive"](#Frame_inactive.md) ,but
under the incognito mode. | |
| 219 | |
| 220 * #### toolbar | |
| 221 | |
| 222 This is a color element that specifies the background color of the bookmarks bar
, that is visible only in the new tab page,when you press the shortcut keys Ctrl
+B or CMD+B.And it contains a 1px border whose color is defined by [ntp\_header]
(#ntp_header.md).Also this element can contain an opacity value that effects tra
nsparency of this bar.Note that opacity value are float values that ranges from
0 to 1, 0 being fully transparent and 1 being fully opaque. | |
| 223 | |
| 224 The format to specify this element in the manifest.json file is : `"toolbar" : [
R,G,B,opacity]` | |
| 225 | |
| 226 Eg. `"toolbar" : [25, 154, 154, 0.5]` | |
| 227 | |
| 228 Note that this element also specifies color value of the background for floating
the status bar(in the bottom of page).It's found that using opacity values for
this element makes the status bar transparent, but the text inside it will conta
in a opaque background of same color-hence area without the text will be transpa
rent | |
| 229 | |
| 230 * #### tab\_text | |
| 231 | |
| 232 This is a color element that specifies the color of the title text of the curren
t tab(tab title name of current tab). | |
| 233 | |
| 234 * #### tab\_background\_text | |
| 235 | |
| 236 This is a color element that specifies the color of the title text of all the in
active tabs/out of focus tabs. | |
| 237 | |
| 238 * #### bookmark\_text | |
| 239 This is a color element that specifies the color of the text of bookmarks in the
toolbar and the text for the download bar that appears at the bottom. | |
| 240 Note : During a download, the text color indicating the number of MB downloaded
is not configurable | |
| 241 | |
| 242 * #### ntp\_background | |
| 243 | |
| 244 This is a color element that specifies the color of the background of the new ta
b page(covers all areas that is not mapped by [theme\_ntp\_background](#theme_nt
p_background.md)).Usually if a alpha transparency is employed in the image eleme
nt theme\_ntp\_background, make sure that ntp\_background is such that it matche
s that image element. | |
| 245 | |
| 246 * #### ntp\_text | |
| 247 | |
| 248 This is a color element that specifies the color of all the text that appears in
the new tab page.(tips, quick access lables,etc.,). | |
| 249 | |
| 250 * #### ntp\_link | |
| 251 | |
| 252 This is a color element that specifes the color of all the links that may appear
in the new tab page.(currently the links under list view and links of tips that
appear at the bottom of new tab page takes it's color from this) | |
| 253 | |
| 254 * #### ntp\_link\_underline | |
| 255 | |
| 256 This is a color element that specifies the color of the underline of all links i
n the new tab page(the color of underline of the ntp\_link element). | |
| 257 | |
| 258 * #### ntp\_header | |
| 259 | |
| 260 This is a color element that specifies the color for the frame of quick link but
tons, when one hovers the mouse over it.It also specifies the 1px border color o
f the [toolbar](#toolbar.md) element ,the ntp\_section element and the color of
three small buttons in the new tab page-thumbnail view,list view,change page lay
out. | |
| 261 | |
| 262 * #### ntp\_section | |
| 263 | |
| 264 This is a color element that specifies the color for the border of the quick lin
k buttons(see help image) and also the background color for the recently closed
bar that appears above the tips area.Similar to the [toolbar](#toolbar.md) eleme
nt, this can als contain opacity value. | |
| 265 | |
| 266 * #### ntp\_section\_text | |
| 267 | |
| 268 This is a clolor element that specifies the color of all the text that appears i
n the section area.(currently onl the text "Recently closed" derives it's color
from this) | |
| 269 | |
| 270 * #### ntp\_section\_link | |
| 271 | |
| 272 This is a color element that specifies the color of all the links that appear in
the section area.Currently all the links in the "Recently closed" bar take thei
r color from this. | |
| 273 | |
| 274 * #### ntp\_section\_link\_underline | |
| 275 | |
| 276 This is a color element that specifies the color of underlines of all the links
that appear in the section area.(underlines the ntp\_section\_link element) | |
| 277 | |
| 278 * #### control\_background | |
| 279 | |
| 280 This should specify the color of the control buttons of window-minimize,maximize
and close.But I couldn't confirm that.It seems that the following element overr
ides it. | |
| 281 | |
| 282 * #### button\_background | |
| 283 | |
| 284 This is a color element that specifies the color for the background of all the b
uttons in the toolbar area(back,forward, bookmark,etc.,).This element too can co
ntain opacity values like the [toolbar](#toolbar.md), which will affect the opac
ity of the window control buttons( minimize,maximize,close). | |
| 285 | |
| 286 The following are tint elements.The tint element [buttons](#buttons.md) is the m
ost common one, but you may include other elements too. Before moving on to thos
e, one must know how the tins work.The tint elements are used to assign color ti
nts to certain elements of the browser area.The value of the tint is in floating
values ranging from 0 to 1. Eg, `"buttons" : [0.3,0.5,0.5]` (the values range f
rom 0 to 1, hence even 0.125 or 0.65 represent a color). | |
| 287 | |
| 288 * Here the first value represents the hue value, for which 0 means red and 1 m
eans red | |
| 289 | |
| 290 * The next is saturation value that lets you set vibrancy of the color,here 0
means completely desaturated and 1 means fully saturated. | |
| 291 | |
| 292 * The next value is lightness/brightness value.Here 0 means least bright and 1
means most bright | |
| 293 | |
| 294 * #### buttons | |
| 295 | |
| 296 This is a tint element, that is used to specify a color tint for icons inside al
l the buttons in the toolbar (back, forward, refresh, etc.). | |
| 297 | |
| 298 * #### frame | |
| 299 | |
| 300 This is a tint element, that is used to specify a color tint for the frame area.
Whatever image you've created for the frame area will be tinted with a color tha
t you specify here. | |
| 301 | |
| 302 * #### frame\_inactive | |
| 303 | |
| 304 This is a tint element, similar to the tint element frame, but the tint is appli
ed when the window is inactive/out of focus. | |
| 305 | |
| 306 * #### frame\_incognito | |
| 307 | |
| 308 This is a tint element, that is used to specify a color tint for the frame area
in incognito mode.Whatever image you've created for the frame area will be tinte
d with a color that you specify here. | |
| 309 | |
| 310 * #### frame\_incognito\_inactive | |
| 311 | |
| 312 This is a tint element, that is used to specify a color tint for the frame area
in incognito mode, but when the window is inactive/out of focus. | |
| 313 | |
| 314 * #### background\_tab | |
| 315 | |
| 316 This is a tint element,that specifies the color tint of the inactive tabs in inc
ognito mode. | |
| 317 | |
| 318 * #### ntp\_background\_alignment | |
| 319 | |
| 320 This is a property element, that is used to control the alignment property of th
e image element [theme\_ntp\_background](#theme_ntp_background.md).The value for
this element is entered as follows: | |
| 321 `"ntp_background_alignment" : "VALUE"` | |
| 322 | |
| 323 In the place of VALUE, you can enter either "top","bottom","left" or "right".Fur
ther you can use combinations like "left top","right bottom",etc., The differenc
e is that using only "left", aligns the background image to the left center of t
he new tab page.While using "left top" aligns the image to the top left corner o
f the new tab page. | |
| 324 Eg, `"ntp_background_alignment" : "left bottom"` | |
| 325 _(Note that the default alignment of the background image is center)._ | |
| 326 | |
| 327 * #### ntp\_background\_repeat | |
| 328 | |
| 329 This is a property element, that is used to control the repetition of the image
element [theme\_ntp\_background](#theme_ntp_background.md).It is specified as: | |
| 330 | |
| 331 `"ntp_background_repeat" : "VALUE"` | |
| 332 | |
| 333 In the place of VALUE, you can enter either "repeat","no-repeat","repeat-x" or "
repeat-y" .Depending upon the image you've created as the background you can cho
ose to repeat the image along x-axis or y-axis or turn repeat off, since repeat
is on by default!. | |
| 334 | |
| 335 * #### ntp\_logo\_alternate | |
| 336 | |
| 337 This is a propety element that specifies what header of Google chrome you wnat f
or your theme.It is specified as follows: | |
| 338 | |
| 339 `"ntp_logo_alternate" : VALUE` | |
| 340 | |
| 341 Note that this element's value should not be entered in double quotes!.In the pl
ace of VALUE you can enter 0 or 1.Choosing 0 will give you a colorful Google Chr
ome header logo inside the new tab page.Choosing 1 will give you an all white Go
ogle Chrome header logo inside the new tab page. | |
| 342 | |
| 343 ### Packaging | |
| 344 | |
| 345 That ends the description of various theme elements.Once you've the images neede
d, and after creating the manifest.json file, you are ready to test your theme.I
n the latest beta version, you'ev the option to package the theme into an extens
ion.To do this follow these steps(to know more about packaging visit [this link]
(http://code.google.com/chrome/extensions/packaging.html) ): | |
| 346 1. Open the Chrome browser (it has to be the lates beta version). | |
| 347 1. In the options menu (click the wrench in toolbar). | |
| 348 1. Choose the Tools submenu, then Extensions. | |
| 349 1. In the page that appears, click on the "Pack extension" button. | |
| 350 1. You'll be asked to browse and locate the extension root directory-remember
the folder we created with the theme name?, the root directory is that one. | |
| 351 1. In the dialog box that comes up, Click ok. | |
| 352 | |
| 353 Now the theme has been packaged into an extension ( if there were errors in the
manifest.json file, you'll be notified before the extension is created, and the
extention will not be packaged until the error is rectified).Now open the extens
ion file in chrome(it's located next to the root folder), you'll be asked if you
want to continue-click continue and you'll se your theme.Once satisfied with th
e theme, you need to create a zip file of the root directory and submit to the [
extensions gallery](https://chrome.google.com/extensions). | |
| OLD | NEW |
|---|
Chromium Code Reviews
Issue 1313153002:
Docs: theme_creation_guide.md (Closed)
Base URL: https://chromium.googlesource.com/chromium/src@master