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

[erich37]

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 ?









Appreciate your help!

Many thanks!!!

 

[Shelley]

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.

.pageNavLinkGroup .linkGroup {
    background-color: green;
    border-radius: 5px 5px 5px 5px;
    padding: 5px 10px;
}

 

[erich37]

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.

.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]

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

.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 ?

class="concealed"

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

 

[erich37]

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]

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

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

 

[erich37]

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

.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;
}

 

[Ankurmohan]

Very nice. Can you put that on the top as well?

Many Thanks
Ankur

 

[erich37]

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.

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