Joonas

What if Digg was made by Girls

Saturday, 28. June 2008, 17:54:38

There was an article on Digg which gave me an idea to make custom User Style in Opera to resemble the girls' version of Digg.

I used basic CSS to replace some colors and a lot of CSS3 selectors to replace some texts and give happy colors for the comments. This is why this stylesheet works the best in a browser supporting CSS3.

How the heck do I use this in Opera?
I'm going to tell you how to enable this stylesheet on Opera 9.5. If someone have an idea how to enable these on any other browsers (preferably supporting CSS3), please send a comment.

Download digg-by-girls.css and save it to <your Opera directory>\profile\styles\user\
Open Opera and go to Digg's website
Right-click on the background, select Edit Site Preferences...
Open Display tab
Under the My Stylesheet, browse to that file you just saved.
Now refresh the page

And there you go! Now the only problem I had with this CSS was that this stylesheet makes your profile icon disappear on the top.

If you want to make your own version, I'll give you few tips.

Custom version

Basically you should know CSS markup, but if not, now is your time to learn.

Duplicate girls-by-digg.css and rename it to, for example, digg-custom.css
Restart Opera to show the new file it in the stylesheets list
Now select digg-custom.css
Note that using stylesheets this way affects all the sites you visit.
Make changes in the stylesheet and reload stylesheets (see below)

Make stylesheet editing faster
I myself am using a keyboard shortcut to reload edited CSS file. Without this function you'd have to restart Opera after changes, so it makes things faster.

Go to Preferences -> Advanced -> Shortcuts -> edit Keyboard shortcuts.
Now you can decide which keyboard shortcut you want to use to reload styles, I used ctrl-q
Quick-search for "q ctrl" and if it's used, delete it
Select application and click new and write "q ctrl" (or whatever you want)
On the action, enter "Reload stylesheets"
Now everytime you press ctrl-q, Opera reloads stylesheets from the drive, which makes stylesheet editing faster

That's all for today.

digg-by-girls.css

Webchat updatesChat updated, again...

Comments

Anonymous # 11. July 2008, 22:32

Monkey writes:

On Firefox 3 you can use Stylish to write a CSS and use it. I copied your CSS into stylish as a style and it kinda works. I'm not sure if it is working completely or the right way and I'm not going to test it but if you look at digg it is pink and looks just like your style. A problem though is that when you load it is says "Unknown pseudo-class or pseudo-element 'nth-of-type'. Ruleset ignored due to bad selector." Not sure if that matters or not but I guess you can tweak it to fix it. If you do make it 100% compatible for Firefox 3 you might want to upload it to www.userstyles.org

Joonas # 12. July 2008, 02:18

Thanks for the feedback.

The current Firefox 3.0 doesn't support CSS3 nth-of-type selectors I used to color the odd and even comments differently. I don't think there is a way to fix it (expect from FF developers

) Lets just hope the next FF version gets that support, and soon (this article keeps my hopes high: http://eriwen.com/css/next-firefox-3-release-support-css3/ ). I think it's wiser to wait for the support than removing those selectors, eh?

Btw thanks for the Stylish and userstyles.org tip. I'm going to download the plugin right away and wait for the FF update before uploading the style.

Cheers.

Edit: I quickly tested this style in Firefox noticed that FF also ignores content overwriting ( #h-sec .p-u a#h-upcoming strong { content: "new puppies"; } ) so that means no custom menu texts for you. It's a shame.