Chromium Themes
 
Search this site

Useful Links

Copyright

All content on this site is licensed under the Creative Commons Attribution-Noncommercial-Share Alike 3.0 license. If you intend to provide any themes, tools, or tutorials on your own site, you must include a link to this website on any page that contains a thumbnail or download link to any of our content.
Beta‎ > ‎Tutorials‎ > ‎

Theme Dissection

Contents

  1. 1 Introduction
    1. 1.1 Things to Note
    2. 1.2 Setup
      1. 1.2.1 Pattern Images
      2. 1.2.2 Web Page
      3. 1.2.3 Options
      4. 1.2.4 Test Theme
    3. 1.3 Final Note
  2. 2 Window
    1. 2.1 Upper Window Corners
    2. 2.2 Window Borders
      1. 2.2.1 Window Border Layout
      2. 2.2.2 Window Border Images
      3. 2.2.3 Window Border Details
    3. 2.3 Dialog Window
      1. 2.3.1 Dialog Window Layout
      2. 2.3.2 Dialog Window Details
  3. 3 Content Area
    1. 3.1 Top Row
    2. 3.2 Content Border
      1. 3.2.1 Content Border Layout
      2. 3.2.2 Content Border Images
      3. 3.2.3 Content Border Details
    3. 3.3 Dialog Content Border
      1. 3.3.1 Dialog Content Border Layout
      2. 3.3.2 Dialog Content Border Details
  4. 4 Tab Row
    1. 4.1 Tabs
      1. 4.1.1 Tab Layout
      2. 4.1.2 Tab Images
      3. 4.1.3 Tab Details
    2. 4.2 Tab Content
      1. 4.2.1 Tab Content Layout
      2. 4.2.2 Tab Content Images
      3. 4.2.3 Tab Content Details
    3. 4.3 Incognito Icon
      1. 4.3.1 Incognito Icon Images
      2. 4.3.2 Incognito Icon Details
  5. 5 Navigation Bar
    1. 5.1 Navigation Buttons
      1. 5.1.1 Navigation Buttons Layout
      2. 5.1.2 Navigation Buttons Images
      3. 5.1.3 Navigation Buttons Details
    2. 5.2 Location Bar
      1. 5.2.1 Location Bar Layout
      2. 5.2.2 Location Bar Images
    3. 5.3 Menu Buttons
      1. 5.3.1 Menu Buttons Layout
      2. 5.3.2 Menu Buttons Images
      3. 5.3.3 Menu Buttons Details
  6. 6 Window Controls Bar
    1. 6.1 Window Controls Buttons
      1. 6.1.1 Window Controls Buttons Layout
      2. 6.1.2 Window Controls Buttons Images
      3. 6.1.3 Window Controls Buttons Details
    2. 6.2 Distributor Logo
      1. 6.2.1 Distributor Logo Images
      2. 6.2.2 Distributor Icon Details
  7. 7 Find Bar
    1. 7.1 Find Bar
      1. 7.1.1 Find Bar Layout
      2. 7.1.2 Find Bar Images
      3. 7.1.3 Find Bar Details
    2. 7.2 Find Bar Buttons
      1. 7.2.1 Find Bar Buttons Layout
      2. 7.2.2 Find Bar Buttons Images
      3. 7.2.3 Find Bar Buttons Details
  8. 8 Miscellaneous Sections
    1. 8.1 Download Button
      1. 8.1.1 Download Button Layout
      2. 8.1.2 Download Button Images
      3. 8.1.3 Download Button Details
  9. 9 Appendices
    1. 9.1 Appendix A - Image Names to Resource IDs Chart

Introduction

One of the largest problems facing artists that wish to create truly original themes for Chromium is knowing the exact constraints that the software imposes upon them.  This document will attempt to answer many of those questions.  As a constant work in progress, there could be errors or omissions in this document, if you happen to find one please let us know.

