digg

Facebook Connect Join Digg About

Digg v3 - fluid width, tweaks, fixed right sidebar [WOW]

userstyles.org — This style gives Digg v3 a fluid width! Now people with smaller screens can use Digg without getting horizontal scrollbars. Also removes the ads. Also makes textboxes and menus look like the ones on the submit page, makes the comment box font normal size, makes the comment edit box bigger so you can see what you're typing.

Who dugg this? Made popular Oct 28, 2006

Digg DudeWhat is Digg?

Digg is a place for people to discover and share content from anywhere on the web. Digg surfaces the best stuff as submitted and voted on by the community. Take the Tour to learn more.

79 Comments

show profanity settings
expand all
  • egotripping, on 10/12/2007, -8/+44You've got Fox News and Limbaugh bookmarked?

    Loser
  • eplawless, on 10/12/2007, -8/+30If you're like me and you want to support Digg by clicking on the ads, replace the following code:

    /* remove ads, and useless "More..." link */
    div[class*="_ad"],
    a.more {
    display: none !important;
    }

    with this code, instead:

    /* remove useless "More..." link */
    a.more {
    display: none !important;
    }

    cheers.
  • kris33, on 10/12/2007, -15/+36This is the code:


    @namespace url(http://www.w3.org/1999/xhtml);
    @-moz-document domain("digg.com"),
    url("http://duggmirror.com/") {

    /*
    http://www.geocities.com/SoHo/Coffeehouse/9279/europe.mid
    Good music to code to!

    Changelog:
    - put back footer, there are useful links there
    - only style duggmirror front page, it messed up some mirrored pages; some other fixes
    - add round right corner to header; do not apply to labs.digg.com; some minor fixes
    - missed an !important
    - fixed sidebar
    - simplified moz-doc rules (I don't remember why I did it like that)
    */



    body {
    padding: 0 !important;
    }

    #container,
    #contents > div,
    .instruction {
    width: auto !important;
    }

    #container {
    background-image: none !important;
    }

    #contents {
    width: auto !important;
    margin-right: 180px !important;
    background-image: none !important;
    /* fix gap that sometimes shows on left */
    float: none !important;
    }

    #sidebar {
    position: fixed !important;
    top: 50px !important;
    right: 10px !important;
    background-image: none !important;
    padding-right: 0 !important;
    padding-top: 10px !important;
    }
    #sidebar > ul {
    margin-bottom: 1em !important;
    }

    /* fix header image - fix for real */
    #header {
    background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB8AAABQCAYAAADhoK6AAAAABGdBTUEAALGOfPtRkwAAACBjSFJNAAB6JQAAgIMAAPn%2FAACA6QAAdTAAAOpgAAA6mAAAF2%2BSX8VGAAAAF3RFWHRTb2Z0d2FyZQBQYWludC5ORVQgdjIuNiWOmEQAAAETSURBVGhD7dRrKgZxGIbx2y4QEZGICDm%2BbECIiIhECDm9OxAiIhIRIecFzUJmBbdD2cJcH%2BaZ%2Bn2%2B6%2Br5T0np0J5Ffb%2FjFFHDf8VjnCgQ2ZHnFtkje6YF4uAyzf3%2FK4%2FskT3TAnFwmeaOdx4HFweXaYEcH1zZ8L4pKh85MEUVo4emqHLsyBRVjR%2BbouqJE1NUM3lqimqnzkxR3fS5KaqfuTBFDbOXpqhx7soUNc1fm6LmhRtT1LJ4a4pal%2B5MUdvyvSlqX3kwRR2rj6aoc%2B3JFHWtP5ui7o0XU9Sz%2BWqKerfeTFHf9rsp6t%2F5MEWF3U9TNPAzTtFg8cuUGEfSR%2FYcZk%2BSxBSlaWqKDH4xjsSP7PnL%2Fg0pAN4mUMzbUgAAAABJRU5ErkJggg%3D%3D")
    !important;
    background-repeat: repeat-x !important;
    }
    /* put back the digg logo and left corner */
    #header span {
    background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAD4AAABQCAYAAABBP8ZuAAAABGdBTUEAALGOfPtRkwAAACBjSFJNAAB6JQAAgIMAAPn%2FAACA6QAAdTAAAOpgAAA6mAAAF2%2BSX8VGAAAAF3RFWHRTb2Z0d2FyZQBQYWludC5ORVQgdjIuNiWOmEQAAAS2SURBVHhe7ZnrTxVHGManf0QvWlsKBEIhoAgI1Xrpl6YXy0XEG4oFBC81vdFvbcFSQalQEMFWi1XUahuriW1sYsKHfjBpmngv0J5ESLidQjnhcL%2FD0zOb7GYdWXbnMPG0u3OSXwLvzPPO%2B5x3dnIy%2B8Qz64tBnPihxp0IcaJpZZdL4w7b8rLjTtvysuOy4w455ORWl1tdbnV7%2F4aXz7h8xuUzLp9xW15UyMNNHm7ycJOHmzzc7HQOyFPdTt204kV23Mq3ZKc5suN26qYVL7LjVr4lO80hT776iS1%2FmZk1iTz1WiEWJR90HOTp14uwOKXEcZBFbxzAktRSx0EWv1mM5zYcdhzk2fWfIyi9zHGQJckleCHjiOMgz6eUImRTuTAu%2F9qIvz2DUD9qbqO4yLV5cpGgtMMI3fKlMNw%2B07OzsxpBb32q5NbH3b39UOMi1%2BbJRYI3lCFsa6UwZmZmoCc4uVDJrca6%2FvHiUsNtBKcUCVvTn%2FpJyMYjCM88Kozp6WnoCU4t0nLTvykhaZ8hdGOpsDX9qZ%2BEZpQjYnu1MKampqAnNO2AsNwi6yRhmyoQmVXDBT2oOnq8mJycNCUsvVjJzWrUNXlyLUTDeiThmysRtfM4F%2B3dfZiYmLBEePpBJTerMYrPl3chGtYjidhahejsr7gYGxuDVSIySpTc7Hyj%2BHx5F6JhPZIXM6sRk3uCi9HRUeiJ2FwKlbnGaH6euD%2B5zDSsRxK5%2FRiW7TrJxfDwMPREbjmk6Y3GeOO0JpEa1iOJyqpFbH4dF0NDQ9ATta1M0xuN8cZpTSI1rEcS7Tt44naf4mJgYAB6ord9oemNxnjjtCaRGtYjiXn7a8TvOc1Ff38%2F9MRklmt6ozHeOK1JpIb1SJZmn0DCvjNc9PX1Qc%2FSHRWa3miMN05rEqlhPZLYnJNIfKeeC4%2FHAz3Lsio0vdEYb5zWJFLDeiSxuXVI2n%2BOi97eXuiJ3Vmp6Y3GeOO0JpEa1iNZnncKL717nouenh5YZXl2lZKbnW8Uny%2FvQjSsRxKX%2Fy1WvvcdF93d3bBCo6sVcTlHldz6%2BUZxs5xz5bKqYT2S%2BN2nser9C1y43W6Ycf%2BvFpy%2F9hsSdtUoudX5RnGzfHQ8Pqf6oVw8GtYjSdhzBi9%2FcJGbhNxjMCWvFkl7v9Fya%2FON4kzOrq4u6KF6tVajtefT6H2SFXvrsfrD7%2F%2BTdHZ2Qs8K3%2B4xq9WqhiT6jK%2FxGQ8UF67fwr0%2FW9DR0WEKNU7r9EfD%2BiMpH%2F%2BItQU%2FBIy7zQ%2FQ3t5uyp1GFxLzapQ6%2FdGwHklBbQPW%2BJ7xQJlva2uDGbf%2FcOHszzeQlH9cqdNsPh1nNY8YP3v9Hlb7Tt1AGafr0k6aQU2v3Fen1Wk2n46zGr1H8qDTgx2HfsJa37MTSPOPe21Cr4IvNtzHugKHGaevesbHx1F75Xes%2Byhwh9xj7zg1Tl%2F5jIyMoP6Xm8gsueqILU%2FUl3v0FQ81f6upBTWXbmB%2F1TWkFl7GKzbdBZpxtfN023u9XuW3dWtrK1wuF5qbm9HU1GQrHjKudp8eePRin14J0wu%2FwcHBR%2B6%2F2Puw%2F9v%2FcxrXXm7b%2BA9p3MbNndOa7LjsuEO%2BAbnVHdJozea%2FpachdTCU8XMAAAAASUVORK5CYII%3D") !important;
    background-repeat: no-repeat !important;
    height: 72px !important;
    position: relative !important;
    top: -33px !important;
    }
    /* right corner - taken from http://userstyles.org/style/show/590 */
    #header:after {
    content: " " !important;
    background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA8AAABQCAYAAADGDi9oAAAABGdBTUEAALGOfPtRkwAAACBjSFJNAAB6JQAAgIMAAPn%2FAACA6QAAdTAAAOpgAAA6mAAAF2%2BSX8VGAAAAF3RFWHRTb2Z0d2FyZQBQYWludC5ORVQgdjIuNiWOmEQAAAGvSURBVFhH7dTLSxtRGAXwr%2F9FWyyWSkUURWnFqlXjXjRYKi3xQVFUaqjauBNciE8UXySK0tKm2kaxCgoKQpZuCnWhkEBAs5KshJCEhASSHCcDDSiimdOdzIXfZriHezn3Yx48rBuGsCsVZgkbVG%2Bsh7U1rxemcVT1wvTC7vy36UOiD8m9HZJH9SNgyeOGUbAkyzgGljxpnABLst9MgiVP306BJc%2BapsGSnHczYMnz97NgSa5pHizJa14AS%2FJbrWBJQdsiWFL4YQksKWpfBkuKO1bAkpLOL2DJi66vYMnL7m9gSenH72BJWY8dLHllXgVLyj%2BtgSUVvT%2FBksq%2BX2DJ634HWFL1eR0sqVbCLKmxbIDRMPgbVLha6clic3LhKuWFfhwcE2Glo5bxXZyeX2gPGyzrcDhPEI%2FHtYUNAxuwbf9BNBpFamVcmGl0B%2Fb9vwiHw0gmk7eHa5VTjENbMM%2Ftwbp5iCPXmRpMJBJqUD3Z5XLhOrfbDY%2FHA6%2FXC5%2FPB7%2Ffr17134npcCAQwHXBYBChUAiRSASxWEwt56YlN37N8KMezrCo9FNp3H9l%2B3%2B1fQn3%2FLGAyRgv3wAAAABJRU5ErkJggg%3D%3D") no-repeat top right !important;
    display: block !important;
    height: 72px !important;
    position: absolute !important;
    float: right !important;
    margin-top: -61px !important;
    padding-bottom: 8px !important;
    }

    /* fix announcement bg */
    #announce,
    #announce > div {
    background-repeat: no-repeat !important;
    background-color: transparent !important;
    }


    /* remove ads, and useless "More..." link */
    div[class*="_ad"],
    a.more {
    display: none !important;
    }

    /* fix padding on footer */
    #footer {
    padding-top: 0 !important;
    }

    /* textboxes on submit page */
    #title,
    #bodytext {
    width: 100% !important;
    }

    /* fix stuff on submit page */
    .instruction,
    .instruction > div {
    background-image: none !important;
    }
    .instruction {
    border: 1px solid #DDDDDD !important;
    }


    /* make input fields look better */
    input[type="text"],
    input[type="password"],
    select,
    textarea {
    background-image: url("http://digg.com/img/form-back.gif") !important;
    background-repeat: repeat-x !important;
    background-color: #FFFADB !important;
    border: 1px solid #CBB945 !important;
    color: #776B1B !important;
    padding: 2px !important;
    line-height: normal !important;
    }
    select {
    padding: 0 !important;
    }

    /* fix comment box font, and make it bigger */
    textarea {
    font-size: 100% !important;
    height: 150px !important;
    }


    /* fix some other stuff */
    .sub-nav,
    .extra-nav {
    width: 100% !important;
    float: none !important;
    }

    /* move fade gradient right */
    #contents > .sub-menu {
    background-position: right !important;
    }

    .news-group > h2 {
    background-color: transparent !important;
    }


    }
  • bennyboy371, on 10/12/2007, -8/+28Just to piss you off -

    Adblock Plus:
    https://addons.mozilla.org/firefox/1865/

    Adblock Filterset.G Updater:
    https://addons.mozilla.org/firefox/1136/

    Have fun everyone!
  • FreakTrap, on 10/12/2007, -2/+20PocketPC
  • inactive, on 10/12/2007, -0/+13lol gildude. You're right.

    Television, newspapers, the film industry, magazines and 99% of the internet need a "real business model".

    Like charging your dumbass money for their products and services.
  • kris33, on 10/12/2007, -1/+12Actually I don't like this. (Am I strange?). The only difference I can see, is the smaller and uglyer text + bigger comment-box.
  • ryanjulian, on 10/12/2007, -0/+10Psh yeah! How dare someone provide a useful service to while expecting a few microseconds of your time as your eyes gloss over their adds! What kind of successful entrepreneur really thinks they can make money off of that crap??? [Larry Paige, Sergey Brin, Kevin Rose, et al walk in] Oh..........
  • JohnM5, on 10/12/2007, -2/+11This is just like the scripts created after v3 was just released. Different variations of this were practically flooding the homepage.
  • deinspanjer, on 10/12/2007, -0/+7I quickly grew attached to this style script as soon as I found it. Very necessary for a wide screen.

    The other thing I can't live without (although I might get buried for advertising :) is my Add Digg Control Greasemonkey script (http://www.yipyip.com/greasemonkey/ ). It alters the links of all the articles so that when you open the linked page, it will embed a Digg control so you can dig it directly from the linked page.

    I keep wanting to make a Digg article for it, but I feel guilty enough as it is advertising it in a comment. :)
  • bennyboy371, on 10/12/2007, -1/+8Its the extension for Firefox, Stylish
    https://addons.mozilla.org/firefox/2108/

    Its like Greasemonkey for CSS, basically.
  • BT-Wang, on 10/12/2007, -2/+8I realize that everyone hates ads, but a lot of ads aren't big or annoying.

    the only thing I block are the context ads that embed links in the content and bring up mouseover boxes that obstruct the article and don't go away, if you're enough of an ***** to use ads that are obstructive and don't work the way they were intended. you don't deserve the money you would potentially make off them.
  • vhold, on 10/12/2007, -1/+7"Also removes the ads."

    Ah, there's nothing quite like promoting a tool of a site's demise on said site.
  • inactive, on 10/12/2007, -1/+7FOR ALL THOSE THAT WANTED DIGG ON MOBILES:

    www.diggriver.com
  • edzieba, on 10/12/2007, -0/+5::EDIT:: Disregard, browser must be restarted for it to take effect.
  • zephc, on 10/12/2007, -1/+6Now if only digg supported multi-level comments *sigh*
  • therernospoons, on 10/12/2007, -1/+5@rhfb: How about a screenshot? Thanks!
  • allyant, on 10/12/2007, -1/+5He is using "Vista Inspirat", google it.
  • Celeron, on 10/12/2007, -3/+7The is getting hammered, and Duggmirror won't be helpful.
  • DiamondIce, on 10/12/2007, -2/+5If only more Web Devs did this on their own sites. We need to get away from this "sheet-of-paper" mentality.

    P.S.

    Is there any way to get the sidebar back on the left? I prefer it there.
  • pile0nades, on 10/12/2007, -0/+2I was surprised to see my script show up on Digg! Thanks webtech!
  • alej744, on 10/12/2007, -0/+2IntelliText?

    Ooooh I hate those..
  • SamKellett, on 10/12/2007, -0/+2So true. I respect the fact that I get free content on digg enough to not block their revenue in return.
  • razei, on 10/12/2007, -2/+4Install Stylish, choose 'create new user style', paste the css that kris33 posted.

    https://addons.mozilla.org/firefox/2108/
  • inactive, on 10/12/2007, -0/+2Installing this slowed down my page scroll speed.
  • inactive, on 10/12/2007, -0/+1
    just nice touch removing the little tm from the digg logo. I always thought that looked kinda weird.
  • Dested, on 10/12/2007, -2/+3Wow this is pretty wonderful. I kinda wish it wouldnt nuke the ads though. I support the websites I like.
  • peterw99, on 10/12/2007, -0/+1glad to see the fluid width finally. htanks.
  • SAOSiN, on 10/12/2007, -1/+2If you scroll to the very bottom of the page the site info collides with the right navigation bar. But still this looks great.
  • Jake2, on 10/12/2007, -2/+3I've got the link to the page above, but the link from that page to the 'How do I install styles?' thing is buggered. Could anyone tell me how to use the style, please? Thanks. :)
  • DiamondIce, on 10/12/2007, -0/+1"How does moving the menu from the left to the right get away from whatever your perception is of 'sheet-of-paper' mentality?"

    By "sheet-of-paper" mentality, I meant using fixed width. i.e. assuming everything is going to be viewed at the same resolution, thus treating web pages like sheets of 8.5*10 paper. Lots of devs don't realize that by making their pages static (like paper) they are causing problems for lots of people Wasted space on larger displays, and massive scroll bars on smaller ones).

    Also, moving the side bar to the left has nothing to do with sheets of paper, it's just a preference of mine, I'm used to it there.

    BTW, thx evilspoons, looks OK on my end.
  • deinspanjer, on 10/12/2007, -0/+1Not really much need for a Greasemonkey version. If you don't like the Stylish extension, you can take any of the style scripts and just stuff the content verbatim in your userContent.css file. The only thing you're missing out on is the fact that the CSS will be evaluated for every site.
    Digg has plenty of ID names that you can use to make the selectors restrictive enough though.

    I suggest giving Stylish a try though. I like it almost as much as I like Greasemonkey.
  • tagawa, on 10/12/2007, -0/+1You mean more like /.?
  • Snakedal337, on 10/12/2007, -1/+2I didn't like it because it cuts off some of the bottom of the menu (digglabs and what not) on 1024x768, tis a byproduct of the "position: fixed" under #sidebar.

    I just set it to absolute and now it stays still and works great.
  • Snakedal337, on 10/12/2007, -2/+2Eh, sidebar is slightly ***** up on the main page...
  • evilspoons, on 10/12/2007, -1/+1If you change "fixed" to "absolute" under the sidebar part, it scrolls with the page instead of being stuck in place. A nice side effect is smooth scrolling the frontpage becomes a lot less resource-intensive.
  • attila, on 10/12/2007, -10/+10This is great.. I've only been using it for the past few minutes and I'm already finding it incredibly useful. Great for the Digg power-users who want access to the menu all the time, no matter how far they've scrolled through comments, etc.. This userstyle is especially useful for those who gawk at DiggSpy.
  • rhfb, on 10/12/2007, -7/+7I love it. Looks great on my 1920x1200 res.
  • inactive, on 10/12/2007, -1/+1I tried using your script in Opera. Not working. Can anyone tell me what am I doing wrong?

    I saved this as "digg.css", place it in Operastyles folder.
    Entered the location of the style sheet in Site pref-->Display
    From Tools-->Pref-->Advanced-->Content-->Style Options.
    Set presentation to user mode.

    Please give instructions to use it in Opera also since opera also supports custom css.
  • idonthack, on 10/12/2007, -4/+4Or just put it in your userContent.css file. I don't know where it is under Windows but under Linux it's under ~/.mozilla/firefox/chrome/ or ~/.firefox/chrome/
  • zephc, on 10/12/2007, -2/+2@tvaughn05
    Man, you have a teeny tiny desktop.
  • inactive, on 10/12/2007, -2/+2How does moving the menu from the left to the right get away from whatever your perception is of "sheet-of-paper" mentality?
  • woodie, on 10/12/2007, -1/+1It's nice, and I used to use it, but then I found this one and love it more: http://userstyles.org/style/show/1204

    Screenie: http://img123.imageshack.us/img123/5553/afterdv3.png
  • dbr_onix, on 10/12/2007, -2/+1I agree, I've used an older UserStyle.chrome file that moves the toolbar to the right side, and one or two other changes (And has "normal" sized fonts). I tried the fluid-width version, and just didn't like it, guess I'm used to the thin comment colum (Which admitedly pretty sad)
    - Ben
  • dbr_onix, on 10/12/2007, -2/+1Damn this comment editing system,
    http://digg.pastecode.com/7356 - my userContent.css file, not UserStyle.chrome
    - Ben
  • razei, on 10/12/2007, -4/+3I've been using this for months, it's pretty nice. No vast amounts of white space to the side if you're on anything larger than 1024*whatever.
  • JaytB, on 10/12/2007, -5/+4This lets people with smaller screens use Digg? Actually when watching Digg on my mobile phone (Samsung D500, not one with the biggest screens at all), I already get great readability using the standard Opera-browser (java-applet). I can digg, comment and read most of the articles clearly.
    But since I'm a curious person I tried this on my home PC. Just so you know, it got uninstalled after about 30secs. Seems pretty worthless, well at least to me it does.
  • jarvolt, on 10/12/2007, -1/+0Works great on Opera. Have to switch to user mode each time, but still works.
  • tvaughn05, on 10/12/2007, -7/+6Yeah, I know.
    I just don't like the thing at all.

    Heres a screenshot of what it looks like on my computer:
    http://img119.imageshack.us/img119/8800/diggqk9.jpg
  • bigz, on 10/12/2007, -3/+1lol
  • Fetching more discussions...
    Show 51 - 79 of 79 discussions

  • Add a Comment

    Login or register to comment!
    Or, sign-in super fast with your Facebook account ...

© Digg Inc. 2009 — Content created and posted by Digg users is dedicated to the public domain | Terms of Use Updated | Privacy Policy
DIGG, DIGG IT, DUGG, DIGG THIS, Digg graphics, logos, designs, page headers, button icons, scripts, and other service names are the trademarks of Digg Inc.