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

change Link into a button: (You must log in or sign up to post here.)

Discussion in 'Styling and Customization Questions' started by erich37, May 12, 2013.

  1. erich37

    erich37 Well-Known Member

    I have managed with some great help from you guys to make a proper and nice looking graphic-button (image-button) for the "Notice".
    http://xenforo.com/community/threads/custom-log-in-sign-up-button.49048/
    http://xenforo.com/community/threads/custom-button-in-notice-need-css-help.49182/



    Now I would like to turn the text "(You must log in or sign up to post here.)" at the "Thread List" and also the text "(You must log in or sign up to reply here.)" at the "Thread" into an image-based-button.

    Does anyone know of how to use the proper CSS in order to apply that button-image towards that Link ?


    brackets_in_phrase.gif sign_up_to_post_thread_button.jpg


    new_topic.png



    Appreciate your help!

    Many thanks!!!

    :)
     
  2. Shelley

    Shelley Well-Known Member

    Wouldn't something like work for you. Styling it to your preference of course.

    Code:
    .pageNavLinkGroup .linkGroup {
        background-color: green;
        border-radius: 5px 5px 5px 5px;
        padding: 5px 10px;
    }
    
     
    erich37 likes this.
  3. erich37

    erich37 Well-Known Member

    I am trying this (see code below), but the button is showing at both the top and the bottom of the page, same as at the "Post New Topic" is showing at both the top and the botton of the page.
    But the button should actually just show at the bottom where the text "(You must log in or sign up to reply here.)" is located.
    Not sure why the button is also showing at the top ?

    The other issue is that the button is showing atop of the other button for "Post New Thread"..... when logged-in.
    That button for this text/link "(You must log in or sign up to reply here.)" should actually just show when not being logged-in. :confused:


    Code:
    .pageNavLinkGroup .linkGroup {
    background: url("@imagePath/xenforo/new_topic.png") no-repeat center bottom;
    border-radius: none;
    width: 205px;
    height: 63px;
    border: none;
    margin: 0 auto;
    }
     
  4. erich37

    erich37 Well-Known Member

    O.K.
    I figured the right CSS to make it happen for the text "(You must log in or sign up to post here.)", however it does not work at the text "(You must log in or sign up to reply here.)"
    Code:
    .pageNavLinkGroup .linkGroup .element {
    background: url("@imagePath/xenforo/new_topic.png") no-repeat center bottom;
    border-radius: none;
    width: 205px;
    height: 63px;
    border: none;
    margin: 0 auto;
    }
    


    what does the class "concealed" actually do ?
    Code:
    class="concealed"

    http://xenforo.com/community/thread...or-for-log-in-or-register-to-post-here.35112/
     
  5. erich37

    erich37 Well-Known Member

    it seems there is no CSS defined in XF-default to appraoch that Link.

    Seems the only solution is to create a new CSS-class in the templates "thread_view" and "forum_view" ?


     
  6. Steve F

    Steve F Well-Known Member

    This works for me, and it styles both links, "(You must log in or sign up to post here.)" & "(You must log in or sign up to reply here.)"


    Code:
    .pageNavLinkGroup .linkGroup .concealed {
    background: #208A11;
    color: #FFF !important;
    padding: 8px 13px;
    border-radius: 5px;
    border: 1px solid #026302;
    }
     
    erich37 likes this.
  7. erich37

    erich37 Well-Known Member

    ohhh, thanks a lot !!!
    That did the trick (y)

    Code:
    .pageNavLinkGroup .linkGroup .concealed {
    background: url("@imagePath/xenforo/new_topic.png") no-repeat center bottom;
    border-radius: none;
    width: 205px;
    height: 63px;
    border: none;
    margin: 0 auto;
    }

    :)
     

Share This Page