PDA

View Full Version : Deus Ex: Human Revolution Facebook theme



DaedalusIcarusHelios
10th Jul 2010, 08:00
Hello, I have a Deus Ex: Human Revolution theme for Facebook over at userstyles.org. If you've never heard of that site, it is for applying CSS-only themes to websites via the Stylish add-on for Firefox (also for Chrome). You can also apply it in other browsers with different methods and varying success. This only appears on your own browser as it is applied client-side.

Anyway, the theme I made is setup with a choice of 24 wallpapers (all stills from the high-resolution E3 trailer), and also has a choice of where to put the Deus Ex: Human Revolution logo (which corner). The choices are made at the page (http://userstyles.org/styles/33421).

Please check it out, and let me know what you think.

http://img12.imageshack.us/img12/8293/facebookdeusexhumanrevo.th.png (http://img12.imageshack.us/i/facebookdeusexhumanrevo.png/)

hem dazon 90
10th Jul 2010, 08:31
looks good

neilthecellist
11th Jul 2010, 16:53
Looks good, but preview options are horrible, none of the options correspond to the order of the Imageshack links. Also, no thumbnail previews make it insanely difficult. Out of inconvenience and multiple failed retries, I gave up on your FB mod.

DaedalusIcarusHelios
11th Jul 2010, 22:05
Looks good, but preview options are horrible, none of the options correspond to the order of the Imageshack links. Also, no thumbnail previews make it insanely difficult. Out of inconvenience and multiple failed retries, I gave up on your FB mod.

At the top, it lists the backgrounds in the order of the options. So image 20 is A, 21 is B, etc. Yeah, numerically its not in order, but the listing is in the same order as the choices. That's confusing, so I labeled each one with the corresponding letter choice (so the first one is A). The only reason I didn't start with 1 is so that #15 is the default option (first option). Sorry for the confusion.

I did also make another theme that's the same but without the options. It just installs with the image #15 (the same in the preview picture), with the logo in the left bottom. It also works better for Chrome (using Stylish) since for some reason the theme with the options doesn't give an install link.

So try this instead:
http://userstyles.org/styles/33465

Angel-A
12th Jul 2010, 02:01
Oh, wow, this makes me want to use my Facebook account...
And get Firefox...

maddermadcat
12th Jul 2010, 02:56
I don't think I've ever seen that sort of glow effect on a webpage. How'd you pull that off?

DaedalusIcarusHelios
12th Jul 2010, 06:25
I don't think I've ever seen that sort of glow effect on a webpage. How'd you pull that off?

Not sure if you are referring to the glow around certain elements or text link glow hover effect, but the first is using -moz-box-shadow (-webkit-box-shadow is the equivalent for Chrome users...I'll get around to add it soon hopefully). The links glow using the text-shadow effect. It's all CSS. Most regular pages aren't going to use such effects much if at all since users with Internet Explorer or older browsers won't be able to see such effects.

Keir
12th Jul 2010, 22:05
I'm all over this. Very cool, thanks for sharing :thumbsup:

Thirdeyeop3n
12th Jul 2010, 23:39
This is amazing thanks a lot for this!!! Do you plan on giving us Chrome users the option to customize in the future?

DaedalusIcarusHelios
13th Jul 2010, 13:51
This is amazing thanks a lot for this!!! Do you plan on giving us Chrome users the option to customize in the future?

The option to customize is a feature with the userstyles.org site. I've informed the guy running it (also the same guy that makes the Stylish add-on) and he noted that he doesn't have the logic setup for Chrome yet. So at some point, it may work. It's a beta feature (to customize before installation).

Alternately, with Stylish, you can view and edit the code. In the top of the code, you'll see a section like this:


html, body, #nonfooter, #booklet, .UIFullPage_Container, .home, #facebook, .profile{ background: url("http://img695.imageshack.us/img695/8978/dxhrlogo.png") fixed no-repeat right bottom, url("http://img94.imageshack.us/img94/8995/dxhr24.jpg") #151507 fixed no-repeat center center !important; color:#ffffff !important; background-size: auto, auto 100% !important; }

The first image is the logo. Where it says "right bottom", that's where you can manually change it to the position you want it to be. So "left bottom", "left top", "right top" are valid options. You could do center for either of those two if you really wanted to, but I think the logo looks best in one of the corners.

The second image is the wallpaper image. Just change the URL to one of the other images I listed on the style's page. Then just save it.

I hope that helps.

ChfMojoRising
15th Jul 2010, 03:33
Make one for Safari 5 and I'll be all over it :D

DaedalusIcarusHelios
15th Jul 2010, 21:56
Make one for Safari 5 and I'll be all over it :D

I haven't tried it with Safari, but apparently if you can get Greasekit going (equivalent to Greasemonkey), then it should theoretically work. I found this page for getting it going on a Mac: http://www.simplehelp.net/2007/11/14/how-to-run-greasemonkey-scripts-in-safari/

I am on Windows, so I can't try it. I can't find a way to do it for Safari for Windows with a cursory look.

Edit: It looks like it can't be applied to Safari on Windows. But the method above for Macs should work.

l3wdandcr3wd
17th Jul 2010, 09:12
I'm trying to use this with google chrome, but I cannot edit the code to change the wallpaper.
I'm not very code literate, and I seem to not be able to edit it at all, any help with this would be greatly appreciated.

DaedalusIcarusHelios
20th Jul 2010, 14:36
I'm trying to use this with google chrome, but I cannot edit the code to change the wallpaper.
I'm not very code literate, and I seem to not be able to edit it at all, any help with this would be greatly appreciated.

Okay, when you are editing the code, near the top, look for this part:


html, body, #nonfooter, #booklet, .UIFullPage_Container, .home, #facebook,
.profile{ background: url("http://img695.imageshack.us/img695/8978/dxhrlogo.png")
fixed no-repeat right bottom,
url("http://img94.imageshack.us/img94/8995/dxhr24.jpg")
#151507 fixed no-repeat center center !important; color:#ffffff !important;
background-size: auto, auto 100% !important; }

The part highlighted in Red is the wallpaper you'll want to change the URL for. If you continue having issues, can you post that part of the code you've changed? then I can look at it and fix whatever went wrong.

DaedalusIcarusHelios
29th Jul 2010, 18:28
BTW, I had updated the code a few days ago to account for Facebook changing theirs (which had caused white comment boxes and a few other bugs).

Corpus
29th Jul 2010, 18:52
Any way I can get this working on opera?

ChrisVCB
30th Jul 2010, 00:29
Stupid question, but is this something that appears for just yourself, or for everyone viewing your profile?

Thirdeyeop3n
30th Jul 2010, 00:51
Stupid question, but is this something that appears for just yourself, or for everyone viewing your profile?

It is just for you.

Xenoc
6th Aug 2010, 09:48
cool, if i didnt find facebook such a bore i would use it... well done

DaedalusIcarusHelios
12th Aug 2010, 04:30
Any way I can get this working on opera?

Yes, but you'll want to be sure to use the one without the pre-install options.

Here are some instructions (I don't know if there's an easier way):

Opera
1. Go to Menu > Settings > Preferences
2. Click on the Advanced tab
3. Click on Content
4. Be sure to Enable JavaScript if not already, then click the JavaScript Options... button
5. Be sure to choose a destination for saved javascript files under the User Javascript folder, then click OK
6. Visit the style's page (the one without options): http://userstyles.org/styles/33465
7. On the right of the style's page, click the Install as user JS button. This will show the javascript.
8. Click on Menu > Page > Save As
9. Be sure to save the file in the location you had defined above for your User Javascript folder
10. Once saved, be sure to refresh the page the style is for to see the changes

DaedalusIcarusHelios
3rd Dec 2010, 00:09
I just posted another update to my Facebook theme. Also, it appears that the theme with the options for wallpaper and logo placement works with Stylish for Chrome now as well, so Firefox or Chrome users can use the same one now:

http://userstyles.org/styles/33421

Unstoppable
3rd Dec 2010, 00:18
Looks badass. Too bad Facebook was invited by the C.I.A. Only reason I use it with a bogus name is to play the Dragon Age 2 game coming out.

Fox89
3rd Dec 2010, 00:26
Looks great. I tried installing it on Chrome but it caused major lag for some reason :( You know if this is common with your theme or if it's my computer?

ZakKa89
3rd Dec 2010, 00:31
I don't use facebook but thanks for contributing to the community.

DaedalusIcarusHelios
3rd Dec 2010, 01:16
Looks great. I tried installing it on Chrome but it caused major lag for some reason :( You know if this is common with your theme or if it's my computer?

It happens often enough, due to the effects. Some machines don't handle it well.

I use Firefox (latest beta, and Minefield) and it runs well on my laptop, but for Firefox I have even more effects (-moz-box-shadow), and the only issue I've ever had was that the native smooth scrolling showed performance issues with my Facebook themes, so I use one of the add-on alternatives.

[FGS]Shadowrunner
3rd Dec 2010, 01:21
Awesome contribution!

I check a couple of the Facebook DX sites daily... usually it's worth it.

DaedalusIcarusHelios
6th Dec 2010, 07:44
FYI, I posted an update to all my dark Facebook themes, including the DX;HR ones. It fixes the new Facebook profile changes.

Senka
6th Dec 2010, 09:28
Thanks for this, looks great.

Red
6th Dec 2010, 10:04
Hey, this actually isn't half bad! It's full good may I say. :)

Dr_Bob
6th Dec 2010, 17:45
This is brilliant.

I love you.

DaedalusIcarusHelios
30th Sep 2011, 07:36
I've made more updates (including support for Timeline)

With wallpaper options:
http://userstyles.org/styles/33421/facebook-deus-ex-human-revolution

Without options:
http://userstyles.org/styles/33465/facebook-deus-ex-human-revolution-w-o-options

With either of those, if you want to use your own wallpaper, you can edit the CSS code. Near the top, you can change the URL for the image.

For example:

background: url("http://i795.photobucket.com/albums/yy232/DaedalusIcarusHelios/Wallpaper/Deus%20Ex%20Human%20Revolution/dxhrlogo.png") fixed no-repeat left bottom, url("http://i795.photobucket.com/albums/yy232/DaedalusIcarusHelios/Wallpaper/Deus%20Ex%20Human%20Revolution/dxhr15.jpg") #151507 fixed no-repeat center center !important; background-size: auto, cover !important;

Change the red part to your image of choice.

IdiotInAJeep
30th Sep 2011, 07:55
http://i27.photobucket.com/albums/c164/Neuroticus/ThreadNecroCArd.jpg

MaxxQ1
30th Sep 2011, 08:55
http://i27.photobucket.com/albums/c164/Neuroticus/ThreadNecroCArd.jpg

Y'know... I've picked on necroposters myself quite a few times, but in the other messageboards I've been on, it's acceptable for the thread starter to necro his own thread.

IdiotInAJeep
30th Sep 2011, 08:58
True, sorry.

DaedalusIcarusHelios
1st Oct 2011, 02:36
LOL, sorry, I thought maybe some others might be interested since it had been a while. That card made me laugh though.