ThemeCreationGuide - Chromium - A Guide and a Reference for Creating Themes Using Extensions. - An Open-source Project to Help Move the Web Forward

8/12/2019 ThemeCreationGuide - Chromium - A Guide and a Reference for Creating Themes Using Extensions. - An Open-so

1/20

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. -

https://code.google.com/p/chromium/wiki/ThemeCreationGuide 1

Project Home Downloads Wiki Issues Code Search

Updated Oct 30, 2012 by [email protected]

My favorites | Sign

chromiumAn open-sourceproject to help move the web forward. Search projects

Search Current pages for Search

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

Theme Creation GuideThe GoogleChrome 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(workingprogress).Itwould behelpful if people contributeto this document in any possible way, that would make it a good Theme Creation Guide!

Sohowdo you create a theme for Google chrome?

Things you'll need to create a theme

1. A basic text editor (preferably one thatshows line numbers-because on packaging a theme, Chrome might point out the error in the controlfile - manifest.json, if any. It is recommended using Notepad++ which is a free and very useful editor!). Try using this crx Theme Creatorifyouare unfamiliar withthe .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 creatingthemes, 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 designwhich is broken down in layers, and makes it easy to visualizewhat 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. Uploadthe 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/specifythe 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 imagesfolder(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 thetheme 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

8/12/2019 ThemeCreationGuide - Chromium - A Guide and a Reference for Creating Themes Using Extensions. - An Open-so

2/20

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. -

https://code.google.com/p/chromium/wiki/ThemeCreationGuide 2

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 Elementssection for detailed explanation.)

Image Elements

Image elements are defined under the "images" sect ion in the manifest.json file.

Number Description manifest.json Notation Recommended Size (W x H)

1The frame of the chrome browser/the area that is behind thetabs.

"theme_frame" x 80

1. 1The same area as above, only that this represents the inactivestate.

"theme_frame_inactive"

1. 2The same area under the incognito mode, when the window isactive

"theme_frame_incognito"

1. 3The same area but in the incognito mode, when the window isinactive.

"theme_frame_incognito_inactive"

2 This represents both the current tab and the toolbar together "theme_toolbar" x 120

3 This is the area that covers the tabs that are not active "theme_tab_background" x 65

3. 1 The same thing as above, but used for the incognito mode "theme_tab_background_incognito"

4 (Not yet confirmed) The tab background for something! "theme_tab_background_v"

5This is the theme's inner background-the large white space iscovered by this

"theme_ntp_background"Recommended Minimum Size forimages 800 x 600

6 This is the image that appears at the top left of the frame "theme_frame_overlay" 1100 x 40

6. 1 Same as above but displayed when window is inactive "theme_frame_overlay_inactive"

7 This is the area that covers the toolbar buttons "theme_button_background" 30 x 30

8This is the image that will be displayed in the 'theme createdby' section

"theme_ntp_attribution"

9The background for the window control buttons (close,maximize, etc.,)

"theme_window_control_background"

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. "ntp_section" : [15, 15, 15, 0.6]

Number Description manifest.json Notation

10 The color of the frame, that covers the smaller outer frame "frame"

10. 1 The color of the same element, but in inactive mode "frame_inactive"

10. 2 The color of the same element, but in incognito mode "frame_incognito"

10. 3 The color of the same element, but in incognito, inactive mode "frame_incognito_inactive"

10. 4 The color of the toolbar background (visible by pressing Ctrl+B) "toolbar"

11 The color of text, in the title of current tab "tab_text"

12 The color of text, in the title of all inactive tabs "tab_background_text"

13 The color of the bookmark element's text "bookmark_text"

14 The theme's inner background color "ntp_background"

14. 1 The color of all the text that comes in the inner background area "ntp_text"

14. 2 The color of the links that appear in the background area "ntp_link"

14. 3 The color of the underline of all links in the background area "ntp_link_underline"

14. 4 The color of the section frames when mouse over "ntp_header"

8/12/2019 ThemeCreationGuide - Chromium - A Guide and a Reference for Creating Themes Using Extensions. - An Open-so

3/20

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. -

https://code.google.com/p/chromium/wiki/ThemeCreationGuide 3

14. 5 The color of Recently closed tabs area's bg and frame of quick links "ntp_section"

14. 6 The color of text in the section "ntp_section_text"

14. 7 The color of the links that appear in the section area "ntp_section_link"

14. 8 The color of underline of links in the section area "ntp_section_link_underline"

15 Unconfirmed yet-The color of the window control buttons (close, maximize, etc.) "control_background"

16 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 manifest.json Notation

17 The color tint that can be applied to various buttons in chrome "buttons"

