XF 1.4 Orange Sign-Up-Button / which code changed ?

[erich37]

may I ask what kind of code has been changed in order to fix this issue ?

https://xenforo.com/community/threa...ls-to-work-intermittently-and-randomly.68800/



I am using the "Sign-up Button"-Code in a "Notice", but still have the issue that the "Sign Up Button" which I have in my "Notice" is not doing anything when it is clicked at the white-colored outer ring.

I seems I am still using the old code before this bug was fixed.


Many thanks!

 

[Mike]

I believe they were "top" (and maybe "left") CSS rules that were added in the active state (to move the button, making it look like it has been pressed).

 

[erich37]

Dear @Mike

I have added this code to the active state and the button is moving a bit, which is perfectly fine.

#SignupButton:active
{
position: relative;
top: 2px;
}

However, the issue I have is that when I click into the "white colored area" of the button, I do see the pointer (the cursor is showing the hand-symbol), but when I click then it does not open-up the Login-overlay.
Meaning: it shows the "hand-pointer", but when clicking the button, nothing is happening.
Is this some other code which is responsible for this (ahref or some JS ?) ?


It is working fine here at xenforo.com, but I can not figure it out of how to make it the same at my website at which I have put the button into a "Notice".


I am talking about this "white colored area" of the button:

#SignupButton {
background-color: #ffffff;
}

Appreciate your help!

Many thanks!

 

[Mike]

have added this code to the active state and the button is moving a bit, which is perfectly fine.

It's that moving which is causing the issue. You'll need to remove it (or find another way to do it).

 

[erich37]

I have excluded the "moving", but it still does not work.

It seems the issue is coming from the class="inner" which I have put into the "Notice" and the associated padding: 3px; as this 3px-area is not click-able.




this my code in the "Notice":

Welcome to this website!<br />
<div style="margin-top: 1em; font-size: 80%">
This website is text text text.
</div>

<div class="MemberBox">

<div class="noticeButtonContainer">
<label for="" id="JoinRegisterButton"><a href="register/" class="inner">Join Free Now</a></label>
</div>

<div class="noticeLoginButtonContainer">
<label for="" id="MemberLoginButton"><a href="login/" class="inner">Member Log-in</a></label>
</div>

</div>

this is my CSS in template "extra.css":

.MemberBox {
padding-top: 10px;
}

.MemberBox:after { content: ' '; display: table; clear: both; }
@media (max-width: @maxResponsiveWideWidth)
{
.noticeButtonContainer, .noticeLoginButtonContainer { float: none; width: auto; text-align: center; }
.noticeButtonContainer > label, .noticeLoginButtonContainer > label,
.noticeButtonContainer > label > a, .noticeLoginButtonContainer > label > a { display: inline-block; }
}

.noticeButtonContainer
{
width: 170px;
float: left;
}

.noticeLoginButtonContainer
{
width: 170px;
float: left;
}




#JoinRegisterButton {
    background-color: #ffffff;
    border: 1px solid #FF7300;
    border-radius: 8px;
    box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.2);
    cursor: pointer;
    display: block;
    height: 30px;
    line-height: 30px;
    margin-left: 0px;
    margin-right: 20px;
    margin-top: 10px;
    margin-bottom: 10px;
    padding: 3px;
    text-align: center;
}

#JoinRegisterButton .inner {
    background: #FF7300 !important;
    border-radius: 4px;
    color: #ffffff;
    display: block;
    font-family: Calibri,"Trebuchet MS",Verdana,Geneva,Arial,Helvetica,sans-serif;
    font-size: 12pt;
    font-weight: bold;
    text-shadow: 0px 0px 3px rgba(0,0,0, 0.5);
}

#JoinRegisterButton:hover .inner {
    background-color: #ff500b !important;
    text-decoration: none;
}

#JoinRegisterButton:active {
box-shadow: 0 0 3px rgba(0, 0, 0, 0.2);
position: none !important;
top: none !important;
}


#MemberLoginButton {
    background-color: #ffffff;
    border: 1px solid #3F51B5;
    border-radius: 8px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
    cursor: pointer;
    display: block;
    height: 30px;
    line-height: 30px;
    margin-left: 0px;
    margin-right: 20px;
    margin-top: 10px;
    margin-bottom: 10px;
    padding: 3px;
    text-align: center;
}

#MemberLoginButton .inner {
    background: #3F51B5 !important;
    border-radius: 4px;
    color: #ffffff;
    display: block;
    font-family: Calibri,"Trebuchet MS",Verdana,Geneva,Arial,Helvetica,sans-serif;
    font-size: 12pt;
    font-weight: bold;
    text-shadow: 0px 0px 3px rgba(0,0,0, 0.5);
}

#MemberLoginButton:hover .inner {
    background-color: #303f9f !important;
    text-decoration: none;
}

#MemberLoginButton:active {
box-shadow: 0 0 3px rgba(0, 0, 0, 0.2);
position: none !important;
top: none !important;
}