🚀
PlanetStyles Theme Documentation
  • 👋Intrdouction
  • 🏃Getting started
    • How to install our phpBB themes
    • How to install phpBB extensions
    • How to update theme to new version
    • How to update extension to new version
    • How to edit code files
    • How to purge cache
    • How to set new theme as default
    • How to add your own code to our themes
  • 🛠️Troubleshooting
    • Theme not showing in "install styles" list
    • Extension not showing in "manage extensions"
    • Unable to find template "ajax.js"
    • HTTP error 500
    • No colours are showing up
    • Advance BBCode box on Milk theme
    • "missing style.css stylesheet"
  • ✨Feature Guides
    • 🥛Milk theme
      • Milk: Favicon
      • Milk: Logo
      • Milk: Header background
      • Milk: Navbar position
      • Milk: Font options
      • Milk: Layout width
      • Milk: Light / dark options
      • Milk: Accent colour options
      • Milk: Forum list options
      • Milk: Content block headers
      • Milk: Sidebar options
      • Milk: Social footer options
      • Milk: Post profile side
      • Milk: Collapsible panels
      • Milk: Scroll to top
      • Milk: Rounded corner options
      • Milk: Forum icon options
      • Milk: Global <head> code
Powered by GitBook
On this page
  • Switching icon shape
  • Changing icon image
  • Disabling the pulse animation

Was this helpful?

  1. Feature Guides
  2. Milk theme

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.

Option name
Value

Circle

Square

Switching icon shape

  1. Open the FlightDeck extension (control panel)

  2. Find "CSS icon shape"

  3. Set as required

  4. Submit


Changing icon image

The icon values are defined in: yourforum.com/Milk_v2/theme/icons_forums_topics.css

/* 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";}

Replace the unicode value above as necessary.

See: How to edit code files


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.

Last updated 1 year ago

Was this helpful?

Milk uses 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.

✨
🥛
FontAwesome 4.7 icons