Install this theme

Posts tagged: CSS

Anonymous
asks:
How did you get your scroll bar? Can I have the code?

Sure! In your CSS, add the following:

At the top:


html {
    overflow-y: auto;
    background-color: transparent;
}



Then, right AFTER the “body” property (also near the top), add the following…


@media screen and (min-device-width: 1025px) {
    body {
        position: absolute;
        top: 0;
        left: 0;
        bottom: 0;
        right: 5px;
        overflow-y: scroll;
        overflow-x: hidden;
        }

    ::-webkit-scrollbar {
        width: 14px;
        height: 6px;
    }

    ::-webkit-scrollbar-button:start:decrement,
    ::-webkit-scrollbar-button:end:increment {
        height: 5px;
        display: block;
        background-color: transparent;
    }

    ::-webkit-scrollbar-track-piece {
        background-color: transparent;
        -webkit-border-radius: 7px;
    }

    ::-webkit-scrollbar-thumb:vertical {
        height: 0px;
        background-color: #ccc;
        border:1px solid #b5b5b5;
        -webkit-border-radius: 7px;
    }

    ::-webkit-scrollbar-thumb:horizontal {
        width: 0px;
        background-color: #bbb;
        -webkit-border-radius: 3px;
    }
}


NOTE: This will only work for WebKit browsers (Safari, Chrome). All the other browsers can suck it. ;)

Also, if you’re in the Tumblr dashboard and want to see what this is about, go here.

tip for any Notations users who like big photos…

If you happen to be using my free and awesome Tumblr theme, Notations, you can put the following in the Custom CSS field of the Advanced tab to make your theme wider and even more glorious for photos:


#Main {width:870px;}
.Post .Photo img {max-width:100%;}


Just pick whatever width seems good to you. Mine is set as indicated and it looks rather smashing I must say. (You’ll want to make sure you have high-res photos turned on—also on the Advanced tab.)

I’ll be making a few other improvements (more options) to the theme one of these days soon, so stay tuned.