• This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn more.

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.