Things to Note

  • This document assumes the reader has a basic understanding of creating a theme for Chromium browsers; to the extent of replacing images and rebuilding the default.dll.
  • This dissection used the source code for Chromium to get the true names of all the images used in themes, and will not reference images by their resource IDs.  Our Image List contains a useful list of all of these images and their proper names, with a few noted exceptions.
  • Although we only use the proper names of the images when refering to them, we will often change the name of a particular part of the interface to something we believe to be more fitting.
  • The method we use here could be considered very unorthodox since the source code is freely available.  The source code is however extremely large, and this method seemed more efficient than reading through the source.

Setup

These setup steps only apply if you wish to follow along and perform the experiments used to determine these constraints.  Even if you don't wish to follow along, this setup process should present interesting reading material.

Pattern Images

We will begin by creating a series of test pattern images; using varying colors of these patterns in place of the default images to gauge locations, margins, overlaps, and similar constraints.  These pattern images are 'pixel-precise' and each size was made separately, not merely resized.  This allows us to gather information from their placement on a pixel-precise level as well.

           
Actual Size

Web Page

To provide a consistent browser view, we will create a very basic HTML document to display in our tabs.  This gives us a plain black page with 10 broken bars as the title.  The broken bars were chosen as the title to hopefully present us with a title that is not as obtrusive as text, but still identifiable.  Teal was chosen as the background color because it contrasts with the colors of our pattern images, and also with the Base Window color which you will learn about a little later.

HTML Code
<html>
<head>
<title>||||||||||</title>
</head>
<body bgcolor="#50ffcc">
</body>
</html>

Options

Since we will be creating a nearly unusable theme, let us set our options to open two tabs upon startup, both displaying our test page.  Your options should look like those below, with the urls pointing to where you stored your test page.  Displaying two tabs assures we will have an example of both an active and inactive tab.


Click to Enlarge

Test Theme

After replacing the images that make up the majority of the theme, we are presented with an interface that will initially look very chaotic, but knowledge of its creation allows it to provide us with very precise layout information.  (Note: You can find a copy of the theme displayed in the images for download here.)

Click to Enlarge


Click to Enlarge

Final Note

We will continue now by examining different parts of the interface and how they use the theme images. While trying to be clear and precise, we will also be very brief in most of the explanations; this should allow for easier browsing of this document for reference while building a theme.

The following sections occur in a very specific order; if a section appears before another, it is meant to indicate that it will be drawn underneath it if they happen to overlap. This is because the browser draws all the interface elements back to front. We will attempt to point out any possible overlaps, but in the event that one is omitted, the section order will the layering order.

Window

Examining our test theme immediately shows us a very important aspect of the theme system; all of our transparent test images have turned white!  This is not an error in the images, instead this is showing us the true nature of how the browser builds its window.  It begins by displaying, what we will refer to as, the Base Window, which is completely white.  All theme designers with transparency in their Window images will have to keep this in mind to keep the white from showing through.

Upper Window Corners

If the white background wasn't shocking enough, a closer look at the upper corners shows us our next interesting(i.e. limiting) design constraint.  The Base Window is built with slightly rounded corners which limits us from making a theme with corners that are either harder or softer.


Enlarged View - Grid Denotes Pixels

Window Borders

The browser then paints the theme's window images on top of this white frame.  There are six different window states; Activated, Deactivated, Off-the-Record Activated, Off-the-Record Deactivated, Constrained, and Constrained 'V'.  Activated is the normal window state, and Deactivated is conversely the state when the window doesn't have primary focus.  Off-the-Record is called Incognito in the browser menu, and also has Activated and Deactivated states.  The exact nature of the Constrained windows hasn't been determined as of this writing, but the developer documentation does refer to 'Constrained Popups' so it would probably be safe to assume that these images deal with popup windows;  the images refer to both a normal constrained window, and also a 'V' constrained window, this could possibly mean vertical.

Window Border Layout


Approximation of Window Border Layout

Window Border Images


