Confirmed users
295
edits
DevTools/CSSTips: Difference between revisions
Jump to navigation
Jump to search
no edit summary
No edit summary |
|||
| Line 3: | Line 3: | ||
== Basics == | == Basics == | ||
* Make sure your code is present for the 3 platforms, and that files are referenced twice in Windows' jar.mn (once for XP, once for Vista/7) So to add foo.css, your patch should include: | * Split your CSS into theme and content files (see below) | ||
* Make sure your theme code is present for the 3 platforms, and that files are referenced twice in Windows' jar.mn (once for XP, once for Vista/7) So to add foo.css, your patch should include: | |||
** 3 added files: <tt>/browser/themes/[gnome|pin|win]stripe/browser/devtools/foo.css</tt> | ** 3 added files: <tt>/browser/themes/[gnome|pin|win]stripe/browser/devtools/foo.css</tt> | ||
** 4 changes to the 3 files: <tt>/browser/themes/[gnome|pin|win]stripe/browser/jar.mn</tt> | ** 4 changes to the 3 files: <tt>/browser/themes/[gnome|pin|win]stripe/browser/jar.mn</tt> | ||
| Line 55: | Line 56: | ||
There are 2 places CSS rules are stored: | There are 2 places CSS rules are stored: | ||
* theme CSS files (stored in with your JS/HTML/etc) | * theme CSS files (stored in with your JS/HTML/etc) | ||
* content CSS files (stored in themes/???stripe directories) | * content CSS files (stored in <tt>themes/???stripe</tt> directories) | ||
Theme CSS is for styles that change from theme to theme. Content CSS is for more structural things. Typically certain CSS properties are going to lean one way or the other: color - 99% of the time it will be theme CSS, overflow - 99% content. | Theme CSS is for styles that change from theme to theme. Content CSS is for more structural things. Typically certain CSS properties are going to lean one way or the other: color - 99% of the time it will be theme CSS, overflow - 99% content. | ||
| Line 66: | Line 67: | ||
<th> 99% Content | <th> 99% Content | ||
<tr> | <tr> | ||
<td> font-*, color, background-color, border-color | <td> <tt>font-*, color, background-color, border-color</tt> | ||
<td> line-height, padding, margin | <td> <tt>line-height, padding, margin</tt> | ||
<td> width, max-width, top, bottom, etc [1] | <td> <tt>width, max-width, top, bottom, etc</tt> [1] | ||
<td> overflow, direction, display, *-align, *-box-* | <td> <tt>overflow, direction, display, *-align, *-box-*</tt> | ||
</table> | </table> | ||
If you're not sure then go for content CSS unless you can imagine the value changing on another platform. | If you're not sure then go for content CSS unless you can imagine the value changing on another platform. | ||