Style Side Panel
From FirebugWiki
(Difference between revisions)
Sebastianz (Talk | contribs) (Added description of options menu) |
Sebastianz (Talk | contribs) (Added description of context menu options) |
||
| Line 3: | Line 3: | ||
Furthermore the Style Side Panel gives you the cascading info, meaning styles, that are overwritten by other style definitions will be shown lined-through. | Furthermore the Style Side Panel gives you the cascading info, meaning styles, that are overwritten by other style definitions will be shown lined-through. | ||
| - | == Options Menu== | + | == Options Menu == |
{| class="wikitable" style="width:100%; vertical-align:top;" | {| class="wikitable" style="width:100%; vertical-align:top;" | ||
|- bgcolor=lightgrey | |- bgcolor=lightgrey | ||
| Line 20: | Line 20: | ||
For more info about tweaks available in Firebug please see the [[Firebug Preferences|full list of preferences]]. | For more info about tweaks available in Firebug please see the [[Firebug Preferences|full list of preferences]]. | ||
| + | |||
| + | == Context Menu == | ||
| + | {| class="wikitable" style="width:100%; vertical-align:top;" | ||
| + | |- bgcolor=lightgrey | ||
| + | ! style="width:180px;" | Option || Context || Description | ||
| + | |- | ||
| + | | Copy Rule Declaration || CSS selector || Copies the current CSS rule including the selector and all styles formatted to the clipboard | ||
| + | |- | ||
| + | | Copy Style Declaration || CSS selector || Copies all styles of the current CSS rule formatted to the clipboard | ||
| + | |- | ||
| + | | Edit Element Style... || everywhere || Enables editing of the element's inline style | ||
| + | |- | ||
| + | | New Property... || CSS rule || Allows adding new styles to the current CSS rule | ||
| + | |- | ||
| + | | Edit "<property name>"... || CSS property || Starts inline-editing of the current CSS property | ||
| + | |- | ||
| + | | Delete "<property name>"... || CSS property || Deletes the current CSS property from the rule | ||
| + | |- | ||
| + | | Disable "<property name>"... || CSS property || Disables the current CSS property | ||
| + | |- | ||
| + | | Refresh || everywhere || Reloads the contents of the panel | ||
| + | |- | ||
| + | | Inspect in CSS Tab || CSS rule || Lets you inspect the current CSS rule inside the [[CSS Panel]] | ||
| + | |- | ||
| + | | Inspect in DOM Tab || CSS rule || Lets you inspect the current CSS rule inside the [[DOM Panel]] | ||
| + | |- | ||
| + | | Open in external editor || CSS rule || Opens the CSS file containing the current rule in an external editor | ||
| + | |} | ||
Revision as of 08:15, 22 August 2011
Inside the Style Side Panel you can see the CSS styles, that are currently assigned to the selected node inside the HTML Panel. It also offers you similar possibilities of CSS manipulation like the CSS Panel. The difference between them is organizational. The Style Side Panel is a live view of the styles assigned to the selected node inside the HTML Panel (which can lie in different files) while the CSS Panel shows all styles of a CSS containing file.
Furthermore the Style Side Panel gives you the cascading info, meaning styles, that are overwritten by other style definitions will be shown lined-through.
Options Menu
| Option | Preference | Description |
|---|---|---|
| Only Show Applied Styles | extensions.firebug.onlyShowAppliedStyles | Toggles the display of overwritten styles |
| Show User Agent CSS | extensions.firebug.showUserAgentCSS | Toggles display of user agent specific CSS styles (all styles prefixed by "-moz-") |
| Expand Shorthand Properties | extensions.firebug.expandShorthandProps | If activated, all shorthand properties will be separated into the different styles, that make up the combined style (e. g. "margin" will be separated into "margin-top", "margin-right", "margin-bottom" and "margin-left") |
| :active | - | Toggles display of styles defined in the :active pseudo-class applying to the currently selected HTML element
|
| :hover | - | Toggles display of styles defined in the :hover pseudo-class applying to the currently selected HTML element
|
For more info about tweaks available in Firebug please see the full list of preferences.
Context Menu
| Option | Context | Description |
|---|---|---|
| Copy Rule Declaration | CSS selector | Copies the current CSS rule including the selector and all styles formatted to the clipboard |
| Copy Style Declaration | CSS selector | Copies all styles of the current CSS rule formatted to the clipboard |
| Edit Element Style... | everywhere | Enables editing of the element's inline style |
| New Property... | CSS rule | Allows adding new styles to the current CSS rule |
| Edit "<property name>"... | CSS property | Starts inline-editing of the current CSS property |
| Delete "<property name>"... | CSS property | Deletes the current CSS property from the rule |
| Disable "<property name>"... | CSS property | Disables the current CSS property |
| Refresh | everywhere | Reloads the contents of the panel |
| Inspect in CSS Tab | CSS rule | Lets you inspect the current CSS rule inside the CSS Panel |
| Inspect in DOM Tab | CSS rule | Lets you inspect the current CSS rule inside the DOM Panel |
| Open in external editor | CSS rule | Opens the CSS file containing the current rule in an external editor |
