1 Topic by metalwolf92 (edited by metalwolf92 2012-07-15 00:41)

  • Registered: 2012-07-15
  • Posts: 10

Topic: How do you add forum icons?

To my understanding, the icons used for forums are just CSS colors. How can I change these to custom images?

http://i.imgur.com/R8Ajm.png

Edit: Also does anyone know how to replace the "Post Reply" and "Post Topic" text with images too?

  • Registered: 2011-06-22
  • Posts: 74

Re: How do you add forum icons?

1/ In Oxygen.min.css find the line with POST STATUS INDICATORS and replace subsequent rows by something like this:

.brd .main-content .main-item .icon {float: left; border-width: 0px; height: 24px; width: 24px; margin-top: 9px; margin-left: -34px}
.brd .main-content .main-item .icon {background:transparent url(images/icon.png) no-repeat}
.brd .main-content .main-item .icon.moved {background:transparent url(images/iredirect.png) no-repeat}
.brd .main-content .main-item .icon.new {background:transparent url(images/inew.png) no-repeat}
.brd .main-content .main-item .icon.sticky{background:transparent url(images/isticky.png) no-repeat}
.brd .main-content .main-item .icon.closed{background:transparent url(images/iclosed.png) no-repeat}
.brd .main-content .main-item .icon.sticky.closed{background:url(images/iclosedandsticky.png) no-repeat}

2/ In viewforum.php find '.$lang_forum['Post topic'].' and replace it by an image tag.

3 Reply by metalwolf92 (edited by metalwolf92 2012-07-17 17:17)

  • Registered: 2012-07-15
  • Posts: 10

Re: How do you add forum icons?

I looked in forum/style/Oxygen/Oxygen.min.css

I couldn't find any line with 'POST STATUS INDICATORS' or '.brd .main-content .main-item'. I'm using PunBB 1.4. Please help?

And replacing 'Post topic' with anything, won't work...

  • Registered: 2011-06-22
  • Posts: 74

Re: How do you add forum icons?

1/ Well, ok, instead of POST... find this:

.main-content .main-item .icon{border-color:#edf1f5 #DDE0E4 #c6cbd3 #BABFC6}
.main-content .redirect .icon{border-color:#f4f4f4 #f4f4f4 #f4f4f4 #f4f4f4}
.main-content .sticky .icon{border-color:#d7e5f3 #C3CFDc #9fb3c7 #90A2B4}
.main-content .closed .icon{border-color:#acacac #979797 #898989 #7A7A7A}
.main-content .sticky.closed .icon{border-color:#d7e5f3 #C3CFDc #898989 #7A7A7A}
.main-content .new .icon{border-color:#0080d7 #0065C0 #0058b3 #0072CA}

2/ Then you probably do something wrong, it has to work.