Activated Deactivated
window_top_left_corner
window_top_center
window_top_right_corner
window_right_side
window_bottom_right_corner
window_bottom_center
window_bottom_left_corner
window_left_side
 dewindow_top_left_corner
dewindow_top_center
dewindow_top_right_corner
dewindow_right_side
dewindow_bottom_right_corner
dewindow_bottom_center
dewindow_bottom_left_corner
dewindow_left_side
   
Activated OTR Deactivated OTR
window_top_left_corner_otr
window_top_center_otr
window_top_right_corner_otr
window_right_side_otr
window_bottom_right_corner_otr
window_bottom_center_otr
window_bottom_left_corner_otr
window_left_side_otr		 dewindow_top_left_corner_otr
dewindow_top_center_otr
dewindow_top_right_corner_otr
dewindow_right_side_otr
dewindow_bottom_right_corner_otr
dewindow_bottom_center_otr
dewindow_bottom_left_corner_otr
dewindow_left_side_otr
   
Constrained Constrained V
constrained_top_left_corner
constrained_top_center
constrained_top_right_corner
constrained_right_side
constrained_bottom_right_corner
constrained_bottom_center
constrained_bottom_left_corner
constrained_left_side		 constrained_top_left_corner_v
constrained_top_center_v
constrained_top_right_corner_v
constrained_right_side_v
constrained_bottom_right_corner_v
constrained_bottom_center_v
constrained_bottom_left_corner_v
constrained_left_side_v

Window Border Details

Margins are from Base Window edges.
  • Top Left Corner
    • Top aligned.
    • Left aligned.
    • Does not tile.
    • Margins are 0px
    • Will not be drawn outside of rounded Base Window corner.
  • Top Center
    • Top aligned
    • Left aligned.
    • Tiles on X-axis
    • Left margin is width of Top Left Corner
    • Right margin is width of Top Right Corner
  • Top Right Corner
    • Top aligned.
    • Right aligned.
    • Does not tile.
    • Margins are 0px
    • Will not be drawn outside of rounded Base Window corner.
  • Right Side
    • Top aligned.
    • Right aligned.
    • Tiles on Y-axis.
    • Top margin is height of Top Right Corner.
    • Bottom margin is height of Bottom Right Corner.
  • Bottom Right Corner
    • Bottom aligned.
    • Right aligned.
    • Does not tile.
    • Margins are 0px.
  • Bottom Center
    • Bottom aligned.
    • Left aligned.
    • Tiles on X-axis
    • Left margin is width of Bottom Right Corner.
    • Right margin is width of Bottom Right Corner.
  • Bottom Left Corner
    • Bottom aligned.
    • Left aligned.
    • Does not tile.
    • Margins are 0px.
  • Left Side
    • Top aligned.
    • Left aligned.
    • Tiles on the Y-axis.
    • Top margin is height of Top Left Corner
    • Bottom margin is height of Bottom Left Corner

Dialog Window

Dialog Windows such as Options, Task Manager, and About use a slightly different drawing system.  The first thing to note is that the Base Window is black instead of white, yet still maintains the same forced rounded top corners.  Dialog Windows are drawn much the same way as normal windows, with a notable exception.  The top, bottom, and side images are tiled from window edge to window edge, then the corners are drawn on top of them.  This would only cause an issue if you were using transparency in your images, which is unlikely considering the inconsistent white/black background they will be drawn upon.

Dialog Window Layout

Approximation of Dialog Window Layout - Darker shading indicates overlap

Dialog Window Details

