• 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.)

erich37

Well-known member
#1
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!!!

:)
 

Shelley

Well-known member
#2
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.

Any ideas of how to achieve this ?


View attachment 46117


Appreciate your help!


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

Well-known member
#3
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;
}
 

erich37

Well-known member
#4
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/
 

erich37

Well-known member
#5
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" ?


 

Steve F

Well-known member
#6
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

Well-known member
#7
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.)"
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;
}

:)
 

erich37

Well-known member
#9
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.)"
how can I do a similar thing, but using the CSS from the "Call to Action"-Button instead of a background-image ?


I am trying this, but the "span" does not work.
Meaning, the "a.callToAction span" does not display.



Code:
.pageNavLinkGroup .linkGroup .concealed {
background-color: #ffffff !important;
border: 1px solid #cccccc !important;
border-radius: 6px !important;
display: inline-block !important;
height: 20px !important;
line-height: 20px !important;
outline: 0 none !important;
padding: 2px !important;
vertical-align: top !important;
}


.pageNavLinkGroup a.callToAction span .linkGroup .concealed {
background-color: #008000 !important;
color: #ffffff !important;
}



Many thanks !
 
Last edited: