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

Custom Field help with URLs (+ clickable icon)

Discussion in 'Styling and Customization Questions' started by Richard Peters, Jan 5, 2012.

  1. Hi all.

    As a new user I am trying to get to grips with customs fields. I have created a custom field that I want viewable below the members avatar when viewing posts, but as per the attached thumbnails I have not done something right, which you can see for the 500px URL.
    Screen shot 2012-01-05 at 17.51.50.png

    I have set the value requirements to URL, but I am unsure of what to put in the Value Display HTML, but this is what I have right now.
    Screen shot 2012-01-05 at 17.57.15.png

    As an aside, is there a way I can have an icon displayed instead of the URL as it looks a little ugly below the avatar to have http:// showing. So, an icon that when clicked, takes you to that web address would be great!

    Thanks in advance for any help :)
  2. Fuhrmann

    Fuhrmann Well-Known Member

    You can change to this:

    <a href="{$valueUrl}"><img src="PATH TO ICON" /></a>
  3. Excellent, thank you, that worked nicely!

    My only other issue (which I forgot to mention) is when I click the link, instead of being taken to that web address I get an error message and the URL in the address bar has the forum address plus the link I want to be taken too, but it is mixed up like this: http%3A%2F%2Fwww.500px.com%2FRichardPeters
  4. Fuhrmann

    Fuhrmann Well-Known Member

    Try to use :
    instead of {$valueUrl}.

    But I think the right one is {$valueUrl}!
  5. Using value and not value Url fixed it, thank you :)

    One last thing (apologies) is it possible to somehow make this link open in a new window/tab when clicked on?
  6. Brogan

    Brogan XenForo Moderator Staff Member

    Add target="_blank" to the href.
  7. Ah yes!! thank you very much. Great support on these forums. Glad I went with XF over others...! :)
    Fuhrmann likes this.

Share This Page