MGoBlog Stylish Theme for Widescreen folks.

Submitted by El Wolverino on July 10th, 2008 at 1:30 AM

MGoBlog is freakin' awesome but the contents look cramped and all the real estate in widescreen monitors are left to waste. The resulting page looks like this -

http://img145.imageshack.us/img145/291/widescreenrw9.jpg

And the comments are well indented.

http://img401.imageshack.us/img401/81/commentsindentft6.jpg

 

  • Download the Stylish Firefox extension ( Theme only works in Firefox ). Go to https://addons.mozilla.org/en-US/firefox/addon/2108
  • Restart Firefox and go to mgoblog.com Click on the Notebook icon in the lower right hand corner of your screen. Select Write Style->For mgoblog.com..
  • Paste the following inside the curly braces ( { } )

    #banner, #container, #headercontainer, #header-region-container, #footer-region-container, #suckerfish-container {
    width: 1400px !important;
    }

    #page-right, #round-right {
    width: 1400px !important;
    }

    #mainContent {
    width: 980px !important;
    padding-left: 10px !important;
    padding-right: 10px !important;
    }

    #inside-content {
    width: 1400px !important;
    }


    body {
    font-family : Liberation Sans, sans-serif !important;
    font-size : 16px !important;
    }

    .indented{
    margin-left:50px !important;
    }

    .title{
    font-family : Georgia, serif !important;
    font-size : 32px !important;
    }

    • Give the description as "mgoblog widescreen" or something
    • Profit!
      ( It works for me. Hopefully for you too. If you like it support MGoBlog )
      ( If you have a wider screen, change the 1400s and the 980 to whatever value which is good for your screen )

      Comments

      JeremyB

      July 10th, 2008 at 11:41 AM ^

      Nice work. Tedious scrolling down is now a plague that only infects the 4:3 (or IE-using) commonfolk. I set the body text back to 12px Verdana though, just like mgoblog 2.0 had.

      JeremyB

      July 10th, 2008 at 11:48 AM ^

      Also, if you don't want to see everyone's avatar pictures, add the following code also within the curly brackets: div.picture{display:none;} This makes the comment threads take up much less space and fit many more on a screen. LESS SCROLLING FOR EVERYONE!

      eckzow

      July 10th, 2008 at 2:52 PM ^

      I'd never heard of Stylish before, so this is a double winner entry. I can think of more pages I'd love to use this on... Like Slauncha I played with it a little bit (made it a tiny bit wider even still), but overall GREAT!

      Daniel L

      July 10th, 2008 at 3:49 PM ^

      You can change the site banner to whatever you want with Stylish. It's a bit more complicated because you have to either use a Photobucket like host or hash the picture to Hex (intertubes have tools for doing this). But the moral of the story is, if you want naked man, you can have naked man. If you want to have a different banner per day, you can do that as well.

      JeremyB

      July 10th, 2008 at 4:32 PM ^

      You're right, it's because Blogger does not currently allow hotlinking of images. If someone would kindly host naked man photo on their web space, we could all have the naked man banner with the following code:

       div.clear-block#headercontainer{background:url("[your site here]/tobias-hopp.jpg") no-repeat;
      }
      div.site-logo img{visibility:hidden;}