Tweaking the UI: Firefox settings for font and background color

[jdlk]

As I mentioned in another thread, I'd prefer a different font and background color for the reading pane in Feedbin. In case it helps anyone else, this is the code I have added to my UserContent.css file to change the settings for Feedbin in Firefox. I'm no CSS expert but it seems to work okay:

@namespace url(http://www.w3.org/1999/xhtml);
/* Feedbin font and leading for third column */
@-moz-document domain(feedbin.me) {
  body
  {     font-family:Calibri, sans-serif !important;
        font-size:14px !important;
        line-height:19px !important;
  }
 /* Feedbin background color of third column */
  .entry-content
  {     background-color:#DCDCDC !important;
  } 
}

[Klievhelm]

I don't know CSS, so this may be a mess, but it works in Firefox to give a more understated formatting to headlines while boosting the body text size a little. h1, h2, and body alter the article view, whereas h2.title alters the feed view. Thanks to jdlk for getting me started on it, and to Zegnat for fixing the brackets.

@namespace url(http://www.w3.org/1999/xhtml);
@-moz-document domain(feedbin.me) {

    /* Width of feed column. Default is 250px */
    td.feeds-column {
        width: 225px !important;
    }

    /* Width of entries column. Default is 300px */
    td.entries-column {
        width: 275px !important;
    }

    /* Font size of entries titles */
    h2.title {
        font-size: 13px !important;
    }

    /* Font size and line spacing of current article title */
    h1 {
        font-size: 24px !important;
        line-height: 30px !important;
    }

    /* Font size of current article subheadings */
    h2 {
        font-size: 20px !important;
    }

    /* Font size of current article body text */
    body {
        font-size: 15px !important;
    }
}

[Zegnat]

@Klievhelm you might want to add another } to the bottom there, to close the @-moz-document block. Else you might get weird results if you ever add more sites to UserContent.css. It’s a good idea to make sure you have just as many } as { when you do CSS 😄

You didn’t make a mess of it, that’s exactly what CSS should look like.

[Klievhelm]

Oops, fixed. Thanks for noticing it.

[Klievhelm]

Added tweaks for column width of the feeds and feed entries, as a way to get around not being able to directly change them by dragging in Firefox.

[jdlk]

@Klievhelm -- thanks for continuing the work on this. Very helpful, particularly the column width of the feeds and feed entries.