Margins are from Dialog Window edges.
  • Top Left Corner
    • Top aligned.
    • Left aligned.
    • Does not tile.
    • Margins are 0px.
    • Will not be drawn outside of rounded Base Window corner.
  • Top Center
    • Top aligned.
    • Left aligned.
    • Tiles on the X-axis.
    • Margins are 0px.
  • Top Right Corner
    • Top aligned.
    • Right aligned.
    • Does not tile.
    • Margins are 0px.
    • Will not be drawn outside of rounded Base Window corner.
  • Right Side
    • Top aligned.
    • Right aligned.
    • Tiles on the Y-axis.
    • Margins are 0px.
  • Bottom Right Corner
    • Bottom aligned.
    • Right aligned.
    • Does not tile.
    • Margins are 0px.
  • Bottom Center
    • Bottom aligned.
    • Left aligned.
    • Tiles on the X-axis
    • Margins are 0px.
  • Bottom Left Corner
    • Bottom aligned.
    • Left aligned.
    • Does not tile.
    • Margins are 0px.
  • Left Side
    • Top aligned.
    • Left aligned.
    • Tiles on the Y-axis.
    • Margins are 0px.

Content Area

The Content Area consists of the images that border the frame that displays the web page, with an enlarged top row to leave room to draw the Navigation Bar.

Top Row

The top row, shown as cyan and magenta in the image below, has a complex top margin that requires a detailed explanation.  The Content Area is drawn before the Tab Row, but relies on the sizes and margins of the Tab Row to determine its position.  The top margin of the top row is x, where x is the height of the Tab Row plus 12px; or more accurately the Tab Row height plus the Tab Row top margin minus 3px.

Click to Enlarge

Another interesting thing to note, as shown in the preceding image, is that a 1px tall gray(R=178 G=178 B=178) line is drawn within the entire width of the bottom edge of the content_top_center. Much like the rounded top corner of the Base Window, you will not be able to avoid nor change this.

Content Border

The size of the content border is controlled by the size of the images used to create it.  The height of the top border, which ends up having the Navigation Bar drawn within it, is determined by the height of content_top_center.  The width of the sides is determined by the widest image out of the corners and sides; if the height of the corners are less than the top or bottom, the sides will tile to fill the gaps.  The height of the bottom border is determined by the height of content_bottom_center.

Content Border Layout


Approximation of Content Area Border Layout

Content Border Images

Content Border
content_top_left_corner
content_top_center
content_top_right_corner
content_right_side
content_bottom_right_corner
content_bottom_center
content_bottom_left_corner
content_left_side

Content Border Details

Margins are from Base Window edges.
  • Top Left Corner
    • Top aligned.
    • Left aligned.
    • Does not tile.
    • Margins
      • Top - Height of Tab Row plus 12px.
      • Left - 2px
  • Top Center
    • Top aligned.
    • Left aligned.
    • Tiles on the X-axis
    • Margins
      • Top - Height of Tab Row plus 12px.
      • Left - Width of side column plus 2px.
      • Right - Width of side column plus 2px.
  • Top Right Corner
    • Top aligned.
    • Right aligned.
    • Does not tile.
    • Margins
      • Top - Height of Tab Row plus 12px.
      • Right - 2px.
  • Right Side
    • Top aligned.
    • Right aligned.
    • Tiles on the Y-axis.
    • Margins
      • Top - Height of Tab Row, plus height of Top Right Corner, plus 12px.
      • Right - 2px.
  • Bottom Right Corner
    • Bottom aligned.
    • Right aligned.
    • Does not tile.
    • Margins
      • Bottom - 2px.
      • Right - 2px.
  • Bottom Center
    • Bottom aligned.
    • Left aligned.
    • Tiles on the X-axis.
    • Margins
      • Bottom - 2px.
      • Left - Width of side column plus 2px.
      • Right - Width of side column plus 2px.
  • Bottom Left Corner
    • Bottom aligned.
    • Left aligned.
    • Does not tile.
    • Margins
      • Bottom - 2px.
      • Left - 2px.
  • Left Side
    • Top aligned.
    • Left aligned.
    • Tiles on the Y-axis.
    • Margins
      • Top - Height of Tab Row, plus height of Top Left Corner, plus 12px.
      • Left - 2px.

Dialog Content Border

Unlike the standard window, the images for the content border do not affect the size of the content area in dialog windows, and the top images are not drawn at all.  The images are also drawn from the edge of the content area outward, with any excess outside of the window frame being trimmed.

Dialog Content Border Layout


Approximation of Dialog Content Border Layout - Pink shade indicates parts of the image that are trimmed

Dialog Content Border Details

Margins are from the Dialog Window edges.
  • Right Side
    • Top aligned.
    • Right aligned.
    • Tiles on the Y-axis.
    • Margins
      • Top - 28px.
      • Right - 4px minus width of image.
  • Bottom Right Corner
    • Bottom aligned.
    • Right aligned.
    • Does not tile.
    • Margins
      • Bottom - 4px minus height of image.
      • Right - 4px minus width of image.
  • Bottom Center
    • Bottom aligned.
    • Left aligned.
    • Tiles on the X-axis.
    • Margins
      • Bottom - 4px minus height of image.
      • Left - 4px.
      • Right - 4px.
  • Bottom Left Corner
    • Bottom aligned.
    • Left aligned.
    • Does not tile.
    • Margins
      • Bottom - 4px minus the height of image.
      • Left - 4px minus the width of image.
  • Left Side
    • Top aligned.
    • Left aligned.
    • Tiles on the Y-axis.
    • Margins
      • Top - 28px.
      • Left - 4px minus width of image.

Tab Row

The Tab Row consists of one or more Tabs and the New Tab button.  It overlaps any image from a previous section, most notably the Top Content Border.  It will stretch the entire width of the window, within its margins.  Upon filling out its margins, it will begin to shrink the center image of all the Tabs horizontally at and even rate; the New Tab button will never shrink.

Tabs

Tabs are made up of three images, and possess five states; Active, Inactive, Off-the-Record Inactive, Vertical Inactive, and Hover.  The Tabs and New Tab button overlap each other, with the Active tab and New Tab button always on top, and the Inactive variations of Tabs layering from left to right, and the last tab being overlapped by the New Tab button.  The height of the Tab Row is determined by the tallest Tab image, but it is recommended that all the images be the same height.  If you wish to have tabs with varying heights, the Inactive Tabs being shorter than the Active Tab for example, you should accomplish this using transparency.  The New Tab button consists of a single image with three states; Normal, Hover, and Push.  Although it possesses a different top margin, the New Tab button can affect the height of the entire Tab Row, keep this in mind when determining the size of your New Tab images.  The Hover state is not drawn directly, it is instead drawn at 33% opacity over an Inactive Tab; you cannot change this opacity so take it into account when creating your Hover images.

Tab Layout

Approximation of the Tab Layout - Darker shading indicates overlap

Tab Images

Active Inactive
tab_active_left
tab_active_center
tab_active_right
 tab_inactive_left
tab_inactive_center
tab_inactive_right
   
Inactive OTR
 Inactive V
tab_inactive_left_otr
tab_inactive_center_otr
tab_inactive_right_otr		 tab_inactive_left_v
tab_inactive_center_v
tab_inactive_right_v
   
Hover
New Tab
tab_hover_left
tab_hover_center
tab_hover_right
 newtab
newtab_h
newtab_p

Tab Details

Margins are from the Base Window edges, unless otherwise noted.
  • First Tab
    • Left
      • Top aligned.
      • Left aligned.
      • Does not tile.
      • Margins
        • Top - 15px.
        • Left - Width of Content Border side column plus 2px.
    • Center
      • Top aligned.
      • Left aligned.
      • Tiles on the X-axis
      • Margins
        • Top - 15px.
        • Left - 0px from the right edge of the Left image.
    • Right
      • Top aligned.
      • Left aligned.
      • Does not tile.
      • Margins
        • Top - 15px.
        • Left - 0px from the right edge of the Center image, the Center image tiles and Tabs will shrink, so this is variable.
  • Second Tab and beyond
    • Left
      • Top aligned.
      • Left aligned.
      • Does not tile.
      • Margins
        • Top - 15px.
        • Left - Minus 16px from the right edge of the Right image of the previous Tab.
    • Center
      • Top aligned.
      • Left aligned.
      • Tiles on the X-axis.
      • Margins
        • Top - 15px.
        • Left - 0px from the right edge of the Left image.
    • Right
      • Top aligned.
      • Left aligned.
      • Does not tile.
      • Margins
        • Top - 15px.
        • Left - 0px from the right edge of the Center image, the Center image tiles and Tabs will shrink, so this is variable.
  • New Tab Button
    • Top aligned.
    • Left aligned.
    • Does not tile.
    • Margins
      • Top - 20px.
      • Left - Minus 5px from the right edge of the Right image of the previous Tab.
      • Right - Variable, minimum is width of Close Bar plus 5px.

