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

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

Discussion in 'XenForo Questions and Support' started by erich37, Jun 3, 2015.

  1. erich37

    erich37 Well-Known Member

    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!
     
  2. Mike

    Mike XenForo Developer Staff Member

    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 likes this.
  3. erich37

    erich37 Well-Known Member

    Dear @Mike

    I have added this code to the active state and the button is moving a bit, which is perfectly fine.
    Code:
    #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:
    Code:
    #SignupButton {
    background-color: #ffffff;
    }


    Appreciate your help!

    Many thanks!
     
  4. Mike

    Mike XenForo Developer Staff Member

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

    erich37 Well-Known Member

    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":

    Code:
    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":

    Code:
    .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;
    }
    
     
    Last edited: Jun 15, 2015

Share This Page