Difference between revisions of "Development:Third-Party Tab Themes"

From Camino Wiki
Jump to navigation Jump to search
(initial porting of japser's documentation)
 
(add the images)
Line 5: Line 5:
 
As shown below, the tab base is <code>tab_bar_bg</code> painted as a pattern across the entire width of the tab bar. Then, at the ends of every tab, the <code>tab_button_divider</code> is painted. <br />         
 
As shown below, the tab base is <code>tab_bar_bg</code> painted as a pattern across the entire width of the tab bar. Then, at the ends of every tab, the <code>tab_button_divider</code> is painted. <br />         
  
<p><img src="docu/tab_theme2.jpg" alt="Tab Layout Diagram" width="450" height="100" /></p>
+
[[image:tab_theme2.jpg|Tab Layout Diagram]]
  
 
===Active Tab===
 
===Active Tab===
 
The active tab consists of three objects. The sides of the tabs are painted using <code>tab_left_side</code> and <code>tab_right_side</code>. The middle part of the active tab is painted using <code>tab_active_bg</code> as a pattern.<br />
 
The active tab consists of three objects. The sides of the tabs are painted using <code>tab_left_side</code> and <code>tab_right_side</code>. The middle part of the active tab is painted using <code>tab_active_bg</code> as a pattern.<br />
<img src="tab_theme.jpg" alt="Our Keen Tabs" width="450" height="253" />
+
[[image:tab_theme.jpg|Our Keen Tabs]]
 
          
 
          
 
===Tab Close Buttons===
 
===Tab Close Buttons===

Revision as of 15:10, 9 June 2007

The tabbed browsing UI of Camino 1.0 and newer allows the use of custom of themes. The system that makes this happen was made to be flexible and simple.

How does it work?

As shown below, the tab base is tab_bar_bg painted as a pattern across the entire width of the tab bar. Then, at the ends of every tab, the tab_button_divider is painted.

Tab Layout Diagram

Active Tab

The active tab consists of three objects. The sides of the tabs are painted using tab_left_side and tab_right_side. The middle part of the active tab is painted using tab_active_bg as a pattern.
Our Keen Tabs

Tab Close Buttons

The close tab button has three separate states: one for the general inactive state, one for the hover state, and one for the clicked state. The overflow menu button is painted as is.

Tab Bar

Because the bar_bg, active_bg and hover images are painted as patterns, there is great freedom in what can be done. These patterns can be made as wide as you wish, which can increase your flexibility when designing tab themes. It is also possible to make the divider and side images wider than two pixels, but this could cause the expected behavior to change.