fligtar's blog » css

Comments are not status updates

Justin Scott (fligtar) — Sun, 02 Aug 2009 22:08:54 +0000

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;
    }
}

fancypants: a new Bugzilla skin

Justin Scott (fligtar) — Fri, 24 Apr 2009 01:21:40 +0000

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.

Removing Dashcode’s Unwanted List Underline

Justin Scott (fligtar) — Fri, 06 Feb 2009 08:23:25 +0000

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:

.listRowTemplate_template {
    position: relative;
    list-style-type: none;
    height: 24px;
    overflow: hidden;
    margin: 0px;
    padding: 0px;
    border-style: solid;
    border-top-width: 0px;
    border-right-width: 0px;
    border-bottom-width: 1px;
    border-left-width: 0px;
    border-color: rgb(224, 224, 224);
}

We’re going to fix this problem by changing the two properties in bold above. Ideally, we would be able to add a :last-child selector to remove the border from the last row, but WebKit doesn’t support :last-child, only :first-child. So we’re going to have to change the border to being at the top of each row instead of bottom.

In the above CSS, change border-top-width to 1px and change border-bottom-width to 0px. Next, add this below that group:

.listRowTemplate_template:first-child {
    border-top-width: 0px;
}

This tells the first row of the list to not show its top border, and now we’ll get a rounded corner list that looks correct:

Site Identity, Part 1

Justin Scott (fligtar) — Wed, 02 May 2007 14:21:45 +0000

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:

    
        
        
        
    
    
        
        
    

… and the gradient is 2 lines more.

The process I went through to create this reveals why it took longer than expected:

Determine color scheme
Make shiny bar
Place shiny bar
Make 4 versions of logo that I’m not happy with
Make 2 entirely functional menus before deciding I want the ribbon to drop down
Fight with IE
Realize that some sites (blog and LSU map) can’t use the gradient
Separate gradient from shiny bar and redo that area of CSS
Deploy to all sites
Fight with trac’s CSS which did not play nicely with mine
Win!

I called this Part 1, but my current plan is basically:

Implement Ribbon
…
Profit!