looking for alternative Button-styling

erich37

Well-known member
I am wondering if anyone of you has changed the default button-styling and am looking for an alternative styling for the button "Sign-Up-Now" and for the button "Post New Thread".

I have played with the button styling for quite a while now but could not get it to work properly in ACP so that it would look nice somehow.


- I would like to use for the "Post New Thread"-button the color green, but when hovering then the button should turn into violet-color.

- I would like to have the text-color of the buttons in white-color.

- I do not want to use the default white-colored "gradient-image" (@imagePath/xenforo/gradients/form-button-white-25px.png) as this makes it difficult to read the text. A green colored gradient-image for the background would be nice.


Appreciate your help! Many thanks!


:)
 
I am wondering if anyone of you has changed the default button-styling and am looking for an alternative styling for the button "Sign-Up-Now" and for the button "Post New Thread".

I have played with the button styling for quite a while now but could not get it to work properly in ACP so that it would look nice somehow.


- I would like to use for the "Post New Thread"-button the color green, but when hovering then the button should turn into violet-color.

- I would like to have the text-color of the buttons in white-color.

- I do not want to use the default white-colored "gradient-image" (@imagePath/xenforo/gradients/form-button-white-25px.png) as this makes it difficult to read the text. A green colored gradient-image for the background would be nice.


Appreciate your help! Many thanks!


:)

I might have something I can post in the RM soon you may be interest in with regards to the sign up Log in button.with regards to the button lining up to the breadcrumb I suppose this could vary depending if you have a custom breadcrumb (which I do). Current in extra i have(below) but if you find the text not sitting right add a line-height in there to align it up. button-bc.webp

Code:
a.callToAction {
    height: 26px;}

EDIT: Infact you could adjust the height/line-height sizes in the Style Properties >> Buttons and add in your own background image and customizations which would probably be better to do that use EXTRA.CSS

signup-log-in.webp
 

yeah, that big green "Sign-up Now" button would be great to get a grip on..... would be fantastic if you could share that in the RM. :)
Although I would need the text from the orange-colored label named "FREE" removed as I need to change that into a german language word named "kostenlos" (yeah, german words have a bit more letters which makes things difficult :( ). The orange-colored label is a great idea though !!!

Many thanks!!!

:cool:
 
yeah, that big green "Sign-up Now" button would be great to get a grip on..... would be fantastic if you could share that in the RM. :)
Although I would need the text from the orange-colored label named "FREE" removed as I need to change that into a german language word named "kostenlos" (yeah, german words have a bit more letters which makes things difficult :( ). The orange-colored label is a great idea though !!!

Many thanks!!!

:cool:

I can certainly leave the ribbon part blank but you'll be hard pressed fitting more than 5-6 characters within that area. I'll see about extending that part and just adding that word in for you keeping it separate from the actual RM release.
 
I can certainly leave the ribbon part blank but you'll be hard pressed fitting more than 5-6 characters within that area. I'll see about extending that part and just adding that word in for you keeping it separate from the actual RM release.

if it is not possible to fit in a word with more letters, it would be fine just to have the blank button without the orange-colored label.

Thanks a lot!
 
if it is not possible to fit in a word with more letters, it would be fine just to have the blank button without the orange-colored label.

Thanks a lot!

Intially this button was for the rm download buttons but i took one of them and re-sized it (looking for psd). I may need to lower it again from the custom resource manager buttons. Give me till tomorrow and if i don't locate that specific button I'll re-size the button again and figure something out to get it in. what text did you want in it again? if i can't managed to fit the text you give me then I'll leave it blank. :)
 
Intially this button was for the rm download buttons but i took one of them and re-sized it (looking for psd). I may need to lower it again from the custom resource manager buttons. Give me till tomorrow and if i don't locate that specific button I'll re-size the button again and figure something out to get it in. what text did you want in it again? if i can't managed to fit the text you give me then I'll leave it blank. :)

dont't worry, a blank button is totally fine.

can you just leave the orange label blank, so that I can enter my own text ? I think that would be better, as the text might change :)
 
sorry to bother you again Shelley, but would it be possible to have just the blank green button without the orange label ?

None of my words fits into that orange label :D

Thanks again!
 
sorry to bother you again Shelley, but would it be possible to have just the blank green button without the orange label ?

None of my words fits into that orange label :D

Thanks again!

I've shut down photoshop for the night so I'll post that sometime tomorrow when i re-open it.
 
sorry to bother you again Shelley, but would it be possible to have just the blank green button without the orange label ?

None of my words fits into that orange label :D

Thanks again!

What the heck (this would have been irritating me all night. :D Made the modification the ribbon free image is in the attachment.
 

Attachments

  • signup_button.webp
    signup_button.webp
    918 bytes · Views: 9
Top Bottom