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

custom button in Notice / need CSS help

Discussion in 'Styling and Customization Questions' started by erich37, Apr 23, 2013.

  1. erich37

    erich37 Well-Known Member

    I have put a "Sign Up Now" image-button into a "Notice".

    The button is an image (.png) only which links to "domain.com/register".
    This button image is different than the "button-image" I do have in the sidebar which triggers the Login-dropdown. But I would like to have the same CSS-effect as my Login-button in the sidebar.

    How would the CSS look like for this Signup-button ? I am doing something wrong with the CSS as the URL-Link at the "Sign-up Button" is underlined and it only links to the URL (domain.com/register) when I directly hover over the text at the button. But I would like to have it link to the URL when I am hovering over the button.

    It seems my CSS skills are fairly limited :confused:


    Appreciate your help!

    :)
     
  2. Jeremy

    Jeremy XenForo Moderator Staff Member

    Posting CSS will help get you support.
     
    erich37 likes this.
  3. erich37

    erich37 Well-Known Member

    this code I do have put directly into the "Notice" itself:
    Code:
    <center>
    <div class="noticeButtonContainer">
    <div id="SignupButterfly"><a href="/register" class="schmetterling"><b>Sign Up Free Now!</b></a></div>
    </div></center>


    this is the code I do have put into template extra.css
    Code:
    .noticeButtonContainer
    {
    width: 370px;
    padding-top: 10px;
    }
     
     
    #SignupButterfly
    {
    background: url("@imagePath/xenforo/signup_button.png") no-repeat scroll center bottom transparent;
    border-radius: none;
    width: 358px;
    height: 73px;
    border: none;
    margin: 0 auto;
    text-align: center;
    display: block;
    cursor: pointer;
    line-height: 60px;
    }
     
    .schmetterling {
    color: #FFFFFF !important;
    font-size: 16pt;
    font-family: @button.font-family;
    text-shadow: 0px 0px 3px rgba(0,0,0, 0.5);
    text-decoration: none;
    }
     
     
    #SignupButterfly:hover .schmetterling {
    opacity: 0.5;
    -moz-transition: all 0.3s ease-in-out 0s;
    -o-transition: all 0.3s ease-in-out 0s;
    -webkit-transition: all 0.3s ease-in-out 0s;
    transition: all 0.3s ease-in-out 0s;
    }
     
     
    #SignupButton
    {
    background: url("@imagePath/xenforo/login_button.png") no-repeat scroll center bottom transparent;
    border-radius: none;
    width: 210px;
    height: 73px;
    border: none;
    margin: 0 auto;
    }
    


    The image named "login_button.png" is the one which I do have located at the "Sidebar" which triggers the Login-Dropdown. This is working fine. :)
    The image named "signup_button.png" is the one which I do have located at the "Notice" which directs towards "domain.com/register". Here I am having issues. :confused:

    :cool:
     
  4. EQnoble

    EQnoble Well-Known Member

    Try this....

    Code:
    <center>
            <div class="noticeButtonContainer">
                  <a href="/register" class="schmetterling">
                        <span id="SignupButterfly"><b>Sign Up Free Now!</b></span>
                    </a>   
            </div>
    </center>
    

    Code:
    .noticeButtonContainer
    {
    width: 370px;
    padding-top: 10px;
    }
     
     
    #SignupButterfly
    {
    background: url("@imagePath/xenforo/signup_button.png") no-repeat scroll center bottom transparent;
    border-radius: none;
    width: 358px;
    height: 73px;
    border: none;
    margin: 0 auto;
    text-align: center;
    display: block;
    cursor: pointer;
    line-height: 60px;
    }
     
    .schmetterling {
    color: #FFFFFF !important;
    font-size: 16pt;
    font-family: @button.font-family;
    text-shadow: 0px 0px 3px rgba(0,0,0, 0.5);
    text-decoration: none;
    }
     
     
    .schmetterling #SignupButterfly:hover  {
    opacity: 0.5;
    -moz-transition: all 0.3s ease-in-out 0s;
    -o-transition: all 0.3s ease-in-out 0s;
    -webkit-transition: all 0.3s ease-in-out 0s;
    transition: all 0.3s ease-in-out 0s;
    }
     
     
    #SignupButton
    {
    background: url("@imagePath/xenforo/login_button.png") no-repeat scroll center bottom transparent;
    border-radius: none;
    width: 210px;
    height: 73px;
    border: none;
    margin: 0 auto;
    }
     
    
     
    erich37 likes this.
  5. erich37

    erich37 Well-Known Member

    many thanks EQ !

    it works fine now regarding linking to the Register-URL now when hoving over the button.

    However, when hoovering over the button, the full button has the "opacity" instead of just the button-text.
    And the text of the Button (the text "Sign Up Free Now!") is underlined when hovering over the button. I do not want to have that text "underlined"

    I added "text-decoration: none" to the hover-CSS, but it still does not work :confused:
    Code:
    .schmetterling #SignupButterfly:hover  {
    opacity: 0.5;
    -moz-transition: all 0.3s ease-in-out 0s;
    -o-transition: all 0.3s ease-in-out 0s;
    -webkit-transition: all 0.3s ease-in-out 0s;
    transition: all 0.3s ease-in-out 0s;
    text-decoration: none;
    }

    Well, I guess I will work that out somehow during long nightly hours :(
     
  6. EQnoble

    EQnoble Well-Known Member

    start a convo and send me a link...
     
    erich37 likes this.
  7. EQnoble

    EQnoble Well-Known Member

    please mind that I am using your code exactly and you images are not available to me so I just see text on a background...

    try this...


    Code:
    .noticeButtonContainer
    {
    width: 370px;
    padding-top: 10px;
    }
     
     
    #SignupButterfly
    {
    background: url("@imagePath/xenforo/signup_button.png") no-repeat scroll center bottom transparent;
    border-radius: none;
    width: 358px;
    height: 73px;
    border: none;
    margin: 0 auto;
    text-align: center;
    display: block;
    cursor: pointer;
    line-height: 60px;
    }
     
    .schmetterling {
    color: #FFFFFF !important;
    font-size: 16pt;
    font-family: @button.font-family;
    text-shadow: 0px 0px 3px rgba(0,0,0, 0.5);
    text-decoration: none;
    }
     
    .schmetterling #SignupButterfly:hover  {
     
    -moz-transition: all 0.3s ease-in-out 0s;
    -o-transition: all 0.3s ease-in-out 0s;
    -webkit-transition: all 0.3s ease-in-out 0s;
    transition: all 0.3s ease-in-out 0s;
    }
     
    .schmetterling #SignupButterfly:hover b {
      opacity: 0.5;
    }
     
    #SignupButton
    {
    background: url("@imagePath/xenforo/login_button.png") no-repeat scroll center bottom transparent;
    border-radius: none;
    width: 210px;
    height: 73px;
    border: none;
    margin: 0 auto;
    }
    Code:
    <center>
            <div class="noticeButtonContainer">
                   <a href="/register" class="schmetterling">
                       <span id="SignupButterfly"><b>Sign Up Free Now!</b></span>
                    </a>
            </div>
    </center>
    
     
    erich37 likes this.
  8. erich37

    erich37 Well-Known Member

    many thanks for offering help on my issue (y)

    Very much appreciated! :)
     
  9. EQnoble

    EQnoble Well-Known Member

    This should mimic it exactly

    Code:
    .noticeButtonContainer
    {
    width: 370px;
    padding-top: 10px;
    }
     
     
    #SignupButterfly
    {
    background: url("@imagePath/xenforo/signup_button.png") no-repeat scroll center bottom #c0c0c0;
    border-radius: none;
    width: 358px;
    height: 73px;
    border: none;
    margin: 0 auto;
    text-align: center;
    display: block;
    cursor: pointer;
    line-height: 60px;
    }
     
    .schmetterling {
    color: #FFFFFF !important;
    font-size: 16pt;
    font-family: @button.font-family;
    text-shadow: 0px 0px 3px rgba(0,0,0, 0.5);
    text-decoration: none;
    }
     
    .schmetterling #SignupButterfly:hover  {
    -moz-transition: all 0.3s ease-in-out 0s;
    -o-transition: all 0.3s ease-in-out 0s;
    -webkit-transition: all 0.3s ease-in-out 0s;
    transition: all 0.3s ease-in-out 0s;
    }
     
    .schmetterling #SignupButterfly:hover b {
      opacity: 0.5;
      transition:all 0.3s ease-in-out 0s;
    }
     
    a[href]:hover.schmetterling:hover {
      text-decoration:none;
    }
     
    #SignupButton
    {
    background: url("@imagePath/xenforo/login_button.png") no-repeat scroll center bottom #c0c0c0;
    border-radius: none;
    width: 210px;
    height: 73px;
    border: none;
    margin: 0 auto;
    }
    Code:
    <center>
        <div class="noticeButtonContainer">
            <a href="/register" class="schmetterling">
                    <span id="SignupButterfly"><b>Sign Up Free Now!</b></span>
            </a>
        </div>
    </center>
     
    erich37 likes this.
  10. erich37

    erich37 Well-Known Member

    many thanks, that works just perfect (y)

    Where or how would I have to put the CSS for the "button active", so that it gives the click-effect when clicking the button.
    The same code as we already have at the default XF "Sign Up Button" for "Active State":

    Code:
    position: relative;
    top: 2px;

    BTW: I have checked this "click-effect" in IE-browser and it is not working there.
    Is there any trick to get this also working in IE-browser? Seems it is not possible since XF did not adapt this "click-effect" for IE-browser.....

    :coffee:
     
  11. EQnoble

    EQnoble Well-Known Member

    Code:
    .schmetterling:active {
        position: relative;
        top: 2px;
    }
    my first inclination if I really want to do something that ie doesn't support behaviorally speaking is to try to imitate or emulate the final results with js <insert bashing from programmers here>
     
    erich37 likes this.
  12. erich37

    erich37 Well-Known Member

    thanks a lot EQnoble ! You saved me a lot of nightly hours in figuring out this CSS-code :) :love: (y)

    regarding IE-browser.... I was just surprised that this click-effect is not working in IE :cautious:
     
  13. EQnoble

    EQnoble Well-Known Member

    I believe it has to do with active being applied to an li and how different browsers handle li and the active selector...and truthfully there is big differences on how all browsers handle this...literally ff chrome ie and opera all have different behaviors regarding this.


    here is an example that kind of illustrates the behavior with the whole li active thing as well

    http://jsfiddle.net/BChAz/
     
    erich37 likes this.
  14. erich37

    erich37 Well-Known Member

    o.k. ...... so how do we get Mike-Like to fix this ? :D:p:cautious:
     

Share This Page