Tab Content

Each Tab has a content area that consists of a Favicon, the Title, and a button to close the Tab.  The content area does not stay within the tab_center image.  The Tab Close button has three states; Normal, Hover, and Pushed.  There are occasionally additional icons that appear within the Title block, although theme designers may wish to edit these, unless they make them larger than the Favicon or Tab Close buttons they will always fit nicely within the Title block.

Tab Content Layout


Approximation of Tab Content Layout

Tab Content Images

Favicon Tab Close
default_favicon
downloads_favicon
history_favicon
*From Site*
 tab_close
tab_close_h
tab_close_p

Tab Content Details

Margins from the confines of all three Tab images combined.
  • Favicon
    • Top aligned.
    • Left aligned.
    • Does not tile.
    • Margins
      • Top - 6px.
      • Left - 16px.
  • Tab Close
    • Top aligned.
    • Right aligned.
    • Does not tile.
    • Margins
      • Top - 6px.
      • Right - 10px.

Incognito Icon

The Incognito (or Off-the-Record) icon only appears when you enter the appropriate state.  When in this state, the Incognito icon will be placed to the left of the First Tab, pushing all the Tabs to the right to make room.

Incognito Icon Images

Incognito Icons
otr_icon
otr_icon_standalone

Incognito Icon Details

  • Top aligned.
  • Left aligned.
  • Does not tile.
  • Margins
    • The margins for the Incognito Icon are the same as the First Tab, with one exception; it is drawn 2px higher than the First Tab.  This means that it will only overlap the Content Border Top Center by 1px, not the 3px of the First Tab.

Navigation Bar

The Navigation Bar is the area where most of the controls are located.  It falls within the boundaries of the Content Border Top Center.  There are three parts of the Navigation Bar; the Buttons, the Location Bar, and the Menu Buttons.

Navigation Buttons

There are six different Navigation Buttons; Back, Forward, Reload, Home, Star/Starred, and Go/Stop.  All of them have at least three states; Normal, Hover, and Pushed.  Back, Forward, Star, and Go also have a Disabled state.  Home does not appear in the Navigation Bar until a home page has been set; in this document we will be assuming that Home is in the Navigation Bar.  Starred replaces Star when the site has been bookmarked, and Stop replaces Go while a page is being loaded.

Navigation Buttons Layout


Approximation of Navigation Buttons Layout

Navigation Buttons Images

Back Forward Reload
back
back_h
back_p
back_d 		forward
forward_h
forward_p
forward_d 		reload
reload_h
reload_p
     
Home Star/Starred Go/Stop
home
home_h
home_p 		star
star_h
star_p
star_d
starred
starred_h
starred_p 		go
go_h
go_p
go_d
stop
stop_h
stop_p

Navigation Buttons Details

