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

How to edit the call to action button

Discussion in 'Styling and Customization Questions' started by RobinHood, Jul 2, 2011.

  1. RobinHood

    RobinHood Well-Known Member

    Anyone got any tips on where I can go and what to do to edit the call to action sign up button?

    I can't seem to find the image for it.

  2. Forsaken

    Forsaken Well-Known Member

    Under Button in style properties.
    RobinHood likes this.
  3. Luke B

    Luke B Active Member

    Good evening Robinhood.

    The Sign up button is actually not an image at all (although there is a slight png gradient image applied). It's built with CSS and you can edit that to your liking.
    Search for sidebar.css in "templates". It's near the bottom.
    RobinHood likes this.
  4. RobinHood

    RobinHood Well-Known Member

    Ahh whoops! Silly me, I tracked it to the gradients folder so I had a snaking suspicion it was something to do with that. I'll investigate the sidebar.css file! Cheers :)
  5. Luke B

    Luke B Active Member

    Easy mistake robinhood. I've had my far share that's for sure :)
  6. Brogan

    Brogan XenForo Moderator Staff Member

    As Forsaken already said though, you can style it directly from Style Properties -> Buttons.

    There's no need to edit the css templates directly if you prefer not to.
    Forsaken likes this.
  7. dieketzer

    dieketzer Well-Known Member

    if you would rather directly edit css rather than using style properties, youd be better off overriding the css by adding css in the template 'extra.css'.
    directly editing sidebar.css and the like will not only fragment all your edits over dozens of templates, it will also become a problem with future xf updates as you will need to revert custom templates then reapply the edits.
    its best to get out of this habit now.
    Darkimmortal and RobinHood like this.
  8. Brogan

    Brogan XenForo Moderator Staff Member

    Any changes made in Style Propertes will update the corresponding class in the templates.
    In the case of the sign up button for example, the content between the @property "signupButton" and @property "/signupButton" tags will be updated.

    This is how the system has been designed - so changes can be made in Style Properties or the templates.

    See this section of the Help Manual: http://xenforo.com/help/css-templates/
    Bob, RobinHood and Forsaken like this.
  9. RobinHood

    RobinHood Well-Known Member

    That's really helpful guys, makes lots of sense. I've moved a few of my previous css amendments over to the extras sheet so hopefully it won't break my site on future updates!
  10. Luke B

    Luke B Active Member

    Thank you Brogan.

    Just to clarify. For the sign up button, I changed border-radius: 5px; in the sidebar template, to border-radius: 4px;. I see the changes have been updated in the Style Properties as well. So I'm not at risk for loosing anything on update correct?

  11. Brogan

    Brogan XenForo Moderator Staff Member

    That's correct.

    Any changes made in Style Properties are preserved during upgrades.
    Luke B likes this.
  12. RobinHood

    RobinHood Well-Known Member

    I've managed to edit my sign up button using the style properties as advised and I now have an image there, any ideas where I can delete the 'Sign Up Now' text? I'd also like to alter the title of that block as it currently says 'Welcome to Themes Inc.' I guess the theme I installed wrote over what was there before.
  13. Brogan

    Brogan XenForo Moderator Staff Member

    Edit the sign_up_now phrase to remove the text.

    The block header text should also be another phrase which you can edit.

Share This Page