How to add forum icons to theme?

milleja46

I've been using vanilla for awhile, and kinda wanted to create my own theme. So I followed the instructions in the quickstart, and the theme works. But I wanted to know, is there a way to have custom forum icons for read/unread? The example of this is like phpbb and some of the other forum softwares availible. Does anyone know how to do this properly through the css or such?

Kasper

Sure, just use CSS:

.Item.Read {
    // Add your "Read" icon here
}

.Item.Unread {
    // Add your "Unread" icon here
}

.Item.New {
    // Add your "New" icon here
}

A full example of the actual icon code could look like this:

.Item.Read {
    // Uses a 48x48px icon
    background-image: url("path/to/icon");
    background-repeat: no-repeat;
    background-position: /* Adjust position if necessary */;
    padding-left: 56px; /* Add 48px to the existing 8px padding */
}

peregrine

is there a way to have custom forum icons for read/unread?

you probably want to explain this. where? on unread message itself in the discussion. instead of the words unread in link? in what version of vanilla?
etc. etc.

A sample image showing what you are looking for, would be helpful.

that said you could modify

http://vanillaforums.org/addon/unreadicon-plugin

milleja46

Well I mean with how you have on phpbb or the others read/unread icons besides categories and such. I'm using the v2 from the downloads. <= that's kinda what I'm talking about

Kasper

Sure, just use CSS:

.Item.Read {
    // Add your "Read" icon here
}

.Item.Unread {
    // Add your "Unread" icon here
}

.Item.New {
    // Add your "New" icon here
}

A full example of the actual icon code could look like this:

.Item.Read {
    // Uses a 48x48px icon
    background-image: url("path/to/icon");
    background-repeat: no-repeat;
    background-position: /* Adjust position if necessary */;
    padding-left: 56px; /* Add 48px to the existing 8px padding */
}

peregrine

never mind. kasper provided the answer.

milleja46

kasperisager

@kasperisager said:

Sure, just use CSS:

  .Item.Read {
      // Add your "Read" icon here
  }
  
  .Item.Unread {
      // Add your "Unread" icon here
  }
  
  .Item.New {
      // Add your "New" icon here
  }
  

A full example of the actual icon code could look like this:

  .Item.Read {
      // Uses a 48x48px icon
      background-image: url("path/to/icon");
      background-repeat: no-repeat;
      background-position: /* Adjust position if necessary */;
      padding-left: 56px; /* Add 48px to the existing 8px padding */
  }
  

Wow, that makes a lot of sense