18 The color tint that can be applied to the frame of chrome "frame"

18. 1 The color tint that is applied when the chrome window is inactive "frame_inactive"

18. 2 The color tint to the frame-in incognito mode "frame_incognito"

18. 3 Same as above, but when the window is inactive (and in incognito mode) "frame_incognito_inactive"

19 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 manifest.json Notation

20 The property that tells the alignment of the inner backrground image "ntp_background_alignment"

21 This property specifies if the above background should be repeated "ntp_background_repeat"

22 This lets you select the type of google chrome header you want "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. Thethings that you don't need changed can be left alone (in case of which those elements will have their default value/image).Remember that eachelement 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 framethat 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 x-axis. Hence if you create a small square image, it will be automatically repeated along x-axis-which means you can create patterns if you useshort 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 theimage.

Alternatively one can decide to create an image with loooong width-long enough that the image repetition is not seen-this method allowes you tocreate one continuous design for the frame-but this method might slow down the loading time of the theme since large resolution screens requireimage 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 blueone is displayed, the color element "frame"doesn't override this.

theme_toolbar

8/12/2019 ThemeCreationGuide - Chromium - A Guide and a Reference for Creating Themes Using Extensions. - An Open-so

4/20

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. -

https://code.google.com/p/chromium/wiki/ThemeCreationGuide 4

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 isup 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 widthimage for the toolbar. Remember that the toolbar contains some buttons and when the bookmarks are visible (CMD+B or Ctrl+B), they toooccupy 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 ispreferred, 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 enablesthe 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 , thewidth 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 containsalpha transparency( the default page that contains various quick access elements-see the help image).Note that the notation ntp represents newtab 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 thatrepeats 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 wayyou 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_inactivetint, to show thatthe 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 seperatelyfor 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_framewill be tinted (see frame_incognito) and used inincognito 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.(seeframe_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 inactivetabs 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, theinactive 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 includethis 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_frameimage.Also this image doesn't repeat bydefault.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 80pxheight 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

8/12/2019 ThemeCreationGuide - Chromium - A Guide and a Reference for Creating Themes Using Extensions. - An Open-so

5/20

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. -

https://code.google.com/p/chromium/wiki/ThemeCreationGuide 5

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 donot include this image, the color element button_backgroundoverrides 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 asbackground.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" andbelow 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 largeand 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 notnecessary until you desperatly need to change the control button background.If the image is included, the browser leaves off 1px at the top andleft 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 isnot covered by the theme_frameimage. The format to specify this element in the manifest.json file is : "frame" : [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 thetabs + the border).It occupies the area that is not covered by the theme_frameimage. The format to specify this element in the manifest.json fileis : "frame_inactive" : [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 theshortcut 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 opacityvalue 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 beingfully opaque.

The format to specify this element in the manifest.json file is : "toolbar" : [R,G,B,opacity]

Eg. "toolbar" : [25, 154, 154, 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 opacityvalues for this element makes the status bar transparent, but the text inside it will contain a opaque background of same color-hence area withoutthe 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 thebottom. 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 bytheme_ntp_background).Usually if a alpha transparency is employed in the image element theme_ntp_background, make sure thatntp_background is such that it matches that image element.

8/12/2019 ThemeCreationGuide - Chromium - A Guide and a Reference for Creating Themes Using Extensions. - An Open-so

6/20

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. -

https://code.google.com/p/chromium/wiki/ThemeCreationGuide 6

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 oftips 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 1pxborder color of the toolbarelement ,the ntp_section element and the color of three small buttons in the new tab page-thumbnail view,listview,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 therecently closed bar that appears above the tips area.Similar to the toolbarelement, 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'scolor 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 c losed" bartake 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_linkelement)

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 followingelement 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 elementtoo 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 buttonsis the most common one, but you may include other elements too. Before moving on tothose, 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 thetint is in floating values ranging from 0 to 1. Eg, "buttons" : [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 acolor 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.

8/12/2019 ThemeCreationGuide - Chromium - A Guide and a Reference for Creating Themes Using Extensions. - An Open-so

7/20

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. -

https://code.google.com/p/chromium/wiki/ThemeCreationGuide 7

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 areawill 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 elementis entered as follows: "ntp_background_alignment" : "VALUE"

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., Thedifference 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 thetop left corner of the new tab page. Eg, "ntp_background_alignment" : "left bottom"(Note that the default alignment of the b ackground

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:

"ntp_background_repeat" : "VALUE"

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 thebackground 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:

"ntp_logo_alternate" : VALUE

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 acolorful Google Chrome header logo inside the new tab page.Choosing 1 will give you an all white Google Chrome header logo inside the new tabpage.

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 totest 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 moreabout 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 isthat 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 iscreated, 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 rootfolder), 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 [email protected], Feb 3, 2010

some of the images are down

Comment by [email protected], Feb 8, 2010

is there a discussion forum somewhere that talks about theme creation?

Comment by [email protected], Feb 14, 2010

8/12/2019 ThemeCreationGuide - Chromium - A Guide and a Reference for Creating Themes Using Extensions. - An Open-so

8/20

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. -

https://code.google.com/p/chromium/wiki/ThemeCreationGuide 8

Does someone have a sample theme file that uses all the elements. I would like to see an example.

Comment by [email protected], Feb 15, 2010

A few places that to discuss theme creation is... http://www.chromeplugins.org/google/themes-development/ http://chromespot.com/forum/google-chrome-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-here-creating-crx-themes-2-8903.html#post20300 .. ..you may also find the LineUp?theme usefull..... http://www.chromeplugins.org/google/themes-development/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-released-9027.html

Comment by [email protected], Feb 19, 2010

Another place for theme discussion I forgot is the Chrome Themers group at DeviantArt?.... http://chrome-themers.deviantart.com/

Comment by [email protected], Feb 20, 2010

This article was good but not all the pictures have gone, please can someone fix this?

Comment by [email protected], 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 changethe 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 [email protected], 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. Rightclick 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 asyou want and repack.

Comment by [email protected], Apr 6, 2010

Please fix the broken links for pictures.

Comment by [email protected], May 11, 2010

super themes is bibarish

Comment by [email protected], May 11, 2010

super themes in bibarish

Comment by [email protected], 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 thelinks to them not updatedwhen the article was migrated here from the Google Groups site.

Comment [email protected], May 25, 2010

Thanks for the guide.

Comment by [email protected], 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 ofthe browser when you download a file in chrome???? someone please help me!

8/12/2019 ThemeCreationGuide - Chromium - A Guide and a Reference for Creating Themes Using Extensions. - An Open-so

9/20

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. -

https://code.google.com/p/chromium/wiki/ThemeCreationGuide 9

Comment [email protected], Jun 10, 2010

thanks bros worked like a charm :)

Comment by [email protected], 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 thisproblem? Is it a typo in the json file? I looked but I didn't think there was one...

Comment by [email protected], 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 [email protected], Jun 22, 2010

The link to the sample 'manifest.json' does not work. Can someone fix the link?

Comment by [email protected], Jul 13, 2010

swgoddard: Ever heard of using Google to find things?

http://code.google.com/chrome/extensions/themes.html

Comment by [email protected], 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 thestore

Comment by [email protected], Aug 7, 2010

Problems

Broken Links

There are broken links in this page

Chromium 'theme_button_background'

It seems that the property theme_button_backgroundis 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 [email protected], Aug 30, 2010

tonymaro: Don't be such a dick. What's wrong with keeping the wiki up to date?

Comment by [email protected], 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 thetoolbar picture is also bottom aligned, and is 75px high instead of 80

Comment by [email protected], 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

8/12/2019 ThemeCreationGuide - Chromium - A Guide and a Reference for Creating Themes Using Extensions. - An Open-so

10/20

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. -

https://code.google.com/p/chromium/wiki/ThemeCreationGuide 10

Comment by [email protected], Sep 23, 2010

There is no images in this guide =(

Comment [email protected], 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 withntp_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 agreat thing to be able to have a right alignment of the image.

Comment by [email protected], Oct 10, 2010

This is the actual "reference image" that I posted during the creation of the guide, but it was removed

Comment by [email protected], Nov 2, 2010

cool. finally something that works...

Comment by [email protected], 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 [email protected], Nov 15, 2010

Great guide.

Comment by [email protected], Nov 20, 2010

I have the answer (or at least part of it) about the theme_tab_background_v value.

8/12/2019 ThemeCreationGuide - Chromium - A Guide and a Reference for Creating Themes Using Extensions. - An Open-so

11/20

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. -

https://code.google.com/p/chromium/wiki/ThemeCreationGuide 11

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, makingChrome 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 thetheme_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 [email protected], 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 thetheme_tab_background_v image, and I left the theme_frame image out.

/P

Comment by [email protected], 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 [email protected], Dec 5, 2010

Is there a sample theme that has images that I can open and paste my art over?

Comment by [email protected], 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 [email protected], 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 [email protected], 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 cleanwithout 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 configuredcorrect. 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 [email protected], 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 [email protected], 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 iscan 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 maybecustom pictures...

Comment by [email protected], 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

8/12/2019 ThemeCreationGuide - Chromium - A Guide and a Reference for Creating Themes Using Extensions. - An Open-so

12/20

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. -

https://code.google.com/p/chromium/wiki/ThemeCreationGuide 12

http://code.google.com/p/chromium/issues/detail?id=73641

Comment by [email protected], 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 [email protected], 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 [email protected], Apr 1, 2011

theme_tab_background_v -- Could this be for vertical tabs? Vertical tabs can be turned on under chrome://flags

Comment by [email protected], 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 withthe Photoshop download, could make one's brain melt. I'm lost and now peeved by how difficult you make it.

Comment by [email protected], May 20, 2011

i have no clue what to do....can someone just make a theme with Kirby please?! :D

Comment by [email protected] , 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 [email protected], 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 [email protected], May 27, 2011

{

8/12/2019 ThemeCreationGuide - Chromium - A Guide and a Reference for Creating Themes Using Extensions. - An Open-so

13/20

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. -

https://code.google.com/p/chromium/wiki/ThemeCreationGuide 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 [email protected], 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 [email protected], May 30, 2011

I have a lil' problem. I created a theme, and everything is almost perfect. Compare the images:

1:

8/12/2019 ThemeCreationGuide - Chromium - A Guide and a Reference for Creating Themes Using Extensions. - An Open-so

14/20

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. -

https://code.google.com/p/chromium/wiki/ThemeCreationGuide 14

2:

HOW I CAN REMOVE THE WHITE COLOR AROUND THE BOOKMARK TAB ? I WANT THAT TO BE PART OF THE BACKGROUND. This ispossible, but i don't know how. Can someone help me ?

Comment by [email protected], May 31, 2011

try this in manifest "properties" : {

"ntp_background_repeat" : "repeat",

"ntp_background_alignment":"top"

}

it worked for me

Comment by [email protected], 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, dothe arrows, the house and a circular arrow/cross, not a background underneath. I think I have not understood this manual correctly. How can I repaintthem?

Comment by [email protected], 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 mehow can i make theme in my own language so that all the google chrome display in my own language, HOW TO????

Comment by [email protected], Jun 19, 2011

If u want to come second must be follow this link earnsides.weebly.com8

Comment by [email protected], Jun 19, 2011

8/12/2019 ThemeCreationGuide - Chromium - A Guide and a Reference for Creating Themes Using Extensions. - An Open-so

15/20

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. -

https://code.google.com/p/chromium/wiki/ThemeCreationGuide 15

888earnsides.weebly.com

Comment by [email protected], 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, syntaxerror' but there is just a quotation mark please help

Comment by [email protected], 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 [email protected], Jun 25, 2011

how do you save your theme to your PC

Comment by [email protected], 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. [email protected], Jul 24, 2011

How the fuck do you SAVE THE THEME!!!???

Comment by [email protected], Jul 25, 2011

how i can develloped application in google+

Comment [email protected], Jul 25, 2011

chaos bri i love that image lol

Comment by [email protected], Jul 31, 2011

is this theme availbale for evryone 2 download or cn v personalize it?

Comment by [email protected], Aug 5, 2011

chrome

Comment by [email protected], Aug 12, 2011

que

Comment by [email protected], 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 [email protected], Sep 13, 2011

My images won't upload??

Comment by [email protected], Sep 15, 2011

8/12/2019 ThemeCreationGuide - Chromium - A Guide and a Reference for Creating Themes Using Extensions. - An Open-so

16/20

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. -

https://code.google.com/p/chromium/wiki/ThemeCreationGuide 16

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 [email protected], Sep 18, 2011

ok

Comment by [email protected], Sep 22, 2011

THIS PAGE SUCKS AND THE LINK DOESN'T WORK :P

Comment by [email protected], Sep 23, 2011

themes,, [email protected]

Comment by [email protected], Oct 9, 2011

file:///C:/Documents%20and%20Settings/User/Desktop/I%20Love%20Poker.jpg

Comment by [email protected], Oct 9, 2011

file:///C:/Documents%20and%20Settings/User/Desktop/I%20Love%20Poker.jpg

Comment by [email protected], Oct 25, 2011

can i import my theme to Google chrome so other people can us the theme?

Comment by [email protected], 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 [email protected], 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 ofcode 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 begreatly appreciated.

Thanks,

Steve

Comment by [email protected], 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 [email protected], Dec 1, 2011

thanks!

Comment by [email protected], Dec 3, 2011

can someone tell me what i can do to make the download bar at the bottom a different color

Comment by [email protected], Dec 6, 2011

8/12/2019 ThemeCreationGuide - Chromium - A Guide and a Reference for Creating Themes Using Extensions. - An Open-so

17/20

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. -

https://code.google.com/p/chromium/wiki/ThemeCreationGuide 17

I keep getting the error message:

Manifest is not valid JSON. Line: 1, column: 2, Dictionary keys must be quoted.

Comment by [email protected], Dec 22, 2011

change the manifest.json file's manifest version to something like '1.1' save and try again

Comment by [email protected], 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 anddirty 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 [email protected], 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 "s tretch" so that the bg will st retch to the edge at any screen resolution? 2. Isthere a way to change the incognito icon?

Comment by [email protected], Jan 16, 2012

+1 how to make the download bar at the bottom a different color?

Comment by [email protected], Jan 16, 2012

Ok I got it, it will be totally the same as the toolbar color after restarting chrome...

Comment by [email protected], 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 [email protected], Jan 20, 2012

What of this includes DOWNLOAD TAB when is open...

Comment by [email protected], Jan 22, 2012

so i must try it with mine downloadtab open?...

Comment by [email protected], Jan 26, 2012

the "buttons" t int doesn't seem to work for me.

Comment by [email protected], 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 [email protected], Feb 9, 2012

well i solved the problem by myself before someone answered. Thanks anyway

Comment by [email protected], Feb 11, 2012

8/12/2019 ThemeCreationGuide - Chromium - A Guide and a Reference for Creating Themes Using Extensions. - An Open-so

18/20

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. -

https://code.google.com/p/chromium/wiki/ThemeCreationGuide 18

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'snot 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 tabbackground file before it repeats it?

Comment by [email protected], Feb 21, 2012

I still dont understand hoe to make it

Comment by [email protected], 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 [email protected], Feb 26, 2012

KIEN ME REGALA EL LINK DE DONDE DESCARGAR EL PROGRMA PORFAVOR

Comment by [email protected], Mar 4, 2012

how to make the footer as transparent ????

Comment by [email protected], Mar 4, 2012

that of newtab

Comment by [email protected], Mar 5, 2012

no entiendo .. alguien digamne porfavor COMO PUEDO HACER YO UN TEMA, CREARLO i dont understand .. somebody tell me please HOW CAN IDO A THEME, CREATED

Comment by t [email protected], Mar 29, 2012

UM?

Comment by [email protected], May 22, 2012

Mac and a update?

Comment by [email protected], 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 fromthe top?

Comment by [email protected], May 29, 2012

this whole guide needs updating, so it's easier for people to follow

Comment by k [email protected], Jul 11, 2012

browser chrome ini rumit sekali. header pada browser chrome tidak terlalu nampak, sehingga theme apa saja yang anda gunakan terlihat sepertidefault theme pada chrome. saya lebih tertarik personas pada mozilla.

translate.google.com

because English is too mainstream.

8/12/2019 ThemeCreationGuide - Chromium - A Guide and a Reference for Creating Themes Using Extensions. - An Open-so

19/20

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. -

https://code.google.com/p/chromium/wiki/ThemeCreationGuide 19

Comment by [email protected], 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 [email protected], Aug 10, 2012

lol

Comment by [email protected], Aug 18, 2012

Works like a charm, thanks!

Comment by [email protected], 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 [email protected], Sep 18, 2012

There are a number of spelling mistakes for a Google page...

Comment by [email protected], Oct 6, 2012

dude

Comment by [email protected], Oct 16, 2012

you can find hundreds of awesome chrome themes on http://www.chromeposter.com/

Comment by [email protected], 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 talkedabout it. found only on extension, but not mensionava themes

thank you

Comment by [email protected], 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 [email protected], 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 [email protected], Dec 3, 2012

You can't, try to make the background image either repeatable or centered.

Comment by [email protected], 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 theirown themes, i made it years ago:

8/12/2019 ThemeCreationGuide - Chromium - A Guide and a Reference for Creating Themes Using Extensions. - An Open-so

20/20

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. -

http://and-reese.deviantart.com/art/Google-Chrome-CRX-Tutorial-158616727?q=in%3Ascraps%20sort%3Atime%20gallery%3Aand-reese&qo=32

Comment by [email protected], Dec 28, 2012

how I can put image on to the new tab button.

Comment by [email protected], Jan 5, 2013

Creating my own Google Chrome Theme was easy. But how do I share it with friends?

Comment by [email protected], 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'san 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 andsend that to friends/colleagues.

Comment by [email protected] , Jan 9, 2013

http://chrometheme.chromepub.com/crxtheme-- link mentioned above is a broken link

Sign into add a comment

Terms- Privacy- Project Hosting Help

Powered by Google Project Hosting