I also added a few new rules for the Calendar section on the profile stylesheet. I had never had any calendar events, so didn’t know it needed some extra help. MySpace code is disgusting—endless nested tables, nearly impossible to style.

On the blog styles page, i have the actual custom CSS code as well as the settings i used on the Customize My Blog page.

Someone asked for the stylesheets i used for my MySpace profile, but, ironically, there was no way to post the commented CSS on MySpace. So here they are.

I developed these more or less from scratch over a year ago, and haven’t looked at them since. I tried to document as much as i could at the time, but i don’t really remember what all is going on now as far as the code goes. MySpace is a mess, so basically the routine is: undo MySpace’s styles, then add back your own. In this case, i was going for clean and easy to read. The left column is in a sans-serif font on a beige background; the right is seriffed in the “opposite” colors. I didn’t use any images. I mainly worked with the colors and typography. Some comfortable line-spacing does wonders for readability. The blog was a little easier to play with, so it has the negative-space dates that i wanted. It all looks pretty much how i want it to in Firefox; Internet Explorer doesn’t quite do it right, but it’s close.

MySpace strips any comments in CSS and doesn’t allow pound signs (#) in profile styles, but they work fine in custom stylesheets for blogs. Mike Davidson has more details on MySpace’s funkiness.

Update 20070424: not sure if these are the exact same styles on my current profile—i might have made some tweaks somewhere along the way that i forgot about. Also, it occurred to me that there are other blog style options that would affect how my custom stylesheet works. I’ll maybe post my settings for that at some point.

This is the CSS for my profile:

/* BEGIN general styles */

/* base elements */

body {
  background-color: 222526;
  }

table {
  border: none;
  background-color: transparent;
  }

td {
  border: none;
  background-color: transparent;
  }

body,
td,
li,
p,
div,
textarea { /* counter x.myspace line 95 */
  color: 666666;
  }

/* END base elements */

a {
  font-size: inherit;
  font-weight: inherit;
  font-family: inherit;
  }

a:link {
  color: 206980;
  }

a:hover {
  color: 206980;
  }

a:visited {
  color: 335A66;
  }

a.navbar:link { /* top menu text, links */
  color: gray;
  }

a.navbar:visited {
  color: 595959;
  }

 /* Contacting links */
.contactTable td.text a {
  }

.contactTable td.text a img {
  }

.contactTable td.text a:hover img {
  background-color: E5E3DA;
  }

a.redlink { /* "View All of ... Friends */
  font-family: inherit;
  font-size: inherit;
  }

a.redlink:link { /* "View All of ... Friends */
  color: 206980;
  }

a.redlink:hover {
  color: 206980;
  }

a.redlink:visited {
  color: 335A66;
  }

b font font, a.text { /* bottom menu text, links */
  color: 222222;
  }

.text { /* basic info: Headline, A/S/L, Last Login */
  color: 666666;
  }

.nametext { /* NAME */
  letter-spacing: 1ex;
  padding-left: 3ex;
  font-weight: normal;
  font-family: Georgia, "Times New Roman", serif;
  color: 222526;
  font-size: 10ex;
  }

.blacktext12 { /* ...is in your extended network BFBEB6 */
  color: black;
  font-size: 10px;
  display: none;
  }

.whitetext12 { /* Interests, Details */
  font-size: 20px;
  color: AABABF;
  font-weight: normal;
  display: block;
  background-color: 222526;
  padding: 1ex 2ex;
  margin-left: -3ex;
  margin-bottom: 1ex;
  }

.lightbluetext8 { /* MAIN > LEFT > Interests, Details subheaders (General, Music, Movies, etc.) */
  font-size: 13px;
  color: 206980;
  }

.text .text .whitetext12 { /* Contacting, Interests headers */
  color: red;
  }

.orangetext15 { /* Blurbs (About Me:, Who I'd like to meet:) Friends, Friend Comments */
  display: block;
  font-family: Georgia, "Times New Roman", serif !important;
  color: D9D0A3;
  font-weight: normal;
  font-size: 18px;
  padding: 1ex 2ex 0 2ex;
  }

.text .text .orangetext15 { /* Blurbs, Friends, Comments headers */
  font-size: 4ex;
  background-color: D9D7CE;
  color: black;
  margin-left: -2ex;
  margin-bottom: 1ex;
  padding: 1ex;
  }

.btext { /* "... Latest Blog Entry" . "has XX friends" */
  color: inherit;
  font-family: inherit;
  }

.redtext, /* MAIN > RIGHT > Comments > Displaying "XX" comments */
.redbtext { /* MAIN > RIGHT > Friends > has "XX" friends */
  color: ffdf00;
  }

.blacktext10 { /* MAIN > RIGHT > Comments > comment timestamp */
  font-family: inherit;
  color: 404039;
  }

.text table {
  border-width: 0 !important;
  }

div table font { /* top nav menu */
  color: gray;
  }

div div table font { /* undo for above rule */
  color: inherit;
  }

font input { /* top search form */
  background-color: 333333 !important;
  color: cccccc !important;
  border-style: solid;
  border-width: 1px;
  border-color: gray;
  }

/* END general styles */

/* BEGIN profile page styles */

body div table table td {
  background-color: transparent;
  }

body table {
  }

body table td { /* trying to shrink cell on left of main content table */
  width: 0;
  }

body table td img { /* trying to shrink cell on left of main content table */
  display: none;
  }

body table td td img { /* trying to shrink cell on left of main content table */
  display: inline;
  }

body table table td { /* undo above in children */
  }

body div table td { /* ditto */
  }

body table table {
  }

body div div table {
  background-color: transparent;
  background-image: none;
  }

body table table table {
  background-color: transparent;
  background-image: none;
  }

body div div table {
  }

body table table td { /* main content columns */
  background-color: D9D7CE;
  width: 0;
  }

/* main content columns links */
body table table table td a:link {
  text-decoration: underline;
  }

body table table table td a:hover {
  text-decoration: underline;
  background-color: E5E3DA;
  }

body table table table td a:visited {
  text-decoration: underline;
  }

.miahz-interests-general,
.miahz-interests-music,
.miahz-interests-movies,
.miahz-interests-television,
.miahz-interests-books,
.miahz-interests-heroes,
.miahz-content-aboutme,
.miahz-content-likemeet { /* main content divs */
  line-height: 175%;
  }

.miahz-interests-general p,
.miahz-interests-music p,
.miahz-interests-movies p,
.miahz-interests-television p,
.miahz-interests-books p,
.miahz-interests-heroes p,
.miahz-content-aboutme p,
.miahz-content-likemeet p { /* main content ps */
  margin-top: 0;
  }

body table table td.text { /* right content column */
  background-color: black;
  }

/* right content text */
body table table td.text body,
body table table td.text td,
body table table td.text li,
body table table td.text p,
body table table td.text div,
body table table td.text textarea { /* counter x.myspace line 95 */
  color: 808080;
  font-family: Georgia, "Times New Roman", serif;
  }

/* right content  links */
body table table td.text a:link {
  text-decoration: none;
  }

body table table td.text a:hover {
  text-decoration: underline;
  background-color: transparent;
  color: 309EBF;
  }

body table table td.text a:visited {
  text-decoration: none;
  }

body table table td.table { /* right column sub tables */
  width: 100%;
  }

body table table table td,
body div div table table td,
body table table table td.text { /* undo above */
  background-color: transparent;
  }

td.text td.text td b { /* Displaying n of n comments... */
  margin-bottom: 2ex;
  }

td.text td.text table table tr { /* individual comment containers */
  }

td.text td.text table table td { /* individual comment blocks */
  line-height: 175%;
  }

.text div img { /* Online Now! icon */
  }

/* END profile page styles */

This is the CSS for my blog:

a:link,
a:visited,
a:active {
  font-family: inherit !important;
  font-size: inherit !important;
  text-decoration: inherit !important;
  }

table.blog a:link {
  font-family: inherit;
  }

a:hover {
  text-decoration: underline !important;
  }

table.main {
  margin: 0 auto;
  }

table.main table.profile {
  border: none;
  }

table.blog {
  margin-bottom: 1ex;
  }

table.blog table.blog {
  }

table.blog td {
  background-color: #222526;
  }

table.blog .spacer td {
  background-color: transparent;
  height: 2ex;
  }

table.blog td td {
  background-color: inherit;
  }

table.blog table.blog td {
  }

table.blog,
table.blog a {
  }

table.blog p {
  }

table.blog table.blog td p,
table.blog table.blog td ul {
  line-height: 1.75em;
  margin-left: 8ex;
  margin-right: 8ex;
  }

table.blog table.blog td * {
  }

table.blog table.blog td * * {
  }

table.blog table.blog .blogSubject {
  line-height: 1em;
  margin-top: 1em;
  position: relative;
  margin-left: 4ex;
  margin-right: 4ex;
  text-indent: -2ex;
  }

table.blog table.blog .blogContent {
  }

table.blog table.blog .blogContentInfo {
  clear: both;
  line-height: 1em;
  position: relative;
  margin-left: 2ex;
  margin-right: 2ex;
  }

table.blog table.blog .blogContentInfo,
table.blog table.blog .blogContentInfo a {
  font-size: 11px;
  font-family: Verdana;
  color: #335A66;
  }

.blogContent img {
  background-color: white;
  padding: 1ex;
  margin: 1ex;
  }

.blogCommentsProfile,
a b {
  font-weight: normal !important;
  }

.blogCommentsProfile a {
  font-size: smaller !important;
  }

.blogComments .blogComments { /* comments container block */
  padding: 2ex;
  }

.blogComments .blogComments p {
  line-height: 1.75em;
  }

.blogComments .blogComments .blogCommentsContent {
  font-family: Georgia, "Times New Roman", serif !important;
  }

strong font,
strong font a {
  color: black !important;
  }

.miahz-blog-header {
  text-align: left;
  font-family: sans-serif;
  font-family: Arial;
  font-family: Lucida Grande;
  font-family: Lucida Sans Unicode;
  font-size: .75em;
  background-color: #222526;
  padding: 1em 2em;
  }

.miahz-blog-header h1 {
  font-size: 1.5em;
  }

.miahz-highlight {
  color: #ffdf00;
  }

/* miahz.com negative-space-effect datestamps */

table.blog td {
  position: relative;
  overflow: hidden;
  display: block;
  }

table.blog td td {
  display: table-cell;
  }

	table.blog p.blogTimeStamp {
	  color: #000000;
	  font-family: Georgia, "Times New Roman", Times, serif;
	  font-weight: bold;
	  text-align: right;
	  text-transform: lowercase;
	  font-size: 35px;
	  margin: 0;
	  position: absolute;
	  top: -23px;
	  right: -10px;
	  text-align: right;
	  }

I can try to answer questions, but like i said—it’s been a while since i messed with this. There might even be problems or errors with the code. If it blows up your profile it’s not my fault. I spent time working on this, so i’d encourage you to put in some effort to change some colors or something and not straight jack it. Use it as a jump-off to create your own look. Holler at me with some link love if you like it or end up using it.

When major breakage is encountered it’s usually easiest for me to just copy the related CSS files from the release classic.jar. That gives me a working baseline. From there, it’s a lot of whittling unnecessary code and unstyling native-look properties to a bare-minimum stylesheet.

CSS often comes from Mozilla in no kind of order, so at some point i usually rearrange stylesheets so they make sense to me. That means grouping styles related to the same elements, usually with hierachical indentation, and then ordering things in some logical way—usually using the source XUL as a reference. DOMI helps here.

Even with DOMI there’s a lot of trial and error as i narrow in on the elements and selectors i need and want to style. Around this time—when i have a good grasp of what is doing what, and why i’m styling it a certain way—is when i add as much commenting as i can. Two years later i wish i would have been completely thorough, but the good bit of comments i did make have been priceless.

Eventually, i replace the entire stylesheet with original selectors and properties with consistent formatting that works for me. Often i find that most instance-specific styles are unnecessary for this theme, and i’ll remove just about all of the styling rules that were in the original Winstripe theme. It was a goal of mine to have solid global styles that could cascade down and work in as many situations as possible, relying on global element and class styles as much as possible. It’s also due to the clean, simple look i was going for.

The hack originated as a way to get the old Go button to match the other toolbarbuttons in my theme. I then began using it as a way to dynamically increase button sizes when space was available, according to Fitts’ Law of interaction design (bigger targets are easier/faster to hit).

The focus ring for button elements had drifted slightly out of alignment since 1.0, which i’d guess is something related to Bug 151375. I used the -moz-outline property to draw the dotted line, and it had expanded out by 1px. The -moz-outline-offset property looked like it might get the job done. So i added it with a value of -1px, and it did the trick nicely. Not sure about backwards-compatibility, but i’m also not all that worried about it.

Firefox looks less busted than Flock did in its first fitting. I think the main visual oddity is the feed icon dealy in the Location Bar, which needs an icon and some tailoring. Behind the scenes, the biggest movement will be getting the new Options window working. There’s some slight unstyling in the Extensions and Downloads windows that needs to be synced up. The Page Info dialog tabbox also lost a bit of styling, but should be trivial to fix. The Help window has the Back/Forward button dropmarker bustage again; seems like i had to fix the exact same thing for 1.0.

I guess i’ll also need to add in support for the new focusable tabs. Not yet sure if that’s going to require any heavy lifting.

I’m sure i’ll find more little nits and picks as i dig more.

1. Indent descendant and related rules. I couldn’t imagine maintaining an entire theme without structurally-indented stylesheets. They mate perfectly with the XUL hierarchy. I’ll often insert empty selectors to fill in the structure of the stylesheet so it’s easier to follow and debug later.
2. Use shorthand properties. Using shorthand properties may cut down on file size, but i sometimes find it easier to test and debug with full rules written out so i can change, remove, or comment out individual properties line by line. I’ll also sometimes use a shorthand group and then follow it with a specific longhand property which overrides the previous rule. File size is less of an issue with XUL themes since the stylesheets are used locally and don’t have to be downloaded, so i’m less concerned about being “efficient” in this way.
3. Divide your stylesheet into sections. Firefox’s defualt theme stylesheets are often terribly convoluted from years of patching. Grouping things together logically keeps you organized and helps prevent redundant or conflicting style rules. Using commented “headers” (or flags) to break up a sheet into logical sections goes hand-in-hand with the first tip. You can have the cleverest code in the land, but what good is it if you can’t read it when it’s time to update? When scanning thousand-line sheets you need these visual speed bumps to quickly get your bearings. I even have multiple levels of headers for sections, subsections, etc. Doesn’t matter how you format it as long as you’re consistent. Just be careful with all these comments—one little slash can drive you crazy.
4. Let the cascade flow. This tip about the cascade is doubly important with XUL themes. Writing efficient top-down CSS makes it easier to effect changes throughout the stylesheet and the entire theme. Keep the lowest common denominators in the top-level base elements, then style variants using more and more specific selectors and properties down the line. On the large scale, having well-defined global element styles goes a long way towards building a strong theme. You’ll spend less time defining styles for browser and other features if they’re properly inheriting styles from the global set. For example, toolbarbuttons are used everywhere and you can inject styles that they’ll all inherit in global/toolbarbutton.css, instead of styling each instance scattered throughout the UI. That makes for efficient CSS and consistent theme design.
5. Organization strategies. The fifth tip wasn’t exactly a tip—more of a summary with some suggestions for how to use the preceding tips.

While i’m at it, i’ll go ahead and add a few theme-specific tips of my own.

• Comment, comment, comment. The inner-workings of Mozilla are mysterious. Your style rules could be even more mysterious. Write comments. Do it now. You won’t know remember later.
• Optimize your stylesheets. The quality of your CSS rules can have a real affect on how fast your theme is rendered. Optimize your stylesheets using the guidelines in the Writing Efficient CSS document at the Mozilla Developer Center.
• @import. Break out large sections to external stylesheets with @import. I moved all my bookmark styles from browser/browser.css to browser/bookmarks.css which i @import back into browser.css. Functionally exactly the same, but easier to manage as separate files.
• The underscore hack. This is probably my favorite. The quickest way to disable a property is to tag an underscore (_) to the front of it. Gecko sees the underscored properties and doesn’t recognize them so they are ignored. Saves so much time when testing code or trying to isolate bugs—you can leave the properties in place and simply “turn them off” without deleting or changing them. And it’s way quicker than trying to wrap stuff in comments. Plus, they visually stand out in the stylesheets, so you can easily identify which properties are disabled. Use this with longhand properties for very flexible style testing. Beware—last time i checked, this trick doesn’t work in Internet Explorer because it incorrectly parses the underscored properties as normal.
• Identify with big bold color. Use big, off-colored borders or backgrounds to help identify or find the selectors for elements you want to target.

An example snippet showing some of the ideas mentioned above:

/* =====| about.css |===== ===== */
 /* styles for extension/theme About dialogs */

#genericAbout {
  width: 30em;
  }

#clientBox {
  }

	#extensionName {
	  font-size: 1.25em;
	  font-weight: bold;
	  }

	#extensionVersion {
	  margin-left: 4ex;
	  }
		#extensionHomepage {
		 /* Visit Home Page links */
		  margin-right: 0;
		  padding-left: 1px; /* so outline doesn't overlap text */
		  _background-color: magenta;
		  cursor: pointer;
		  }

technorati tags: CSS, Mozilla, Firefox theme, theme, tips, XUL

That’s why i love stopping by sites like Joe Clark’s fawny.blog [via]. So much going on typographically. He lets the words speak. He literally puts more meaning into one paragraph than i don’t even know how to finish this analogy. Somehow so visually appealing, yet nary a graphic in sight. His stylesheets list over a dozen acceptable font faces so if you happen to have one of those fonts installed on your system, the page is rendered using that face instead of one of the boring standards. Well done. Forget Web 2.0. Here’s to over-populated font sets.

Interesting how there was a season of calm for theme developers as 1.0 was stabilized. This new development will hopefully be motivation to get going again myself.