• 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?

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

Mike

XenForo developer
Staff member
#4
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:
Code:
.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.
 
#5
@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)
 
#6
@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!!
 

Mike

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