CSS Pivot

by: Chris Coyier

Mar 27 2011
41

CSS Pivot allows you to apply your own CSS to a site and then share the results (you get a unique URL which opens up that site in a top-bar/iframe dealy). Pretty clever stuff. If you saw a tweak of someone elses that you really liked and wanted to make it persist, you could use this Chrome extension.

I'm posting this as an article instead of a link so we get the comment thread thing going if anyone has any cool ones to share.

Subscribe to The Thread

  1. Rick Lamers

    It’s a neat idea. Check out what I did to CSS-Tricks :O

    http://www.csspivot.com/kb6d9

    • Michael Tuck

      Not bad, except I don’t like the jumping nav tabs on hover. (Of course, that’s Chris’s and not yours…. :) )

  2. Chris Hager

    Here’s another variation of your pivot (adding a golden background): http://www.csspivot.com/832zT

    Feedback and ideas are greatly appreciated!

  3. mu

    An obvious good use is to help someone fix their CSS on stackoverflow.com (or similar places); sometimes jsfiddle.net isn’t enough.

  4. Josep

    This is similar to Stylish; but you don’t need any CSS knowledge, right?

    • sebi

      For CSS-Pivot you need to know CSS. I dunno how Stylish works

    • Jordan

      Ya beat me to it – I was going to suggest this as well.
      Stylish, for those who don’t know is a similar add-on that works for Firefox, which adds CSS to any website that you specify. It also has a large base of pre-existing styles, and you can share them through it.

    • Chris

      Is there a firefox version of Stylish?

    • Jordan

      Stylish was originally made for Firefox. I think it _might_ be available for Chrome as well, though.

  5. Brandtley McMinn

    anyone having issues with opening a url and it just redirects you to the site without letting you add your tweaks?

    (ig: url: http://frys.com -> opens css input text field, then just loads frys.com via proxy?)

    • Mike

      Yes. Stackoverflow.com doesn’t allow me to change anything. Anyone know why?

    • Colin

      They most likely employ a bit of JS “frame busting.” Essentially…

      if (top != self) {
      top.location.href = self.document.location;
      }

    • Chris Hager

      Definitely working on it — not sure if we can catch all framebusters though.

    • Chris Coyier

      I’m not sure I’d even “work on it” – if people don’t want their stuff served in a frame (or in your case via a proxy via a frame) I’d honor that.

  6. Mestiso

    As ~Josep says, that makes no sense. There’s Stylish extension with huge custom stylesheets database at http://userstyles.org.

    I see only one reason to use it – quickly show someone a “live” personalized look, without trying/installing in own browser and/or looking at attached screenshot.

  7. Zeth

    Is this what they use on Stumbleupon.. ? Thats’ some cool stuff!

  8. rotub

    This is a great idea

  9. Peter Foti

    I might use Stylebot to fix the horrible font here at css-tricks.com. I’ve complained about it before (looks terrible in Chrome and Firefox). Goodbye myriad-pro-1… I wish I never knew ya. :)

    • TheDoc

      Interesting – I’m using Chrome and it looks perfect.

    • Peter Foti

      Here’s what it looks like for me in Windows XP with Chrome and Firefox 3.6. Note, I just installed Firefox 4 today and it does NOT look bad in Firefox 4.
      http://img23.imageshack.us/i/csstricks.png/

    • Chris Coyier

      It’s definitely not Myriad’s fault, I’m not sure who’s fault it is. I guess I’d say Typekit, because they are User-Agent based, so on platforms where fonts look shitty (or unknown) they just shouldn’t serve up the font and let it fall back.

    • Peter Foti

      Ah, you seem to be correct. It’s not Myriad’s fault. I just disabled scripting and the site looks fine. So some script is making it look terrible.

  10. Aaron Stone

    Why do you think it’s named CSS ‘Pivot’?

  11. Mike

    Great to see more and more sites using the html5 boiler plate. Even greater to see they’re leaving the hot pink highlighting in place :)

    • Jim

      more noticeably, the html5 boilerplate favicon and apple touch icon are still there.

      not sure that using the boilerplate, makes sense here, as the site only renders correctly in modern browsers anyway. and the only html5 i see on the site are the and tags.

      that being said, this is pretty cool. i can definitely see myself using this to show others what i’ve hacked together in firebug.

  12. Daniel Waltz

    Cool site! I like the idea behind this… check out my revision of Youtube!

    http://www.csspivot.com/v9d5p

    Lighter background, custom outline color for search box, blue logo.

  13. bob marteal

    With enough time to mess around this could be the new css Zen Garden.

  14. Chris Coyier

    Here’s mine: http://www.csspivot.com/R17CH

  15. James Brocklehurst

    I’ve been wanting to be able to do this for ages, now I can:

    http://www.csspivot.com/tUxGe

  16. Luke Walden

    Refined twitter front page:
    http://www.csspivot.com/rsYbo
    I like how its a bit more minimal.

  17. Mahi Uddin

    What a great idea ….i think its new idea implement to the CSS

  18. Ant

    I use css stylish plug-in for Firefox.

  19. iMagdy

    http://www.csspivot.com/p950v

    Google, with font-face for the logo, using font from Google Web fonts, and some changes in the background, and CSS generated content for the logo and some credits in the footer :P

  20. Colby

    This is an inherent feature in Chrome. Right click on a page and “Inspect Element”, and you can change any HTML and CSS you want on any element and see the results instantly.

    The only advantage of this service is that it is linkable.

    Colby

  21. Shane

    I like this idea and I think it is a great way to test out ideas on existing sites. Combine it with the power of Firebug and you got something pretty powerful. Now if I only knew how to use stylish to do the same thing.

    Check out my two alterations:
    YouTube – http://www.csspivot.com/F6MUC
    Facebook Homepage – http://www.csspivot.com/s54sl

    Thanks Chris for sharing this site! :D

This comment thread is closed. If you have important information to share, you can always contact me.