Milk: Forum icon options
Milk uses FontAwesome CSS icons to differentiate between read / unread states. This allows faster loading times and lossless quality on all devices.
It is possible to use your own images as forum icons.
Icon shape
Option Name | Value | Output |
CSS Icon Shape | Circle | |
Square | |
Switching icon shape
- Open the FlightDeck extension (control panel)
- Find "CSS icon shape"
- Set as required
- Submit
Changing icon image
The icon values are defined in:
/* Set the icons */ /* Megaphone */ .global_read:before {content: "f0a1";} .global_read_mine:before {content: "f0a1";} .global_read_locked:before {content: "f0a1";} .global_read_locked_mine:before {content: "f0a1";} .global_unread:before {content: "f0a1";} .global_unread_mine:before {content: "f0a1";} .global_unread_locked:before {content: "f0a1";} .global_unread_locked_mine:before {content: "f0a1";} /* Megaphone */ .announce_read:before {content: "f0a1";} .announce_read_mine:before {content: "f0a1";} .announce_read_locked:before {content: "f0a1";} .announce_read_locked_mine:before {content: "f0a1";} .announce_unread:before {content: "f0a1";} .announce_unread_mine:before {content: "f0a1";} .announce_unread_locked:before {content: "f0a1";} .announce_unread_locked_mine:before {content: "f0a1";} /* External link */ .forum_link:before {content: "f08e";} /* Speech Bubble */ .forum_read:before {content: "f068";} .forum_read_subforum:before {content: "f068";} /* Check */ .forum_unread:before {content: "f00c";} .forum_unread_subforum:before {content: "f00c";} /* Pin */ .sticky_read:before {content: "f08d";} .sticky_read_mine:before {content: "f08d";} .sticky_read_locked:before {content: "f08d";} .sticky_read_locked_mine:before {content: "f08d";} .sticky_unread:before {content: "f08d";} .sticky_unread_mine:before {content: "f08d";} .sticky_unread_locked:before {content: "f08d";} .sticky_unread_locked_mine:before {content: "f08d";} /* Right arrow */ .topic_moved:before {content: "f061";} /* Envelope */ .pm_read:before {content: "f0e0";} .pm_unread:before {content: "f0e0";} /* Bar */ .topic_read:before {content: "f068";} .topic_read_mine:before {content: "f068";} .topic_read_hot:before {content: "f068";} .topic_read_hot_mine:before {content: "f068";} /* Tick */ .topic_unread:before {content: "f00c";} .topic_unread_mine:before {content: "f00c";} .topic_unread_hot:before {content: "f00c";} .topic_unread_hot_mine:before {content: "f00c";} /* Cross */ .forum_read_locked:before {content: "f00d";} .forum_unread_locked:before {content: "f00d";} .topic_read_locked:before {content: "f00d";} .topic_read_locked_mine:before {content: "f00d";} .topic_unread_locked:before {content: "f00d";} .topic_unread_locked_mine:before {content: "f00d";}
Milk uses FontAwesome 4.7 icons to represent read / unread states. After finding the new icon you want to use, open its page on the FontAwesome website where you'll be able to grab the unicode value.
Replace the unicode value above as necessary.
Disabling the pulse animation
The pulsing animation is defined in: yourforum.com/Milk_v2/theme/icons_forums_topics.css
/* Box shadow for unread pulse icons */ @keyframes UnreadPulse { 0% { -moz-box-shadow: 0 0 0 0 rgba(132,189,0,0.4); box-shadow: 0 0 0 0 rgba(132,189,0,0.4); -webkit-box-shadow: 0 0 0 0 rgba(132,189,0,0.4); } 70% { -moz-box-shadow: 0 0 0 8px rgba(132,189,0,0); box-shadow: 0 0 0 8px rgba(132,189,0, 0); -webkit-box-shadow: 0 0 0 8px rgba(132,189,0,0); } 100% { -moz-box-shadow: 0 0 0 0 rgba(132,189,0,0); box-shadow: 0 0 0 0 rgba(132,189,0,0); -webkit-box-shadow: 0 0 0 0 rgba(132,189,0,0); } } /* Box shadow for unread pulse icons */ @keyframes UnreadLockedPulse { 0% { -moz-box-shadow: 0 0 0 0 rgba(189,0,0,0.4); box-shadow: 0 0 0 0 rgba(189,0,0,0.4); -webkit-box-shadow: 0 0 0 0 rgba(189,0,0,0.4); } 70% { -moz-box-shadow: 0 0 0 8px rgba(189,0,0,0); box-shadow: 0 0 0 8px rgba(189,0,0, 0); -webkit-box-shadow: 0 0 0 8px rgba(189,0,0,0); } 100% { -moz-box-shadow: 0 0 0 0 rgba(189,0,0,0); box-shadow: 0 0 0 0 rgba(189,0,0,0); -webkit-box-shadow: 0 0 0 0 rgba(189,0,0,0); } }
You can delete this code to disable the animation.