Facebook recently changed the way comments appear from this:
to this:
You can add this to your userContent.css in Firefox to set it back to having a line break after the person’s name.
@-moz-document url-prefix(http://www.facebook.com/) {
.commentable_item .comment_box .comment_content .comment_author {
display: block !important;
}
.commentable_item .comment_box .comment_content .comment_actual_text {
padding-left: 0 !important;
}
}
There’s been a lot recent discussion on Bugzilla’s UI. I figured I’d share some work I started last month on a new non-default skin for bugzilla.mozilla.org. I, along with a few alpha testers, have been using it via userContent.css, and I’m really loving it. It has a lot of things I consider to be improvements, although there’s only so much you can do with pure-CSS skins.
I’m working on bugfixes and tweaks still, but am hoping to have it ready for general use soon.
While using Dashcode to create a dashboard widget, I came across an annoying styling bug that’s not as easy as it could be to fix, although it’s still pretty easy. If you use a list part in your widget, you have the option of rounding the corners. This is what corners rounded with a 10 pixel radius look like:
You may notice that there’s now a horizontal line at the bottom of the list that should have been affected by the corner rounding, but was not. To fix this, open your CSS file and find the .listRowTemplate_template selector. It should look like this:
This week I decided I want to work on my site and extensions a bit before I live and breath Mozilla for the next 3 months. Enter the ribbon. It’s something I’ve wanted to do for quite awhile, and it took a bit longer than I expected.
I added what I’m calling a ribbon (unrelated to Office 2007) to the main fligtar.com sites, like this blog. Clicking on it will bring down a menu of other things on fligtar.com.
I wanted to be able to easily modify an existing site to use this style and I wanted to be able to modify the menu content in one place, but I didn’t want to use PHP.
I’m pretty happy with the result (I won’t say “Mission Accomplished”), as including the ribbon without gradient can be done by:
<html>
<head>
<link rel="stylesheet" href="http://g.fligtar.com/ribbon.css" type="text/css">
<script language="JavaScript" type="text/javascript" src="http://g.fligtar.com/jquery.js"></script>
<script language="JavaScript" type="text/javascript" src="http://g.fligtar.com/ribbon.js"></script>
</head>
<body>
<div id="ribbon_menu" style="display: none;"></div>
<div id="ribbon"><div id="ribbon_logo"></div></div>
</body>
</html>
… and the gradient is 2 lines more.
The process I went through to create this reveals why it took longer than expected:
I called this Part 1, but my current plan is basically: