ThemeCreationGuide - Chromium - A Guide and A Reference For Creating Themes Using Extensions. - An Open-Source Project To Help Move The Web Forward

3/28/13
ThemeCreationGuide - chromium - A guide and a reference for creating themes using extensions. - An open-source project to help move the web forward. -
My favorites | Sign in
chromium
An open-source project to help move the web forward. Project Home Search Downloads Wiki for Issues Code Search Search Current pages
Search projects
ThemeCreationGuide
A guide and a reference for creating themes using extensions. Themes, Phase-Implementation Theme Creation Guide Image Elements Color Elements Tint Elements UI Property Elements Description of Elements Basic Theme Elements Advanced Theme Elements Packaging
Updated Oct 30, 2012 by pkotw...@chromium.org
Theme Creation Guide

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 designer to start designing on the go! (Also makes life easier... he he he). 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 helpful if people contribute to this document in any possible way, that would make it a good Theme Creation Guide! So how do you create a theme for Google chrome? Things you'll need to create a theme 1. A basic text editor (preferably one that shows line numbers-because on packaging a theme, Chrome might point out the error in the control file - manifest.json, if any. It is recommended using Notepad++ which is a free and very useful editor!). Try using this crx Theme Creator if you are unfamiliar with the .json file . 2. 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 free editors like Gimp and Paint. net, click here). 3. If you are using Photoshop, you can download this Chrome window design which is broken down in layers, and makes it easy to visualize what the theme should look like. 4. Some creative ideas about what the theme is going to look like - the colors, patterns and design. 5. Package your theme and publish it in one of the following ways 1. Upload the theme to the Chrome Web Store 2. Use Chrome to package it by yourself. More information can be found here 3. Package it by yourself. More information can be found here. Now that you have the needed tools, let's get started. See the help image, you'll see many things highlighted, with a number denoting each element. We will be using the numbers to denote/specify the part of the UI for which we are creating themes.
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). Then you need to create two things: 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 that can be created for a theme), then create a file named "manifest.json", it needs to be inside the theme folder (here is an example file manifest.json, open it with basic text editor to see the contents and remember that all notation in this file is
https://code.google.com/p/chromium/wiki/ThemeCreationGuide
1/20
3/28/13
in lower case ) Then we package the theme and test it. There are a number of things that can be themed in Chrome. (See Description of Elements section for detailed explanation.)
Image Elements
Image elements are defined under the "images" section in the manifest.json file. Number Description 1 1. 1 1. 2 1. 3 2 3 3. 1 4 5 6 6. 1 7 8 9 The frame of the chrome browser/the area that is behind the tabs. The same area as above, only that this represents the inactive state. The same area under the incognito mode, when the window is active The same area but in the incognito mode, when the window is inactive. This represents both the current tab and the toolbar together This is the area that covers the tabs that are not active The same thing as above, but used for the incognito mode (Not yet confirmed) The tab background for something! This is the theme's inner background-the large white space is covered by this This is the image that appears at the top left of the frame Same as above but displayed when window is inactive This is the area that covers the toolbar buttons This is the image that will be displayed in the 'theme created by' section The background for the window control buttons (close, maximize, etc.,) manifest.json Notation "theme_frame" "theme_frame_inactive" "theme_frame_incognito" "theme_frame_incognito_inactive" "theme_toolbar" "theme_tab_background" "theme_tab_background_incognito" "theme_tab_background_v" "theme_ntp_background" "theme_frame_overlay" "theme_frame_overlay_inactive" "theme_button_background" "theme_ntp_attribution" "theme_window_control_background" 30 x 30 Recommended Minimum Size for images 800 x 600 1100 x 40 x 120 x 65 Recommended Size (W x H) x 80
Color Elements
Color elements are defined under the "colors" section in the manifest.json file. Colors are entered as RGB values, some elements can contain opacity value also. e.g. " n t p _ s e c t i o n ":[ 1 5 ,1 5 ,1 5 ,0 . 6 ] Number Description 10 10. 1 10. 2 10. 3 10. 4 11 12 13 14 14. 1 14. 2 14. 3 14. 4 The color of the frame, that covers the smaller outer frame The color of the same element, but in inactive mode The color of the same element, but in incognito mode The color of the same element, but in incognito, inactive mode The color of the toolbar background (visible by pressing Ctrl+B) The color of text, in the title of current tab The color of text, in the title of all inactive tabs The color of the bookmark element's text The theme's inner background color The color of all the text that comes in the inner background area The color of the links that appear in the background area The color of the underline of all links in the background area The color of the section frames when mouse over manifest.json Notation "frame" "frame_inactive" "frame_incognito" "frame_incognito_inactive" "toolbar" "tab_text" "tab_background_text" "bookmark_text" "ntp_background" "ntp_text" "ntp_link" "ntp_link_underline" "ntp_header"
2/20
3/28/13
The color of Recently closed tabs area's bg and frame of quick links The color of text in the section The color of the links that appear in the section area The color of underline of links in the section area "ntp_section" "ntp_section_text" "ntp_section_link" "ntp_section_link_underline"
14. 5 14. 6 14. 7 14. 8 15 16
Unconfirmed yet-The color of the window control buttons (close, maximize, etc.) "control_background" The background color of all the toolbar buttons "button_background"
Tint Elements
Tint elements change the hue, saturation and lightness of images. Tint elements come under the "tints" section in the manifest.json file. Number Description 17 18 18. 1 18. 2 18. 3 19 The color tint that can be applied to various buttons in chrome The color tint that can be applied to the frame of chrome The color tint that is applied when the chrome window is inactive The color tint to the frame-in incognito mode manifest.json Notation "buttons" "frame" "frame_inactive" "frame_incognito"
Same as above, but when the window is inactive (and in incognito mode) "frame_incognito_inactive" The color tint of the inactive tabs in incognito mode "background_tab"
UI Property Elements
Property elements come under the "properties" section in the manifest.json file. Number Description 20 21 22 manifest.json Notation
The property that tells the alignment of the inner backrground image "ntp_background_alignment" This property specifies if the above background should be repeated This lets you select the type of google chrome header you want "ntp_background_repeat" "ntp_logo_alternate"
Phew! lots of things to theme! Actually not! These are the elements that google chrome allows a user to theme, but it's the user'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 elements under "images" and so on. Let's go through the elements one by one.
Description of Elements
Basic Theme Elements
These elements are the starting point, by using only them, you can quick ly create a basic theme. theme_frame This is an image, this image represents the area behind the tabs. There is no strict dimensions for this image, the rest of the area in the frame that is not covered by this image is covered by the color element frame. It would be helpful to know that this image by default repeats along the xaxis. Hence if you create a small square image, it will be automatically repeated along x-axis-which means you can create patterns if you use short sized images. 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 borders too) 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. Alternatively one can decide to create an image with loooong width-long enough that the image repetition is not seen-this method allowes you to create one continuous design for the frame-but this method might slow down the loading time of the theme since large resolution screens require image of larger width (or else you'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 "frame" doesn't override this. theme_toolbar
3/20
3/28/13
This is an image that covers the area of the current tab and the toolbar below it: 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. Similar to the theme_frame, this image also tiles along the x-axis so you have the option 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: So don't make the design too much crowded, or else the toolbar will not be visually appealing. Usually for the toolbar, a square, tiling image is preferred, which might be a gradient or just plain color. theme_tab_background This is an image, this represents the tabs - all the inactive tabs. 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 distinguish the inactive tabs from the active one! This image also tiles default in x-axis and the height of this can be around 65px , the width is up to you. theme_ntp_background 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 transparency( 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 which contain ntp in the notation will correspond to some element inside the new tab page. There are two ways you can create the inner background for the browser-use a large image without repetition/tiling or use a small image that repeats in x-axis and/or y-axis.(see ntp_background_repeat) There is also option for you to select the alignment of this image, by default the image is center aligned, but you may choose to align it the way you want.(see ntp_background_alignment)
Advanced Theme Elements

Use these to create a more advanced theme. theme_frame_inactive This is an image, representing the area behind the tabs, when the chrome window is out of focus/inactive. All that is applicable to theme_frame, applies to this. Usually to avoid making the theme heavy, you can go for frame_inactive 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 an image seperately for the inactive state or there is going to be a colo tint when the window is inactive. theme_frame_incognito This is similar to the theme_frame, but this image represents 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 will be tinted (see frame_incognito) and used in incognito mode (it's by default that it gets a dark tint in incognito mode). theme_frame_incognito_inactive 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_inactive) theme_tab_background_incognito This is an image, that represents the inactive tabs, in the incognito mode. Alternatively one can use the tinting background_tab, to effect 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 behind them. i.e. the frame. If you want to avoid this, you can include this image. theme_tab_background_v Until now, the role of this image is a mystery, that someone needs to unlock! theme_frame_overlay This is the image that will be displayed at the top left corner of the frame, over the theme_frame image.Also this image doesn't repeat by default.Hence this image may be used in case you don't want the frame area design to repeat.Similar to the theme_frame ,anything over 80px height is good, usually with grading alpha transparency at the bottom so that the image blends with the "frame" color. theme_frame_overlay_inactive This is similar to theme_frame_overlay, 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. theme_button_background
4/20
3/28/13
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 include this image, the color element button_background overrides the button's background color. Whatever image you give for this, the browser leaves off two pixels at top and left 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 the center. theme_ntp_attribution This is the image that is displayed at the bottom right corner of the new tab page.Chrome automatically puts a heading "Theme created by" and below that displays whatever image you give as theme_ntp_attribution. A good practice is to create a small png file enough for an aurthor name(and contact if needed) with alpha transparency background.Making large and more color intense image will attract view, but will make the theme a bit heavier(the file size of the theme may increase with bigger png file) but it's your choice anyway. theme_window_control_background This is the image that specifies the background for the window control buttons(minimize,maximize,close and new tab).This image is also not necessary until you desperatly 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. If this image is not included, the control buttons assume the background color specified in the color element button_background. Frame This is a color element, that specifies the color of the frame area of the browser(the area behind the tabs + the border).It occupies the area that is not covered by the theme_frame image. The format to specify this element in the manifest.json file is : " f r a m e ":[ R , G , B ] Frame_inactive This is a color element, that specifies the color of the frame area of the browser 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 image. The format to specify this element in the manifest.json file is : " f r a m e _ i n a c t i v e ":[ R , G , B ] Frame_incognito This is a color element similar to "frame" ,but under the incognito mode. Frame_incognito_inactive This is a color element similar to "frame_inactive" ,but under the incognito mode. toolbar 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.Also this element can contain an opacity value that effects transparency 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. The format to specify this element in the manifest.json file is : " t o o l b a r ":[ R , G , B , o p a c i t y ] Eg. " t o o l b a r ":[ 2 5 ,1 5 4 ,1 5 4 ,0 . 5 ] 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 contain a opaque background of same color-hence area without the text will be transparent tab_text This is a color element that specifies the color of the title text of the current tab(tab title name of current tab). tab_background_text This is a color element that specifies the color of the title text of all the inactive tabs/out of focus tabs. bookmark_text 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. Note : During a download, the text color indicating the number of MB downloaded is not configurable ntp_background This is a color element that specifies the color of the background of the new tab page(covers all areas that is not mapped by theme_ntp_background).Usually if a alpha transparency is employed in the image element theme_ntp_background, make sure that ntp_background is such that it matches that image element.
5/20
3/28/13
ntp_text
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.,). ntp_link 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) ntp_link_underline This is a color element that specifies the color of the underline of all links in the new tab page(the color of underline of the ntp_link element). ntp_header This is a color element that specifies the color for the frame of quick link buttons, when one hovers the mouse over it.It also specifies the 1px border color of the toolbar element ,the ntp_section element and the color of three small buttons in the new tab page-thumbnail view,list view,change page layout. ntp_section This is a color element that specifies the color for the border of the quick link buttons(see help image) and also the background color for the recently closed bar that appears above the tips area.Similar to the toolbar element, this can als contain opacity value. ntp_section_text This is a clolor element that specifies the color of all the text that appears in the section area.(currently onl the text "Recently closed" derives it's color from this) ntp_section_link 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 their color from this. ntp_section_link_underline 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) control_background 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 overrides it. button_background This is a color element that specifies the color for the background of all the buttons in the toolbar area(back,forward, bookmark,etc.,).This element too can contain opacity values like the toolbar, which will affect the opacity of the window control buttons( minimize,maximize,close). The following are tint elements.The tint element buttons is the most common one, but you may include other elements too. Before moving on to those, one must know how the tins work.The tint elements are used to assign color tints to certain elements of the browser area.The value of the tint is in floating values ranging from 0 to 1. Eg, " b u t t o n s ":[ 0 . 3 , 0 . 5 , 0 . 5 ](the values range from 0 to 1, hence even 0.125 or 0.65 represent a color). Here the first value represents the hue value,for which 0 means red and 1 means red (confused?? see image below)
The next is saturation value that lets you set vibrancy of the color,here 0 means completely desaturated and 1 means fully saturated. The next value is lightness/brightness value.Here 0 means least bright and 1 means most bright buttons This is a tint element, that is used to specify a color tint for icons inside all the buttons in the toolbar(back,forward,refresh,etc.,). frame 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 that you specify here. frame_inactive This is a tint element, similar to the tint element frame, but the tint is applied when the window is inactive/out of focus.
6/20
3/28/13
frame_incognito
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 tinted with a color that you specify here. frame_incognito_inactive 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. background_tab This is a tint element,that specifies the color tint of the inactive tabs in incognito mode. ntp_background_alignment This is a property element, that is used to control the alignment property of the image element theme_ntp_background.The value for this element is entered as follows: " n t p _ b a c k g r o u n d _ a l i g n m e n t ":" V A L U E " In the place of VALUE, you can enter either "top","bottom","left" or "right".Further you can use combinations like "left top","right bottom",etc., The difference is that using only "left", aligns the background image to the left center of the new tab page.While using "left top" aligns the image to the top left corner of the new tab page. Eg, " n t p _ b a c k g r o u n d _ a l i g n m e n t ":" l e f tb o t t o m "(Note that the default alignment of the back ground image is center). ntp_background_repeat This is a property element, that is used to control the repetition of the image element theme_ntp_background.It is specified as:
" n t p _ b a c k g r o u n d _ r e p e a t ":" V A L U E "
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 choose to repeat the image along x-axis or y-axis or turn repeat off, since repeat is on by default!. ntp_logo_alternate This is a propety element that specifies what header of Google chrome you wnat for your theme.It is specified as follows:
" n t p _ l o g o _ a l t e r n a t e ":V A L U E
Note that this element's value should not be entered in double quotes!.In the place of VALUE you can enter 0 or 1.Choosing 0 will give you a colorful Google Chrome header logo inside the new tab page.Choosing 1 will give you an all white Google Chrome header logo inside the new tab page.
Packaging
That ends the description of various theme elements.Once you've the images needed, and after creating the manifest.json file, you are ready to test your theme.In the latest beta version, you'ev the option to package the theme into an extension.To do this follow these steps(to know more about packaging visit this link ): 1. Open the Chrome browser (it has to be the lates beta version). 2. In the options menu (click the wrench in toolbar). 3. Choose the Tools submenu, then Extensions. 4. In the page that appears, click on the "Pack extension" button. 5. 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. 6. In the dialog box that comes up, Click ok. 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 extension 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 the theme, you need to create a zip file of the root directory and submit to the extensions gallery.
Comment by blizzard...@gmail.com, Feb 3, 2010 some of the images are down Comment by Paulo.Go...@gmail.com, Feb 8, 2010 is there a discussion forum somewhere that talks about theme creation? Comment by aaron.de...@gmail.com, Feb 14, 2010
7/20
3/28/13
Does someone have a sample theme file that uses all the elements. I would like to see an example.
Comment by cdkp...@gmail.com, Feb 15, 2010 A few places that to discuss theme creation is... http://www.chromeplugins.org/google/themes-development/ http://chromespot.com/forum/googlechrome-themes/ http://valorsolo.com/ For a theme that uses all elements (last time I checked it).... http://www.chromeplugins.org/google/themes-development/please-post-your-tips-herecreating-crx-themes-2-8903.html#post20300 ....you may also find the LineUp? theme usefull..... http://www.chromeplugins.org/google/themesdevelopment/please-post-your-tips-here-creating-crx-themes-8903.html#post20066 Plus while Im here check out the syntax highlighting for manifest files, Waha did some awesome work making syntax files for gedit and Notepad++ and I converted it for RJTextEdit...... http://www.chromeplugins.org/google/plugins-development/manifest-syntax-highlighting-9275.html And for a tool to help you never see a manifest file ;)..... http://www.chromeplugins.org/google/themes-development/crx-theme-creator-v1-0-released9027.html Comment by cdkp...@gmail.com, Feb 19, 2010 Another place for theme discussion I forgot is the Chrome Themers group at DeviantArt?.... http://chrome-themers.deviantart.com/ Comment by eze...@gmail.com, Feb 20, 2010 This article was good but not all the pictures have gone, please can someone fix this? Comment by hoodooyo...@gmail.com, Mar 4, 2010 Just wondering - is it possible to create a theme that uses the default Windows 7 window decor, but themes the other elements? Let's say I change the Win 7 default theme colour to green - the titlebars of chrome's default appearance will be green, but the menu etc will still be blue. Comment by Soleil...@gmail.com, Mar 10, 2010 An easy way, go to Google Chrome Themes pages, select one (click on image not button), then the browser switches to theme detail page. Right click on the button to Save as and we'll have a .crx file. Rename the .crx to .zip and decompress it. Now we have a theme template. Just change as you want and repack. Comment by Trails2t...@gmail.com, Apr 6, 2010 Please fix the broken links for pictures. Comment by bibar...@gmail.com, May 11, 2010 super themes is bibarish Comment by bibar...@gmail.com, May 11, 2010 super themes in bibarish Comment by synet...@gmail.com, May 11, 2010 Actually, all of the internal links are broken. Obviously the files (the pictures, sample manifest.json, etc.) were not carried overor they were but the links to them not updatedwhen the article was migrated here from the Google Groups site. Comment by Aguayo.A...@gmail.com, May 25, 2010 Thanks for the guide. Comment by robgro...@gmail.com, Jun 1, 2010 Anyone know the element i need to use to change the color of the text and background of the download/info bar/tab which pops up at the bottem of the browser when you download a file in chrome???? someone please help me!
8/20
3/28/13
Comment by jjettash...@gmail.com, Jun 10, 2010 thanks bros worked like a charm :) Comment by shortfc@gmail.com, Jun 12, 2010 Thanks, this was awesome. One thing: changing frame_incognito doesn't do anything :S (I'm using the crx theme creator) Has anyone else had this problem? Is it a typo in the json file? I looked but I didn't think there was one... Comment by alyosha...@gmail.com, Jun 14, 2010 According to chrome, chromable.com hosts malware. "To create a Google chrome theme using this method, visit this link. It should help you get started for that method." Comment by swgodd...@gmail.com, Jun 22, 2010 The link to the sample 'manifest.json' does not work. Can someone fix the link? Comment by tonym...@gmail.com, Jul 13, 2010 swgoddard: Ever heard of using Google to find things? http://code.google.com/chrome/extensions/themes.html Comment by the.alp...@gmail.com, Jul 17, 2010 could anybody make a detailed guide to uploading the theme to the extension gallery, i seem to get an error when trying to install it once its on the store Comment by H5N1....@gmail.com, Aug 7, 2010
Problems
Broken Links
There are broken links in this page
Chromium 'theme_button_background'
It seems that the property theme_button_background is non-effective in Chromium builds whilst it works fine in Google Chrome
theme_tab_background_v
'(Not yet confirmed) The tab background for something!' I hope something was changed since the last page update (Jan 06, 2010) Comment by rawkas...@gmail.com, Aug 30, 2010 tonymaro: Don't be such a dick. What's wrong with keeping the wiki up to date? Comment by SonicPha...@gmail.com, Sep 14, 2010 Chrome 6: 1) Button tints work, but button background pictures don't 2) Bookmark bar is permanently docked making the toolbar color useless 3) Section color doesn't seem to change anything anymore 4) Tab image is now bottom aligned (so much for my gradients up there) 5) Seems that the toolbar picture is also bottom aligned, and is 75px high instead of 80 Comment by cdkp...@gmail.com, Sep 21, 2010 Because I dont know how to update this I made my own version........... https://docs.google.com/Doc?tab=edit&dr=true&id=dksd545_9fqhrt3dj ......basically the same plus some added pics/notes
9/20
3/28/13
Comment by KodeBur...@gmail.com, Sep 23, 2010 There is no images in this guide =( Comment by Aurelien...@gmail.com, Oct 9, 2010 I see that there is no possibility of changing the alignment of the theme_frame_overlay, as we can do for the theme_ntp_background with ntp_background_alignment. Because the right area of google chrome is the one that is the most often empty ( without tab on it ), I think it would be a great thing to be able to have a right alignment of the image. Comment by k.thiruk...@gmail.com, Oct 10, 2010 This is the actual "reference image" that I posted during the creation of the guide, but it was removed
Comment by cbmor...@gmail.com, Nov 2, 2010 cool. finally something that works... Comment by quad9...@gmail.com, Nov 10, 2010 For some odd reason, the background won't cover the entire browser, and there's a black bar in the frame. Can somebody help me, please? Comment by bscopel...@gmail.com, Nov 15, 2010 Great guide. Comment by t...@pal.pp.se, Nov 20, 2010 I have the answer (or at least part of it) about the theme_tab_background_v value.
10/20
3/28/13
I had the same problem as described in this thread: http://www.chromeplugins.org/google/chrome-themes/themes-transparent-tab-bar-10172.html I.e. I wanted to keep my Windows theme in stead of using a theme_frame image (since my Windows theme have altered the min/max/close buttons, and using a theme_frame made them go back to Windows default). Leaving theme_frame out made theme_tab_background do nothing, making Chrome use the ugly default look for the inactive tabs. But using theme_tab_background_v made it all work. The frame is now the Windows theme look, and the inactive tabs are using the theme_tab_background_v image. If anyone have login to the chromeplugins.org forum, be nice and let the guys in the thread above know about this. /P
Comment by t...@pal.pp.se, Nov 20, 2010 Additional info: Google Chrome 7.0.517.44 Pasted the related entries from the manifest, but the Wiki screwed them up. Anyway, I specified the frame and tab_background_text colors, and the theme_tab_background_v image, and I left the theme_frame image out. /P Comment by gabriel....@gmail.com, Nov 30, 2010 How about scrollbars? it's the ONLY usability issue currently on chrome (you can't see it). and ALL the extensions that fix it, kills the search-highlight-on-scrollbar feature. Comment by SoazikTh...@gmail.com, Dec 5, 2010 Is there a sample theme that has images that I can open and paste my art over? Comment by Nachtig...@gmail.com, Dec 23, 2010 IT WORKED! HAHAHA I thought It wouldnt! my themes crappy though so im not gonna share it, ill work on a new one thats better though! Comment by gordeon@gmail.com, Jan 8, 2011 Is the titlebar in the Options window themeable? It's not a problem in OS X because Chrome simply uses the native OS titlebar, but it takes a custom blue in Chrome in Windows XP. Comment by Edward.G...@googlemail.com, Jan 15, 2011 I think it is a good idea, to learn about the colors and the tints first and to configure them before editing any images. The theme should be clean without any images. If it bases on images, and the pictures limits are reached, it could look ugly, if you dont have the colors under it configured correct. Thats my experience. Think about creating a theme with colors first, then insert the images at last. Comment by ahmed.sprouse, Jan 20, 2011 How can I change the loading circle color? There're two different colors, one for the clockwise and another for the anti-clockwise one! Comment by will...@crittercare.org, Jan 30, 2011 What is the color (or tint?) name for the "restore all removed thumbnails" on the ntp page? Please contact me: william at? crittercare dot? org. Comment by floopy1...@gmail.com, Jan 30, 2011 Hi i created my own theme using this guide but i want to ask something... i'm using kde and make theme looks more like oxygen and my question is can i make chrome-chromium use system element only for certain parts of the theme.My idea is to use system buttons in download bar :) or maybe custom pictures... Comment by techtonik@gmail.com, Feb 21, 2011 This page can be edited from http://code.google.com/p/chromium/source/browse/wiki/ThemeCreationGuide.wiki - patch to fix the first image is at
11/20
3/28/13
http://code.google.com/p/chromium/issues/detail?id=73641
Comment by johko...@gmail.com, Mar 14, 2011 Does anyone know if it's possible to change the color of the faint line dividing the theme_toolbar and the displayed page? Comment by clint.wo...@dsl.state.or.us, Mar 29, 2011 Anybody know how to find the extension id for whitelisting? Does each theme have an ID or is it one universal ID? Comment by smittyof...@gmail.com, Apr 1, 2011 theme_tab_background_v -- Could this be for vertical tabs? Vertical tabs can be turned on under chrome://flags Comment by scottish...@googlemail.com, May 11, 2011 Could you make this more difficult? I used to use Firefox and making these (personas) for Firefox couldn't be easier. The instructions here, even with the Photoshop download, could make one's brain melt. I'm lost and now peeved by how difficult you make it. Comment by ncstatef...@aol.com, May 20, 2011 i have no clue what to do....can someone just make a theme with Kirby please?! :D Comment by Zande...@gmail.com, May 22, 2011 theme_tab_background_v serves to function as an alternative tab background when Chrome is used in Aero mode. v may stand for 'vista', etc. I googled it :P Comment by bruh_fer...@yahoo.com, May 27, 2011 { "version": "2.6", "name": "camo theme", "theme": { "images" : { "theme_frame" : "images/theme_frame_camo.png", "theme_frame_overlay" : "images/theme_frame_stripe.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" } } } Comment by bruh_fer...@yahoo.com, May 27, 2011 {
12/20
3/28/13
"version": "2.6", "name": "camo theme", "theme": { "images" : { "theme_frame" : "images/theme_frame_camo.png", "theme_frame_overlay" : "images/theme_frame_stripe.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" } } }
Comment by mouchi1...@hotmail.com, May 29, 2011 I created my theme.. But i dont know how to set t as my background.. there is like upload as background button Comment by chaosbri...@hotmail.com, May 30, 2011 I have a lil' problem. I created a theme, and everything is almost perfect. Compare the images: 1:
13/20
3/28/13
2:
HOW I CAN REMOVE THE WHITE COLOR AROUND THE BOOKMARK TAB ? I WANT THAT TO BE PART OF THE BACKGROUND. This is possible, but i don't know how. Can someone help me ? Comment by kanala...@gmail.com, May 31, 2011 try this in manifest "properties" : { "ntp_background_repeat" : "repeat", "ntp_background_alignment":"top" } it worked for me Comment by d...@keler.net, Jun 18, 2011 Hello! I have a trouble: I have made theme, but I can't understand why color of the buttons (arrows, home and refresh) does not changed. I mean, do the arrows, the house and a circular arrow/cross, not a background underneath. I think I have not understood this manual correctly. How can I repaint them? Comment by horrorm...@gmail.com, Jun 18, 2011 Hi, guys I want to edit the chrome so that it appears in my own language, where the chrome doesnt support the language m trying to make, Can you tell me how can i make theme in my own language so that all the google chrome display in my own language, HOW TO???? Comment by saikatpa...@gmail.com, Jun 19, 2011 If u want to come second must be follow this link earnsides.weebly.com8 Comment by saikatpa...@gmail.com, Jun 19, 2011
14/20
3/28/13
888earnsides.weebly.com
Comment by adib1...@hotmail.de, Jun 23, 2011 Do you have to create images? there's written every element has its default image/value. it says 'manifest is not valid json,line 7 column 7, syntax error' but there is just a quotation mark please help Comment by EagleSn...@gmail.com, Jun 24, 2011 Is it possible to have an image which describes each parts of the browser and its areas ? A visual capture with the zone for "theme_frame", "theme_tollbar", "theme_ntp_attribution" etc. for instance ? Thanks Comment by Aneesa.R...@gmail.com, Jun 25, 2011 how do you save your theme to your PC Comment by javi.shi...@gmail.com, Jul 16, 2011 no le entiendo acer eso jeje mejor algien k sepa k aga un tutorial en youtube seria mas facil no lo creen XD Comment by lily.kil...@gmail.com, Jul 24, 2011 How the fuck do you SAVE THE THEME!!!??? Comment by Mr.S...@gmail.com, Jul 25, 2011 how i can develloped application in google+ Comment by juanchop...@gmail.com, Jul 25, 2011 chaos bri i love that image lol Comment by shweth...@gmail.com, Jul 31, 2011 is this theme availbale for evryone 2 download or cn v personalize it? Comment by los...@gmail.com, Aug 5, 2011 chrome Comment by nicoserr...@gmail.com, Aug 12, 2011 que Comment by badgraph...@gmail.com, Sep 12, 2011
I made my theme but some people are having problems with it. It like auto re-sizes everything. ex: Anyone know how to fix? Comment by CPB...@ymail.com, Sep 13, 2011 My images won't upload?? Comment by a4a...@gmail.com, Sep 15, 2011
15/20
3/28/13
hey i have created a theame plz tell me how to upload it to chrome web store it is asking for to upload a screenshot. plz tell me what to do
Comment by anaaflav...@gmail.com, Sep 18, 2011 ok Comment by jasper.t...@email.it, Sep 22, 2011 THIS PAGE SUCKS AND THE LINK DOESN'T WORK :P Comment by anggunpr...@gmail.com, Sep 23, 2011 themes,, anggun...@gmail.com Comment by luluzinh...@gmail.com, Oct 9, 2011 file:///C:/Documents%20and%20Settings/User/Desktop/I%20Love%20Poker.jpg Comment by luluzinh...@gmail.com, Oct 9, 2011 file:///C:/Documents%20and%20Settings/User/Desktop/I%20Love%20Poker.jpg Comment by biglhunt...@gmail.com, Oct 25, 2011 can i import my theme to Google chrome so other people can us the theme? Comment by dhruv...@gmail.com, Oct 26, 2011 The Simplest way to create a theme is to use the theme creator. Click on the link below and enjoy... http://www.chromethememaker.com/# Thankx Comment by stephens...@gmail.com, Nov 3, 2011 The sample .json files that i can find all begin with { and then jump right into name or version number and continue on with the code. my fist line of code after the { is coming up with a syntax error. this error is stopping me from being able to package the file. Am I missing file information in the header that is simply not shown in the sample file for the manifest.json? Anyone that could help with this will be greatly appreciated. Thanks, Steve Comment by jcarroll...@gmail.com, Nov 21, 2011 Take note, colors don't work on Chrome Mac for some properties, only images. This is due to the Mac OS taking over. Comment by nguyentr...@gmail.com, Dec 1, 2011 thanks! Comment by xxRuz...@gmail.com, Dec 3, 2011 can someone tell me what i can do to make the download bar at the bottom a different color Comment by oboest...@gmail.com, Dec 6, 2011
16/20
3/28/13
I keep getting the error message: Manifest is not valid JSON. Line: 1, column: 2, Dictionary keys must be quoted.
Comment by sulkua...@gmail.com, Dec 22, 2011 change the manifest.json file's manifest version to something like '1.1' save and try again Comment by rickh...@gmail.com, Dec 30, 2011 My attempts to switch to Chrome have been rather unpleasant. I don't actually want a "theme"... don't need images... just wish there was a quick and dirty way to force Chrome to use my existing Windows colours... the ones that served me well in IE6. Is there a way to do this? Comment by Iruini...@gmail.com, Jan 2, 2012 Reply to comment above ^^ Go download a IE theme for google chrome. That would speed things up. My Questions: 1.Is there a way to change the background alignment to "stretch" so that the bg will stretch to the edge at any screen resolution? 2. Is there a way to change the incognito icon? Comment by celia781...@gmail.com, Jan 16, 2012 +1 how to make the download bar at the bottom a different color? Comment by celia781...@gmail.com, Jan 16, 2012 Ok I got it, it will be totally the same as the toolbar color after restarting chrome... Comment by conradma...@gmail.com, Jan 18, 2012 I have a little problem. I am trying to upload pictures, but he can't load them up, he is loading up the whole time Comment by bojan_1...@yahoo.com, Jan 20, 2012 What of this includes DOWNLOAD TAB when is open... Comment by conradma...@gmail.com, Jan 22, 2012 so i must try it with mine downloadtab open?... Comment by mediant...@gmail.com, Jan 26, 2012 the "buttons" tint doesn't seem to work for me. Comment by mudskipp...@gmail.com, Feb 9, 2012 Hello Could anyone help to tell me why I can't install the theme I created from web store? https://chrome.google.com/webstore/detail/dcnjbipjnhkoegkppfhcbfijepfcacmj By the way I am able to install it from the .crx file in my local drive. Thanks Comment by mudskipp...@gmail.com, Feb 9, 2012 well i solved the problem by myself before someone answered. Thanks anyway Comment by caroline...@gmail.com, Feb 11, 2012
17/20
3/28/13
Hi, I can't seem to control the tile mode in the tab background. I have a file which, no matter how wide I make the tab background, it tiles it at (probably) 65 pixels. The image I'm using has a colored background (there are ivy leaves and a rose in a layer above that background), so I know it's not a problem with there being no colored pixels. Is there some way to control the x-width in a .json file to match the correct width of my tab background file before it repeats it?
Comment by Dameish...@gmail.com, Feb 21, 2012 I still dont understand hoe to make it Comment by levy.h...@gmail.com, Feb 24, 2012 I keep getting the error message: Manifest is not valid JSON. Line: 1, column: 2, Dictionary keys must be quoted. No help with this ? :( Comment by dhianhak...@gmail.com, Feb 26, 2012 KIEN ME REGALA EL LINK DE DONDE DESCARGAR EL PROGRMA PORFAVOR Comment by n3st0r0m...@gmail.com, Mar 4, 2012 how to make the footer as transparent ???? Comment by n3st0r0m...@gmail.com, Mar 4, 2012 that of newtab Comment by asdfan...@gmail.com, Mar 5, 2012 no entiendo .. alguien digamne porfavor COMO PUEDO HACER YO UN TEMA, CREARLO i dont understand .. somebody tell me please HOW CAN I DO A THEME, CREATED Comment by tremaine...@gmail.com, Mar 29, 2012 UM? Comment by fredghos...@gmail.com, May 22, 2012 Mac and a update? Comment by dan...@friedrich-privat.com, May 24, 2012 Hey Guys i think my Theme isnt in my Solution?! Because where i type in the Adress like www.google.de i only see the half google its cuttet from the top? Comment by ryan.pla...@gmail.com, May 29, 2012 this whole guide needs updating, so it's easier for people to follow Comment by kloninga...@gmail.com, Jul 11, 2012 browser chrome ini rumit sekali. header pada browser chrome tidak terlalu nampak, sehingga theme apa saja yang anda gunakan terlihat seperti default theme pada chrome. saya lebih tertarik personas pada mozilla. translate.google.com because English is too mainstream.
18/20
3/28/13
Comment by orij...@gmail.com, Aug 5, 2012 I love how the Chrome Theme Creation Guide has had two instances of (essentially) hentai sitting on it for more than a year. Comment by Nazim...@gmail.com, Aug 10, 2012 lol Comment by bharati....@gmail.com, Aug 18, 2012 Works like a charm, thanks! Comment by sherifsa...@gmail.com, Aug 21, 2012 "theme_ntp_background": "images/theme_ntp_background.png". Is it possible to load a webpage instated of an image ? such as "theme_ntp_background": "http://www.weather.com/". something that updates frequently? Comment by tinbob...@gmail.com, Sep 18, 2012 There are a number of spelling mistakes for a Google page... Comment by rockerro...@gmail.com, Oct 6, 2012 dude Comment by theviv...@gmail.com, Oct 16, 2012 you can find hundreds of awesome chrome themes on http://www.chromeposter.com/ Comment by a.produc...@gmail.com, Nov 16, 2012 hi people where can I get a detailed tutorial for creating themes version 2.0? they changed the version of the API and still have not found a tutorial that talked about it. found only on extension, but not mensionava themes thank you Comment by xdy...@gmail.com, Nov 20, 2012 hey, i was trying to solve the same problem yesterday, turns out it not so complicated. open your manifest.json file with notepad and paste this line: "manifest_version": 2, somewhere, like below the line beginning with "version". save it, open chrome and load the unpacked theme. cheers x) Comment by CrazyGoo...@gmail.com, Dec 2, 2012 Hi, I've started making a theme, and was wondering how to make a theme that is compatible different screen resolutions? Comment by a93...@gmail.com, Dec 3, 2012 You can't, try to make the background image either repeatable or centered. Comment by andjre...@gmail.com, Dec 9, 2012 Hopefully people will find this helpful, i had no idea people were still interested so i will post this here for anyone still wishing to learn and create their own themes, i made it years ago:
19/20
3/28/13
http://and-reese.deviantart.com/art/Google-Chrome-CRX-Tutorial-158616727?q=in%3Ascraps%20sort%3Atime%20gallery%3Aand-reese&qo=32
Comment by MusicEnt...@gmail.com, Dec 28, 2012 how I can put image on to the new tab button. Comment by brian.cr...@yahoo.com, Jan 5, 2013 Creating my own Google Chrome Theme was easy. But how do I share it with friends? Comment by danielpo...@gmail.com, Jan 6, 2013 Read the section above referring to Uploading to the Chrome Web Store (https://chrome.google.com/webstore/developer/dashboard). I believe there's an initial one-time $10 cost to prove that you're not a bot, but once you pay that, you can upload a zipped theme to your dashboard, get a link and send that to friends/colleagues. Comment by haneefpu...@gmail.com, Jan 9, 2013 http://chrometheme.chromepub.com/crxtheme -- link mentioned above is a broken link
Sign in to add a comment
Terms - Privacy - Project Hosting Help Powered by Google Project Hosting
20/20

ThemeCreationGuide - Chromium - A Guide and A Reference For Creating Themes Using Extensions. - An Open-Source Project To Help Move The Web Forward

Hochgeladen von

Dokumentinformationen

Originaltitel

Copyright

Verfügbare Formate

Dieses Dokument teilen

Dokument teilen oder einbetten

Freigabeoptionen

Stufen Sie dieses Dokument als nützlich ein?

Sind diese Inhalte unangemessen?

Copyright:

Verfügbare Formate

ThemeCreationGuide - Chromium - A Guide and A Reference For Creating Themes Using Extensions. - An Open-Source Project To Help Move The Web Forward

Hochgeladen von

Copyright:

Verfügbare Formate

3/28/13

Theme Creation Guide

14. 5 14. 6 14. 7 14. 8 15 16

Advanced Theme Elements

Sign in to add a comment

Terms - Privacy - Project Hosting Help Powered by Google Project Hosting

Das könnte Ihnen auch gefallen