chrome皮肤编写教材

粘贴转载自:http://www.uhdesk.com/?p=59

chrome皮肤编写教材

ThemeCreationGuide


指南和使用扩展的创建主题。参考


 


主题，


相实施


更新
2014年10月16日通过
phist … @ chromium.org


主题创建指南
图像元素
色彩元素
色调元素
UI元素属性
元素说明
基本主题元素
先进的主题元素
包装
主题创建指南


谷歌Chrome扩展帮助文件提供了关于如何创建主题，作为一个扩展的一些信息，但对于一个纯粹的设计师，在细节* .cc文件可以是压倒性和混乱。另外，有一个清晰的文档，使新的设计师开始在去设计！（也使生活更轻松……他他他）。


与创作题材，并可能被主题可能UI元素的尝试帮助建立这个帮助文档（工作正在进行中）。它是，如果有帮助的人捐款以任何可能的方式来这个文件，这将使它成为一个很好的主题创建指南！


那么，你如何创建一个主题为谷歌Chrome浏览器？


你需要创建一个主题的东西


一个基本的文本编辑器（最好是一个显示行号，因为包装一个主题，Chrome浏览器中可能会控制文件指出错误 – manifest.json中，如果任何它使用的Notepad ++是一个免费的和非常有用的编辑推荐！ ）。
图像编辑器- ！最好提前编辑器，可以让你创建良好的内容（使用简单的编辑器可以做创建主题的工作，但很马虎的人建议使用Photoshop，或者你可以使用免费的编辑器，如GIMP和Paint.net，请点击这里）。
如果你正在使用的Photoshop，你可以下载这个浏览器窗口的设计是层层分解，并可以很容易地可视化的主题应该是什么样子。
一些有创意的想法是什么主题将会是什么样 – 颜色，图案和设计。
打包你的主题，并以下列方式之一，其发布 –
上传主题，以Chrome网上应用店
使用Chrome自行打包。了解更多信息，可以发现这里
自己打包。了解更多信息，可以发现这里。
现在，你有必要的工具，让我们开始吧。


首先创建一个文件夹，主题的名称，它里面你需要创建一个文件夹（通常命名为图像，但它是你的选择）。


然后，你需要创建两件事情：第一部分是创建所需的主题图像（PNG图像），并把它们在图像文件夹（在下一节中，您将看到可以为创建图像的列表主题），然后创建一个名为“的manifest.json”的文件，它需要的主题文件夹（在这里是一个例子文件中的manifest.json，基本的文本编辑器打开它，看看内容，请记住，在这个文件中的所有批注是在较低的情况下）


然后，我们打包的主题和测试。


有许多事情可以在Chrome主题进行。


（见的元素描述了详细的解释部分。）


图像元素


图像元素下的的manifest.json文件中的“图像”部分中定义。


号码 描述 manifest.json中符号 推荐尺寸（宽x高）
1 Chrome浏览器的/框架是这样的标签后面的区域。 “theme_frame” ∞×80
1 1 相同面积以上，仅此表示的不活动状态。 “theme_frame_inactive”
1 2 在隐身模式下，在同一地区，当窗口被激活 “theme_frame_incognito”
1. 3 同一区域，但在无痕模式，当窗口处于非活动状态。 “theme_frame_incognito_inactive”
2 这既是当前标签和工具栏在一起 “theme_toolbar” ∞×120
3 这是覆盖不活动的翼片的区域 “theme_tab_background” ∞×65
3 1 同样的事情上面，而是用于隐身模式 “theme_tab_background_incognito”
4 （尚未证实）选项卡背景的东西！ “theme_tab_background_v”
五 这是主题的内部背景，白色的大空间是属于本 “theme_ntp_background” 建议的最小大小的图片800×600
6 这是出现在帧的左上角的图像 “theme_frame_overlay” 1100×40
6. 1 当窗口处于非活动状态同上，但显示 “theme_frame_overlay_inactive”
7 这是覆盖工具栏按钮的区域 “theme_button_background” 30×30
8 这是将显示在节中的“所创造的主题”的形象 “theme_ntp_attribution”
9 背景为窗口控制按钮（关闭，最大化，等等） “theme_window_control_background”
色彩元素


色彩元素下的的manifest.json文件中的“颜色”部分中定义。


颜色输入为RGB值，一些元素可以包含不透明度值也。例如“ntp_section”：[15，15，15，0.6]


号码 描述 manifest.json中符号
10 该帧的颜色，覆盖较小外框 “框架”
10. 1 相同的元素的颜色，但在非活动模式 “frame_inactive”
10. 2 同一元素的颜色，但在隐身模式 “frame_incognito”
10. 3 相同的元素的颜色，但在隐身，非活动模式 “frame_incognito_inactive”
10. 4 工具栏背景颜色（按Ctrl + B可见） “工具栏”
11 文字的颜色，在当前选项卡的标题 “tab_text”
12 文字的颜色，在所有非活动标签页的标题 “tab_background_text”
13 书签元素的文字的颜色 “BOOKMARK_TEXT”
14 主题的内部背景颜色 “ntp_background”
14. 1 的所有文本附带在内部背景区域中的颜色 “ntp_text”
14. 2 的链接，出现在背景区域中的颜色 “ntp_link”
14. 3 所有链接的下划线在背景区域中的颜色 “ntp_link_underline”
14. 4 部分帧的颜色，当鼠标移到 “ntp_header”
14. 5 最近关闭的标签面积的BG的颜色和快速链接框 “ntp_section”
14. 6 文本部分中的颜色 “ntp_section_text”
14. 7 的链接，出现在部分区域中的颜色 “ntp_section_link”
14. 8 链接下划线的部分中的区域中的颜色 “ntp_section_link_underline”
15 的窗口控制按钮未确认尚未颜色（关闭，最大化等） “control_background”
16 所有的工具栏按钮的背景颜色 “button_background”
色调元素


色调元素改变图像的色调，饱和度和亮度。


受到在的manifest.json文件中的“色彩”部分的色调元素。


号码 描述 manifest.json中符号
17 可应用于在铬的各种按钮的色调 “按钮”
18 可施加到铬的帧的色调 “框架”
18. 1 当铬窗口是不活动时应用的色调 “frame_inactive”
18. 2 色彩的色调，以帧在隐身模式下 “frame_incognito”
18. 3 与上述相同，但是，当窗口处于非活动状态（在无痕模式） “frame_incognito_inactive”
19 无效的标签在隐身模式下的色调 “background_tab”
UI元素属性


受到中的manifest.json文件中的“属性”部分产权的元素。


号码 描述 manifest.json中符号
20 它告诉内backrground图像的对齐的属性 “ntp_background_alignment”
21 该属性指定，如果在上述背景下应反复 “ntp_background_repeat”
22 这可让您选择您想要谷歌浏览器头的类型 “ntp_logo_alternate”
唷！很多事情的主题！其实不是！


这些是谷歌浏览器允许用户主题的元素，但它是在用户的哗哗来决定哪些元素将要被编辑。你不需要改变可以单独留在的东西（在这情况下，这些元素将有其默认值/图）。记住每个元素进入清单文件中它自己的部分 – 色彩元素应该被列在“颜色“，在图像元素”图片“等。


让我们通过元素一个接一个。


元素说明