How to add forum icons to theme?

milleja46milleja46 New
edited September 2012 in Vanilla 2.0 - 2.8

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?

Best Answer

  • KasperKasper Vanilla Staff
    edited September 2012 Answer ✓

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

    Kasper Kronborg Isager (kasperisager) | Freelance Developer @Vanilla | Hit me up: Google Mail or Vanilla Mail | Find me on GitHub

Answers

  • peregrineperegrine MVP
    edited September 2012

    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

    I may not provide the completed solution you might desire, but I do try to provide honest suggestions to help you solve your issue.

  • 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

  • KasperKasper Vanilla Staff
    edited September 2012 Answer ✓

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

    Kasper Kronborg Isager (kasperisager) | Freelance Developer @Vanilla | Hit me up: Google Mail or Vanilla Mail | Find me on GitHub

  • peregrineperegrine MVP
    edited September 2012

    never mind. kasper provided the answer.

    I may not provide the completed solution you might desire, but I do try to provide honest suggestions to help you solve your issue.

  • kasperisager

    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 :D

Sign In or Register to comment.