Third-party Login images

robertkety

Once upon a time, I stumbled across an ad-banner for Obsidian Portal. With only a passing interest, I created my account using the third-party login through Facebook. Years later, I have a minor obsession at tinkering with my campaign website, but I still have to login using the Third-Party Facebook login.
Sometime in the last year, I noticed that the image links for third-party login were broken. All four images linked to the same rpxnow site, so I never bothered reporting it until earlier in May. What I discovered is that the problem is well-known and will be corrected in the reforge of OP. Until then, those of us with CSS-OCD might want an alternative to broken image links appearing to guests looking at our sites.
I applied a variant of CSS code credited to Madartiste in the CSS Tidbit Compilation discussion to remove the broken image links and supersede the link with a custom button. Keep in mind that this code modifies CSS in the sidebar so it will likely require some tweaks to get it correct. It is part of "red" section noted in the "Knowledge Base":http://help.obsidianportal.com/kb/advanced/custom-css-for-your-campaign
For my site, I had to modify other elements in the sidebar to get the appearance correct.

The code itself is rather simple:
@ #openid-authentication-toggle a.rpxnow img, #openid-authentication-toggle a.rpxnow:active img {display:none;} @

^ This removes the broken images

@ #openid-authentication-toggle a.rpxnow:before, #openid-authentication-toggle a:before {
content: "Third Party Login";
font-family:"Morpheus";
font-size:14px;
color:#B40404;
font-weight:bold;
background-image:url("http://www.obsidianportal.com/assets/bg_table_header-efa160205251cdc0c1e3dc702239413a.gif");
border-style:solid;
border-color:#DAA520;
border-width:1px;
padding-top:2px;
padding-right:10px;
padding-bottom:2px;
padding-left:10px;
float:right;
margin-right:10px;
text-decoration:none;
} @

^ I used a custom font here, I don't recommend it. I've had compatibility issues in different browsers. The main code here is the "content" field, the rest is formatting for whatever you prefer. I chose to go with a text box that resembles a button (and matches the formatting in the rest of my site).

That's pretty much it. Let me know if you have any issues with the code.

GamingMegaverse

This is awesome! I implemented it, and it works great!
killervp
"A God...Rebuilt":http://www.obsidianportal.com/campaigns/a-god-rebuilt
"Duskreign's First Ever COTM":http://www.obsidianportal.com/campaigns/wyrmshadow/wiki_pages/112011
"OP's COTM April 2012":http://blog.obsidianportal.com/a-god-rebuilt-aprils-cotm/

robertkety

It looks like the original images have been restored. Although this workaround is no longer necessary, the code still works if you prefer not to have a rainbow of icons on your page.