best wishes
MGoBlog Stylish Theme for Widescreen folks.
Filed under:
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!
( If you have a wider screen, change the 1400s and the 980 to whatever value which is good for your screen )
July 10th, 2008 at 1:46 AM | 
Well Done
Well Done
Right after the updated website I did the same thing with Stylish. Didn't change any fonts though.
July 10th, 2008 at 8:04 AM |
I changed the resolution a
I changed the resolution a
I changed the resolution a little bit, but this is awesome. Thanks!
July 10th, 2008 at 8:38 AM |
Nice, much better!
Nice, much better!
Nice, much better!
~rlc
July 10th, 2008 at 10:14 AM |
Bad Ass!
Bad Ass!
Maybe you invented the internets.....
No question, Jim.
July 10th, 2008 at 10:19 AM |
Uhhh what happened
Uhhh what happened
Not as good as the internet as you folks.....I closed Mozilla and went back to Mgo only to have the widescreen deal go away. How do you get it back?
No question, Jim.
July 10th, 2008 at 10:21 AM |
Nevermind...
Nevermind...
apparently when I click on the feed on my browser it doesn't change the site to widescreen....I need to type mgoblog.com to get it....
No question, Jim.
July 10th, 2008 at 11:41 AM |
Nice work. Tedious scrolling
Nice work. Tedious scrolling
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.
July 10th, 2008 at 11:48 AM |
hide user pics
hide user pics
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!
July 10th, 2008 at 1:04 PM |
Here's another great addition
Here's another great addition
Here's another great addition to remove sigs:
div.user-signature{display:none;}
July 10th, 2008 at 2:52 PM |
Winner!
Winner!
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!
July 10th, 2008 at 3:35 PM |
Thanks for the tip. For
Thanks for the tip. For
Thanks for the tip. For those running IE, yet another reason to make the switch.
Go Blue!! Viva La Revolucion!!
www.wolverineliberationarmy.com
July 10th, 2008 at 3:49 PM |
Also
Also
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.
July 10th, 2008 at 4:24 PM |
how?
how?
This is what I was trying, and it doesn't work:
div.site-logo{
background-image: url("http://bp3.blogger.com/_l4ZZFzs7VIs/SEjPTwaSp3I/AAAAAAAABDo/ep_9pW0F9kY/s1600-h/tobias-hopp.jpg");
}
div.site-logo img{
visibility:hidden;}
July 10th, 2008 at 4:32 PM |
You're right, it's because
You're right, it's because
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;}
July 10th, 2008 at 7:33 PM |
I can't find it, but what it
I can't find it, but what it
I can't find it, but what it does is hashes the image in such a way that hte HTML can be rendered as an image. When I find the link I'll post it. Otherwise, it'll just need a host somewhere. You should be able to use photobucket or imageshack.
July 11th, 2008 at 12:39 AM |
Imageshack works
Imageshack works
Just host off imageshack. Should be fine. My new banner code:
div.site-logo{
background-image: url("http://img55.imageshack.us/img55/9439/anthonytschernefq3.jpg") !important;
background-position: left top !important;
background-repeat: no-repeat !important;
}
div.site-logo img{
visibility:hidden !important;}
July 11th, 2008 at 11:07 AM |
Great
Great
Thanks, looks fantastic. Didn't think Mgoblog could get any better.
July 11th, 2008 at 2:12 PM |
Also
Also
Clear cookies and cache after making changes. Otherwise you'll get weird display issues.
