XF 1.3 twitter login button not showing?

[Jay182uk]

Hi guys, these are my forums:
community.MMAFederation.com

If you try to login, you'll be able to see the standard 'login via' buttons - however, the login via Twitter button doesn't seem to be showing. The forums have been live for around 3 weeks now, and at the beginning the Twitter integration wasn't working, so it was only possible to login via Google and Facebook (this has never been an issue). On Tuesday, I gave the Twitter integration another go and it worked (users can now login via twitter), however, like I say, the button isn't appearing, and it's just text based instead. I've had a play with the CSS in the twitter template, but can't seem to identify the issue.

here's the code from twitter.css (in case it may be useful to post)

a.twitterLogin,
#loginBar a.twitterLogin
{
display: inline-block;
width: @eAuthButtonWidth;
height: 22px;
box-sizing: border-box;
cursor: pointer;

background-color: #eee;
background-image: -webkit-linear-gradient(#fff, #dedede);
background-image: linear-gradient(#fff, #dedede);
border: #ccc solid 1px;
border-radius: 3px;
padding: 3px;

color: #333 !important;
font-weight: bold;
font-size: 11px;
line-height: 14px;

}

a.twitterLogin span
{

display: block;
background: url('@imagePath/xenforo/twitter-bird.png') no-repeat;
background-position: left 0;
padding-left: 22px;
text-shadow: 0 1px 0 rgba(255,255,255,.5);
white-space: nowrap;
overflow: hidden;

}

a.twitterLogin:hover,
#loginBar a.twitterLogin:hover,
a.twitterLogin:active,
#loginBar a.twitterLogin:active
{
border-color: #d9d9d9;
background-image: -webkit-linear-gradient(#f8f8f8, #d9d9d9);
background-image: linear-gradient(#f8f8f8, #d9d9d9);
text-decoration: none;
}

 

[Paul B]

Revert whatever changes you have made to the templates.

 

[Jay182uk]

Revert whatever changes you have made to the templates.

just reverted back changes made to the twitter.css template, and the button still isn't showing
do you think this is likely be an issue with the image on the server side of things?

 

[Mike]

You can see it works here: http://community.mmafederation.com/index.php?help/

It's because you have invalid CSS in a template which interferes when they're combined:

.node .tinyIcon
{
background: transparent url('styles/Defiance/xenforo/xenforo-ui-sprite.png') no-repeat -112px -16px;
margin: 1px 4px;
display: block;
white-space: nowrap;
text-indent: 9999px;
overflow: hidden;
opacity: 0.50;
width: 14px;
height: 14px;



/*.node .feedIcon
{
background: transparent url('styles/Defiance/xenforo/xenforo-ui-sprite.png') no-repeat -112px -16px;
}*/

Specifically, I think that's node_list.css.

 

[Jay182uk]

@Mike - thanks Mike! so do I need to search for that code you provided me with, in the node_list.css template and fiddle with it then? (to find the invalid css)

 

[Jay182uk]

@Mike - I've tried taking that code you provided out all together (it IS in node_list.css), and it seriously messes the forum up! is there a bit of code in particular that is 'invalid' that I can take out or adjust, that you might think may fix the twitter button problem?
any help would be awesome!
thank you!!

 

[Mike]

The tinyIcon rule doesn't seem to be closed properly. There may be other errors though. You may need to revert templates and/or style properties if invalid CSS has been added.