Paste reprinted from: http://www.uhdesk.com/?p=59
Chrome Skins Writing Materials
Themecreationguide
Guide and create themes using extensions. Reference
Theme
Phase implementation
Update
By October 16, 2014
Phist ... @ chromium.org
Topic Creation Guide
Image elements
Color elements
Tonal elements
UI element Properties
Element description
Basic theme Elements
Advanced Theme Elements
Packaging
Topic Creation Guide
Google Chrome extension Help files provide some information about how to create themes as an extension, but for a purely designer, in detail *. cc files can be overwhelming and confusing. In addition, there is a clear document that enables new designers to start designing! (and make life easier ...) him him).
With the creation of subject matter, and possibly by the theme possible UI elements of the attempt to help establish this help document (work in progress). It is, if helpful people donate in any possible way to this file, this will make it a good topic to create a guide!
So, how do you create a theme for Google Chrome?
You need to create a theme for something
A basic text editor (preferably a display line number, because wrapping a theme, the Chrome browser may control the file to indicate error –manifest.json, if any of the Notepad + + that it uses is a free and very useful editor recommendation! ）。
Image Editor-! The best pre-editor allows you to create good content (using a simple editor can do the work of creating themes, but very sloppy people suggest using Photoshop, or you can use free editors like GIMP and paint.net, please click here).
If you are using Photoshop, you can download the design of this browser window that is layered and can easily visualize what the theme should look like.
Some creative ideas are what the theme will be-colors, patterns and designs.
Package your theme and publish it in one of the following ways –
Upload a theme to the Chrome web App Store
Use Chrome to package it yourself. For more information, you can find out here
Pack your own. For more information, you can find out here.
Now that you have the necessary tools, let's get started.
First create a folder, the name of the theme, it inside you need to create a folder (usually named image, but it is your choice).
Then you need to create two things: the first part is to create the desired theme image (PNG image) and put them in the image folder (in the next section you will see a list of topics that can be created for the image), and then create a file named "Manifest.json", It takes a theme folder (here is an example file in Manifest.json, a basic text editor to open it, to see the content, remember that all annotations in this file are in the lower case)
Then, we pack the themes and tests.
There are many things you can do on chrome themes.
(See the element that describes the detailed explanation section.) ）
Image elements
The image element is defined in the "Images" section of the Manifest.json file.
Number Describe Symbols in Manifest.jsonRecommended Size (W x H)
1 The Chrome browser/frame is the area behind such tags."Theme_frame" ∞x80
1 1 The same area above, only this represents the inactive state."Theme_frame_inactive"
1 2 In Incognito mode, in the same region, when the window is activated"Theme_frame_incognito"
1.3 The same area, but in the No-trace mode, when the window is inactive."Theme_frame_incognito_inactive"
2 This is both the current tag and the toolbar"Theme_toolbar" ∞x120
3 This is the area that covers the inactive fins."Theme_tab_background" ∞x65
3 1 The same thing above, but for stealth mode"Theme_tab_background_incognito"
4 (not yet proven) tab background stuff!"Theme_tab_background_v"
Five This is the internal background of the theme, the large white space is belonged to this"Theme_ntp_background" Recommended minimum size picture 800x600
6 This is the image that appears in the upper-left corner of the frame"Theme_frame_overlay" 1100x40
6.1 When the window is inactive, but displays"Theme_frame_overlay_inactive"
7 This is the area that overrides the toolbar button"Theme_button_background" 30x30
8 This is the "created theme" image that will be displayed in the section"Theme_ntp_attribution"
9 Background for window control buttons (close, maximize, etc.)"Theme_window_control_background"
Color elements
The color element is defined in the "Colors" section of the Manifest.json file.
The color input is an RGB value, and some elements can contain opacity values as well. For example "Ntp_section": [15,15,15,0.6]
Number Describe Symbols in Manifest.json
10 The color of the frame, covering the smaller outer boxFramework
10.1 Color of the same element, but in inactive mode"Frame_inactive"
10.2 Color of the same element, but in incognito mode"Frame_incognito"
10.3 The same element of color, but in stealth, inactive mode"Frame_incognito_inactive"
10.4 Toolbar background color (visible by CTRL + B)"Toolbars"
11 The color of the text, the title of the current tab"Tab_text"
12 Text color, title on all inactive tab pages"Tab_background_text"
13 The color of the text of the bookmark element "Bookmark_text"
14 Internal background color of the theme "Ntp_background"
14.1 The color of all the text that comes with the inner background area"Ntp_text"
14.2 The link that appears in the background area of the color"Ntp_link"
14.3 Color of all linked underscores in the background area"Ntp_link_underline"
14.4 Part of the frame color when the mouse moves to the"Ntp_header"
14.5 Recently closed the label area of the BG color and quick Link box"Ntp_section"
14.6 Colors in the text section"Ntp_section_text"
14.7 The links that appear in some areas of the color"Ntp_section_link"
14.8 Color in the area of the link underlined section"Ntp_section_link_underline"
15 The window control button is not confirmed yet color (off, maximized, etc.)"Control_background"
16 The background color of all the toolbar buttons"Button_background"
Tonal elements
The hue element changes the hue, saturation, and brightness of the image.
The hue element in the "Color" section of the Manifest.json file.
Number Describe Symbols in Manifest.json
17 Shades that can be applied to various buttons in chromebutton
18 Hue of frames that can be applied to chromium Framework
18.1 Tint Applied when chrome window is inactive"Frame_inactive"
18.2 Color tones to frames in incognito mode"Frame_incognito"
18.3 Same as above, however, when the window is inactive (in no-trace mode)"Frame_incognito_inactive"
19 Invalid label hue in incognito mode"Background_tab"
UI element Properties
The element that is owned by property in the "Properties" section in the Manifest.json file.
Number Describe Symbols in Manifest.json
20 It tells the attributes of the alignment of the inside Backrground image"Ntp_background_alignment"
21st This property specifies that, if the above background should be repeated"Ntp_background_repeat"
22 This allows you to choose the type of Google Chrome header you want"Ntp_logo_alternate"
Yo! A lot of things on the subject! Not really!
These are the elements that Google Chrome allows users to theme, but it is in the user's rushing to decide which elements will be edited. You don't need to change what you can leave alone (in this case, these elements will have their default values/graphs). Remember that each element goes into its own part of the manifest file – the color element should be listed in the "Color", in the image element "picture" and so on.
Let's pass the element one after another.
Element description
Chrome Skins Writing Materials
