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.
It’s a neat idea. Check out what I did to CSS-Tricks :O
http://www.csspivot.com/kb6d9
Not bad, except I don’t like the jumping nav tabs on hover. (Of course, that’s Chris’s and not yours…. :) )
Here’s another variation of your pivot (adding a golden background): http://www.csspivot.com/832zT
Feedback and ideas are greatly appreciated!
They define the background of the html element.
…here it is with a full-on golden background:
http://www.csspivot.com/l014f
An obvious good use is to help someone fix their CSS on stackoverflow.com (or similar places); sometimes jsfiddle.net isn’t enough.
This is similar to Stylish; but you don’t need any CSS knowledge, right?
For CSS-Pivot you need to know CSS. I dunno how Stylish works
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.
Is there a firefox version of Stylish?
Stylish was originally made for Firefox. I think it _might_ be available for Chrome as well, though.
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?)
Yes. Stackoverflow.com doesn’t allow me to change anything. Anyone know why?
They most likely employ a bit of JS “frame busting.” Essentially…
if (top != self) {
top.location.href = self.document.location;
}
Definitely working on it — not sure if we can catch all framebusters though.
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.
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.
I think that’s a pretty big reason. : )
Is this what they use on Stumbleupon.. ? Thats’ some cool stuff!
This is a great idea
It seems to me that the most useful case is for helping people debug CSS problems, then sharing the tweaks back to them. I thought it might come in handy, so I made a bookmarklet for it http://twofishcreative.com/michael/blog/2011/03/28/css-pivot-bookmarklet
Wow, awesome! Linked to your post from the footer of csspivot.com.
I think the big advantage of csspivot is the extremely easy sharing — just send someone a short link and they’ll see a live version of the design. Could replace sending images around in many instances.
There are still a few problems — some pages don’t load properly or get out of the iframe (i.e. spiegel.de), and some character encoding issues. We have been working feverishly this whole weekend and will continue to improve the app.
Thanks for all the feedback — keep it coming!
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. :)
Interesting – I’m using Chrome and it looks perfect.
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/
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.
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.
Why do you think it’s named CSS ‘Pivot’?
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 :)
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.
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.
I meant darker background… also I have a new link:
http://www.csspivot.com/hcIHO
My bad. ; )
With enough time to mess around this could be the new css Zen Garden.
Here’s mine: http://www.csspivot.com/R17CH
Very nice :)
I’ve been wanting to be able to do this for ages, now I can:
http://www.csspivot.com/tUxGe
Refined twitter front page:
http://www.csspivot.com/rsYbo
I like how its a bit more minimal.
What a great idea ….i think its new idea implement to the CSS
I use css stylish plug-in for Firefox.
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
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
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