Drupal Technical

[Drupal] To change Flag Module flag links to buttons in Drupal 7 using CSS

Chithra.k | | 1 min read

Normally while using Flag module, the flag name is displayed as a link. If you want to change this behaviour and replace the link with a button, you can do this easily by using CSS. You need not alter any forms for this. For this you may add the below code to your CSS.

.flag-wrapper.flag-{name} a.flag-action {
  background-image: url('path to the button's image');
  display:block;
  text-indent:-9999em;
}
.flag-wrapper.{flag-name} a.unflag-action {
  background-image: url('path to the button's image');
  display:block;
  text-indent:-9999em;
}

text-indent:-9999em is used to hide the element by placing it off the screen.
You will have to replace .{flag-name} with your flag's name.

 

 

Related Topics