Margins are from the boundaries of Content Border Top Center.
  • Back
    • Top aligned.
    • Left aligned.
    • Does not tile.
    • Margins
      • Top - 6px.
      • Left - 3px.
  • Forward
    • Top aligned.
    • Left aligned.
    • Does not tile.
    • Margins
      • Top - 6px.
      • Left - Width of Back image plus 3px. (or 0px between Forward and Back)
  • Reload
    • Top aligned.
    • Left aligned.
    • Does not tile.
    • Margins
      • Top - 6px.
      • Left - Width of Back image, plus width of Forward image, plus 7px. (or 4px between Reload and Forward)
  • Home
    • Top aligned.
    • Left aligned.
    • Does not tile.
    • Margins
      • Top - 6px.
      • Left - Width of Back image, plus width of Forward image, plus width of Reload image, plus 11px. (or 4px between Home and Reload)
  • Star/Starred
    • Top aligned.
    • Left aligned.
    • Does not tile.
    • Margins
      • Top - 6px.
      • Left - Width of Back image, plus width of Forward image, plus width of Reload image, plus width of Home image, plus 15px. (or 4px between Star/Starred and Home)
  • Go/Stop
    • Top aligned.
    • Right aligned.
    • Does not tile.
    • Margins
      • Top - 6px.
      • Right - Width of Menu Button Background, plus width of Menu Button Background, plus 5px. (or 3px between Go/Stop and Menu Buttons)

Location Bar

The Location Bar expands to fill all available room in the Navigation Bar between Star/Starred and Go/Stop.  It has three states, Normal, Read-Only, and Keyword, it is not limited to a single state at a time.  While in the Normal state, the locationbg image tiles on the X-axis behind it, with 2px showing on the top, 2px showing on the bottom, with 0px between the Location Bar and Star/Starred and Go/Stop.  While in the Read-Only state, the Location Bar shrinks 1px on both sides, and shows a single pixel around the outside of the locationbg_readonly images.  While in the Keyword state, the location_bar_keyword_search images are drawn within the Location Bar boundaries.

Location Bar Layout


Approximation of Location Bar Layout

Location Bar Images

Location BG Read-Only Keyword
locationbg locationbg_readonly_left
locationbg_readonly_center
locationbg_readonly_right 		location_bar_keyword_search_l
location_bar_keyword_search_c
location_bar_keyword_search_r

Menu Buttons

Menu Buttons are very different than the other buttons of the Navigation Bar; instead of a button with different states, they are an image, and a background that has two states; Hover and Push.  The Normal state is the button image drawn without the background.  The background is also used in other parts of the interface, most notably the Bookmark Bar; because of this, it is a good idea to have the background images be mostly transparent borders that modify the look of what is beneath them.  The actual Menu Button image is only drawn within the center part of the background.


Enlarged View - Menu Button image in Purple

Menu Buttons Layout


Approximation of Menu Buttons Layout

Menu Buttons Images

Menu Button Images Menu Button Background
menu_chrome
menu_page 		textbutton_tl_h
textbutton_tl_p
textbutton_t_h
textbutton_t_p
textbutton_tr_h
textbutton_tr_p
textbutton_l_h
textbutton_l_p
textbutton_c_h
textbutton_c_p
textbutton_r_h
textbutton_r_p
textbutton_bl_h
textbutton_bl_p
textbutton_b_h
textbutton_b_p
textbutton_br_h
textbutton_br_p

