Skip to main content
Solved

Possible to change like, reply and views icons?

  • February 16, 2022
  • 2 replies
  • 53 views

nicksimard
Forum|alt.badge.img+1
  • Contributor ⭐️⭐️⭐️⭐️
  • 44 replies

Can these be modified, relatively easily?

 

Best answer by SmartlyGreg

@nicksimard if you wanted to you could of course! But you’d have to check every instance of these icons on the multiple pages as they are not all using the same class everywhere...

 

For the “like” for example, on the main pages where there are listed topics (ie. Old homepage or Community Overview) you could use:

.icon--thumb-up {
  color: transparent !important;
}
.thread-meta-item--likes {
  background-repeat: no-repeat; 
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='18' height='18'%3E%3Cpath fill='none' d='M0 0h24v24H0z'/%3E%3Cpath d='M12 17l-5.878 3.59 1.598-6.7-5.23-4.48 6.865-.55L12 2.5l2.645 6.36 6.866.55-5.231 4.48 1.598 6.7L12 17zm0-2.344l2.817 1.72-.766-3.21 2.507-2.147-3.29-.264L12 7.708l-1.268 3.047-3.29.264 2.507 2.147-.766 3.21L12 14.657z' fill='rgba(230,126,34,1)'/%3E%3C/svg%3E");
}
.thread-meta-item--likes--liked {
  background-repeat: no-repeat; 
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='18' height='18'%3E%3Cpath fill='none' d='M0 0h24v24H0z'/%3E%3Cpath d='M12 17l-5.878 3.59 1.598-6.7-5.23-4.48 6.865-.55L12 2.5l2.645 6.36 6.866.55-5.231 4.48 1.598 6.7z' fill='rgba(230,126,34,1)'/%3E%3C/svg%3E");
}

With the icon being an image; when not liked by the current user, and once liked:

But for the topic pages themselves you’d have to use some other class… Which adds quite a bit of complication! Also the star is actually used for Subscribe button on the topic page so that was a poor choice for the example on my part! 

 

Hope this helps!

View original
Did you find this topic helpful?

2 replies

SmartlyGreg
Forum|alt.badge.img
  • Helper ⭐️⭐️⭐️
  • 201 replies
  • Answer
  • February 17, 2022

@nicksimard if you wanted to you could of course! But you’d have to check every instance of these icons on the multiple pages as they are not all using the same class everywhere...

 

For the “like” for example, on the main pages where there are listed topics (ie. Old homepage or Community Overview) you could use:

.icon--thumb-up {
  color: transparent !important;
}
.thread-meta-item--likes {
  background-repeat: no-repeat; 
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='18' height='18'%3E%3Cpath fill='none' d='M0 0h24v24H0z'/%3E%3Cpath d='M12 17l-5.878 3.59 1.598-6.7-5.23-4.48 6.865-.55L12 2.5l2.645 6.36 6.866.55-5.231 4.48 1.598 6.7L12 17zm0-2.344l2.817 1.72-.766-3.21 2.507-2.147-3.29-.264L12 7.708l-1.268 3.047-3.29.264 2.507 2.147-.766 3.21L12 14.657z' fill='rgba(230,126,34,1)'/%3E%3C/svg%3E");
}
.thread-meta-item--likes--liked {
  background-repeat: no-repeat; 
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='18' height='18'%3E%3Cpath fill='none' d='M0 0h24v24H0z'/%3E%3Cpath d='M12 17l-5.878 3.59 1.598-6.7-5.23-4.48 6.865-.55L12 2.5l2.645 6.36 6.866.55-5.231 4.48 1.598 6.7z' fill='rgba(230,126,34,1)'/%3E%3C/svg%3E");
}

With the icon being an image; when not liked by the current user, and once liked:

But for the topic pages themselves you’d have to use some other class… Which adds quite a bit of complication! Also the star is actually used for Subscribe button on the topic page so that was a poor choice for the example on my part! 

 

Hope this helps!


nicksimard
Forum|alt.badge.img+1
  • Author
  • Contributor ⭐️⭐️⭐️⭐️
  • 44 replies
  • February 17, 2022

Awesome, thanks! I’ll give that a try :)


Reply


Cookie policy

We use cookies to enhance and personalize your experience. If you accept you agree to our full cookie policy. Learn more about our cookies.

 
Cookie settings