Question

I am using haml to display the user’s name and nickname (in a single line format) as seen below

//haml code
%div.name
  <%= user.name %> /
  %a.nickname{:href => '#!/<%= user.nickname %>'} <%= user.nickname %>

How it looks like on the web

How can I make the entire line above clickable on the web but at the same time retain the colors of the text? (i.e. “Some Username” text can be linked like “nickname” but retain it’s color grey)

Answer 1

This is a little old and the code posted seems a bit weird, but I’m going to just post a Haml snippet and answer it relative to my snippet both with and without rails helpers

.name
  = link_to user.name, "#!/#{user.name}", :class => 'username' 
  /
  = link_to user.nickname, "#!/#{user.nickname}", :class => 'nickname'

or without

.name
  %a.username{:href => "#!/#{user.name}"}
    = user.name
  /
  %a.nickname{:href => "#!/#{user.nickname}"}
    = user.nickname

if you’re using Sass include this or some subset of these rules to turn off hoverable underlining also replace #999 with whatever color you’re using for the regular text. If you want different behavior for each break them out into separate sets of rules

Same behavior for both pieces of the name

.name
  .username, .nickname
    a:link, a:visited, a:hover, a:active, a:focus
      :color #AAA      
      :text-decoration none

Or specify different behavior for each

.name
  .username
    a:link, a:visited, a:hover, a:active, a:focus
      :color #AAA      
      :text-decoration none
  .nickname
    a:link, a:visited, a:hover, a:active, a:focus
      :color #00A      
      :text-decoration underline