XF 1.3 twitter login button not showing?

Hi guys, these are my forums:

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)

#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;


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


XenForo developer
Staff member
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.
@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)
@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! :D
thank you!!


XenForo developer
Staff member
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.