Menu Buttons Details

  • Menu Button Image
    • Middle aligned.
    • Center aligned.
    • Does not tile.
    • Margins (from within background boundaries)
      • Top - 0px.
      • Bottom - 0px.
      • Left - Width of left background column, plus 1px.
      • Right - Width of right background column, plus 1px.
  • Menu Button Background (total background, margins are from within Content Border Top Center when drawn in Navigation Bar)
    • Top aligned.
    • Right aligned.
    • Does not tile.
    • Margins
      • Top - 6px.
      • Left - 0px. (there is 0px space between both Menu Buttons in the Navigation Bar)
  • Menu Button Background (individual parts, margins are from within a virtual bounding box)
    • Top Left
      • Top aligned.
      • Left aligned.
      • Does not tile.
      • Margins
        • Top - 0px.
        • Left - 0px.
    • Top
      • Top aligned.
      • Left aligned.
      • Tiles on the X-axis.
      • Margins
        • Top - 0px.
        • Left - Width of left background column.
        • Right - Width of right background column.
    • Top Right
      • Top aligned.
      • Right aligned.
      • Does not tile.
      • Margins
        • Top - 0px.
        • Right - 0px.
    • Left
      • Top aligned.
      • Left aligned.
      • Tiles on the Y-axis.
      • Margins
        • Top - Height of Top Left image.
        • Bottom - Height of Bottom Left image.
        • Left - 0px.
    • Center
      • Top aligned.
      • Left aligned.
      • Tiles on both the X-axis and the Y-axis.
      • Margins
        • Top - Height of Top image.
        • Bottom - Height of Bottom image.
        • Left - Width of Left image.
        • Right - Width of Right image.
    • Right
      • Top aligned.
      • Right aligned.
      • Tiles on the Y-axis.
      • Margins
        • Top - Height of Top Right image.
        • Bottom - Height of Bottom Right image.
        • Right - 0px.
    • Bottom Left
      • Bottom aligned.
      • Left aligned.
      • Does not tile.
      • Margins
        • Bottom - 0px.
        • Left - 0px.
    • Bottom
      • Bottom aligned.
      • Left aligned.
      • Tiles on the X-axis.
      • Margins
        • Bottom - 0px.
        • Left - Width of Bottom Left image.
        • Right - Width of Bottom Right image.
    • Bottom Right
      • Bottom aligned.
      • Right aligned.
      • Does not tile.
      • Margins
        • Bottom - 0px.
        • Right - 0px.

Window Controls Bar

The Window Controls Bar resides in the upper right corner of the Base Window.  It contains buttons to control the state of the window, and a icon displaying a distributor logo.

Window Controls Buttons

The Window Controls Buttons consists three buttons; Close, Maximize/Restore, and Minimize.  Each button has three states; Normal, Hover, and Pushed.  The Maximize/Restore button will be either Maximize while the browser is windowed, or Restore while it is maximized.

Window Controls Buttons Layout


Approximation of Window Controls Layout

Window Controls Buttons Images

Close Restore
close
close_h
close_p 		restore
restore_h
restore_p
   
Maximize Minimize
maximize
maximize_h
maximize_p 		minimize
minimize_h
minimize_p

Window Controls Buttons Details

  • Close
    • Top aligned.
    • Right aligned.
    • Does not tile.
    • Margins
      • Top - 1px.
      • Right - 4px.
  • Maximize/Restore
    • Top aligned.
    • Right aligned.
    • Does not tile.
    • Margins
      • Top - 1px.
      • Right - Width of Close image, plus 4px. (or 0px between Maximize/Restore and Close)
  • Minimize
    • Top aligned.
    • Right aligned.
    • Does not tile.
    • Margins
      • Top - 1px.
      • Right - Width of Close image, plus width of Maximize/Restore image, plus 4px. (or 0px between Minimize and Maximize/Restore)

Distributor Logo

The Distributor Logo is a small logo that resides the left of the Window Controls Bar.  In the default theme it is the small Google logo.  There are two states to this logo, Normal and Light, referring to state required to contrast the tone of the background they are drawn over.  How the browser decides which to display as not been determined exactly, but for the purposes of theme creation, you can make both of the files the same to get the logo you want displayed.  There is no size restriction on the Distributor Logo, but you must keep in mind that it will overlap all other interface elements, making them unusable.

Distributor Logo Images

Distributor Logo
distributor_logo
distributor_logo_light

Distributor Icon Details

  • Distributor Logo
    • Top aligned.
    • Right aligned.
    • Does not tile.
    • Margins
      • Top - 3px.
      • Right - Width of all Window Controls images, plus 11px. (or 7px between Distributor Icon and Minimize)

Find Bar


Find Bar


Find Bar Layout


Approximation of Find Bar Layout

Find Bar Images


Find Bar Details


Find Bar Buttons


Find Bar Buttons Layout


Approximation of Find Bar Buttons Layout

Find Bar Buttons Images


Find Bar Buttons Details


Miscellaneous Sections


Download Button


Download Button Layout


Approximation of Download Button Layout

Download Button Images


Download Button Details


Appendices

Appendix A - Image Names to Resource IDs Chart