Topic: Custom topic icons

I couldn't find any place to  replace the default topic icons to my own.
Are the current ones dynamically generated?

How can I have my own topic icons (for no new posts, new post, closed forum... and the sort)?

Thanks.

Parimal Satyal - Powermetal from Nepal

Re: Custom topic icons

try http://[forumlocation]/img/[style in use]

They'll have new.gif and nonew.gif in there, or something along those lines.

The most important thing to remember is that it's Style-based, not a generic PunBB thing.

3 (edited by livatlantis 2005-10-16 07:09)

Re: Custom topic icons

The theme I'm using is my own, modified version of Cobalt.
forum/img only has avatars/ and smilies/

Topic icons aren't there.

I guess I have to modify this part of the CSS:

/* 10.1 These are the post status indicators which appear at the left of some tables. 
.inew = new posts, .iredirect = redirect forums, .iclosed = closed topics and
.isticky = sticky topics. By default only .inew is different from the default.*/

DIV.icon {
    FLOAT: left;
    MARGIN-TOP: 0.1em;
    MARGIN-LEFT: 0.2em;
    DISPLAY: block;
    BORDER-WIDTH: 0.6em 0.6em 0.6em 0.6em;
    BORDER-STYLE: solid
}

DIV.searchposts DIV.icon {MARGIN-LEFT: 0}

/* 10.2 Class .tclcon is a div inside the first column of tables with post indicators. The
margin creates space for the post status indicator */

TD DIV.tclcon {MARGIN-LEFT: 2.3em}

But how do I add the image?

Parimal Satyal - Powermetal from Nepal

4

Re: Custom topic icons

hm.. even just using style u can make your icon beautiful ))
for exampe, i have

    BORDER-STYLE: double

And it looke better, than simply solid, i think

if u want change it to image, u need change viewforum.php
open it and find

<div class="<?php echo $icon_type ?>"><div class="nosize"><?php echo trim($icon_text) ?></div></div>

change it for your image
for exampe:

if ($icon_type=='icon inew ') {?><div class="your_class"><img src="/img/new.gif" /></div>
<?php}else{?><div class="your_class"><img src="/img/old.gif" /></div><?php}
Hm... every pixel has it's own destiny

Re: Custom topic icons

Thanks! You've helped me a lot here smile

Parimal Satyal - Powermetal from Nepal

6

Re: Custom topic icons

it was nothing4me;)
but, for what it? less pictures - faster

Hm... every pixel has it's own destiny

7

Re: Custom topic icons

and, the main plus of such icon-border in this: users, that turn off 'show images' can see icon

Hm... every pixel has it's own destiny

Re: Custom topic icons

That's true. Maybe there could be a mod - If you turn of images, switch to border icon. Else, display image - sort of thing.

Anyway, I wanted images to fit my design. smile

Parimal Satyal - Powermetal from Nepal

Re: Custom topic icons

That code didn't work. Gave out a parse error? Could you please post the top and bottom few lines? Thank you!

Parimal Satyal - Powermetal from Nepal

10

Re: Custom topic icons

To put image to your topics, no need to change the viewforum.php !
Just use the css.

In style.css :

/* 10.1 These are the post status indicators which appear at the left of some tables. 
.inew = new posts, .iredirect = redirect forums, .iclosed = closed topics and
.isticky = sticky topics. By default only .inew is different from the default.*/

DIV.icon {
    FLOAT: left;
    MARGIN-TOP: 0.1em;
    MARGIN-LEFT: 0.2em;
    DISPLAY: block;
/*    BORDER-WIDTH: 0.6em 0.6em 0.6em 0.6em;
    BORDER-STYLE: solid*/
    HEIGHT: 15px;
    WIDTH: 15px;
}

DIV.searchposts DIV.icon {MARGIN-LEFT: 0}

In imports/style_cs.css :

/* These are the post status indicators which appear at the left of some tables. 
.inew = new posts, .iredirect = redirect forums, .iclosed = closed topics and
.isticky = sticky topics. The default is "icon". By default only .inew is different.*/

DIV.icon {BACKGROUND: url(../../img/Kontrast/nonew.gif);}
DIV.inew {BACKGROUND: url(../../img/Kontrast/new.gif)}
TR.iclosed Div.icon {background-image : url(../../img/Kontrast/closed.gif); } 
TR.isticky Div.icon {background-image : url(../../img/Kontrast/sticky.gif); }

11

Re: Custom topic icons

Apupv, and "background-repeat: no-repeat;" wink

Hm... every pixel has it's own destiny

12

Re: Custom topic icons

Ok, thanks !
i'm not into Css, i'm just a "copy-paster"... smile

Re: Custom topic icons

Thanks! It works: http://www.powerofmetal.net/forum smile

Parimal Satyal - Powermetal from Nepal

14

Re: Custom topic icons

Apupv wrote:

To put image to your topics, no need to change the viewforum.php !
Just use the css.

In style.css :

/* 10.1 These are the post status indicators which appear at the left of some tables. 
.inew = new posts, .iredirect = redirect forums, .iclosed = closed topics and
.isticky = sticky topics. By default only .inew is different from the default.*/

DIV.icon {
    FLOAT: left;
    MARGIN-TOP: 0.1em;
    MARGIN-LEFT: 0.2em;
    DISPLAY: block;
/*    BORDER-WIDTH: 0.6em 0.6em 0.6em 0.6em;
    BORDER-STYLE: solid*/
    HEIGHT: 15px;
    WIDTH: 15px;
}

DIV.searchposts DIV.icon {MARGIN-LEFT: 0}

In imports/style_cs.css :

/* These are the post status indicators which appear at the left of some tables. 
.inew = new posts, .iredirect = redirect forums, .iclosed = closed topics and
.isticky = sticky topics. The default is "icon". By default only .inew is different.*/

DIV.icon {BACKGROUND: url(../../img/Kontrast/nonew.gif);}
DIV.inew {BACKGROUND: url(../../img/Kontrast/new.gif)}
TR.iclosed Div.icon {background-image : url(../../img/Kontrast/closed.gif); } 
TR.isticky Div.icon {background-image : url(../../img/Kontrast/sticky.gif); }

Hmm i did this but it doesnt work anybody a idea why??
www.highschoolfever.com/forum/upload for a example of my page.

Re: Custom topic icons

eddy81 wrote:

Hmm i did this but it doesnt work anybody a idea why??

What this is the exact code you used? or different code?

Because if you used this exact code then you have no pictures at the url your directing too. If it is different code then maybe you could post that.

Here is another post with simliar code to above for the effect u r looking for.
http://punbb.org/forums/viewtopic.php?id=9258

16 (edited by eddy81 2005-10-27 13:25)

Re: Custom topic icons

This i putted in my

CSS.

/****************************************************************/
/* 10. POST STATUS INDICATORS */
/****************************************************************/

/* 10.1 These are the post status indicators which appear at the left of some tables. 
.inew = new posts, .iredirect = redirect forums, .iclosed = closed topics and
.isticky = sticky topics. By default only .inew is different from the default.*/

DIV.icon {
    FLOAT: left;
    MARGIN-TOP: 0.1em;
    MARGIN-LEFT: 0.2em;
    DISPLAY: block;
    BORDER-WIDTH: none;
    WIDTH: 20px;
    HEIGHT : 20px;
}

And this in CS.CSS

/****************************************************************/
/* 5. POST STATUS INDICATORS */
/****************************************************************/

/* These are the post status indicators which appear at the left of some tables. 
.inew = new posts, .iredirect = redirect forums, .iclosed = closed topics and
.isticky = sticky topics. The default is "icon". By default only .inew is different.*/

DIV.icon { background-image: none}
TR.iredirect DIV.icon { background-image: none }
TR.iclosed DIV.icon { background-image: none }
TR.isticky DIV.icon { background-image: none }
TR.inew DIV.icon {background-image: url(http://www.highschoolfever.com/forum/upload/img/icons/new.png) }

/* 5.2 Class .tclcon is a div inside the first column of tables with post indicators. The
margin creates space for the post status indicator */

TD DIV.tclcon {MARGIN-LEFT: 2.3em}

Re: Custom topic icons

eddy81
Is it online right now? that code?

18 (edited by eddy81 2005-10-27 14:59)

Re: Custom topic icons

hmm no i took it off because i know my visitors smile they make trouble directly.


but do you have a idea how it comes, because when i put this online then i dont see anything at all so just a empty table. next to the topics.

Re: Custom topic icons

eddy81 wrote:

but do you have a idea how it comes, because when i put this online then i dont see anything at all so just a empty table. next to the topics.

Check out the last few posts in this topic...

http://punbb.org/forums/viewtopic.php?id=9258

20

Re: Custom topic icons

He steven thnx already for your help but i dont get it to work
i did all these steps but nothing works, i putted it now online
under it ill put the whole file maybe i do something really wrong hope you see something why it doesnt work

.css

/****************************************************************/
/* 1. IMPORTED STYLESHEETS */
/****************************************************************/

/* Import the basic setup styles */
@import url(imports/base.css);
/* Import the colour scheme */
@import url(imports/Lithium_cs.css);

/****************************************************************/
/* 2. TEXT SETTINGS */
/****************************************************************/

/* 2.1 This sets the default Font Group */

.pun, .pun INPUT, .pun SELECT, .pun TEXTAREA, .pun OPTGROUP {
    FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif
}

.pun {FONT-SIZE: 10px}

/* IEWin Font Size only - to allow IEWin to zoom. Do not remove comments \*/
* HTML BODY .pun {FONT-SIZE: 62.5%}
/* End IE Win Font Size */

/* Set font size for tables for IE5 */
* HTML .pun TABLE {FONT-SIZE: 1em}

/* 2.2 Set the font-size for preformatted text i.e in code boxes */

.pun PRE {FONT-FAMILY: monaco, "Bitstream Vera Sans Mono", "Courier New", courier, monospace}

/* 2.3 Font size for board title */

#brdtitle H1 {FONT-SIZE: 1.5em}

/* 2.4 Larger text for particular items */

.pun H2, #viewprofile DL, #brdmenu, DIV.postmsg P, DIV.forminfo P, #puninstall DIV.block P, DIV.postsignature,
DIV.linkst LI, P.postlink, DIV.postmsg H4 {FONT-SIZE: 1.1em}

.pun H3, .pun PRE, DIV.postleft DT {FONT-SIZE: 1.2em}

/* 2.5 Font sizes for form elements. */

.pun TEXTAREA, .pun LEGEND, .pun LABEL, .pun INPUT, .pun SELECT, .pun OPTGROUP {FONT-SIZE: 1.1em}
.pun LABEL INPUT, .pun LABEL TEXTAREA, .pun LABEL SELECT, .pun LABEL OPTGROUP {font-size: 1em}

/* 2.6 Bold text */

DIV.postleft DT, DIV.postmsg H4, TD.tcl H3, DIV.forminfo H3, P.postlink, DIV.linkst LI,
.blockmenu LI, #brdtitle H1 {FONT-WEIGHT: bold}


/****************************************************************/
/* 3. LINKS */
/****************************************************************/

/* 3.1 Remove underlining for main menu, post header links, post links and vertical menus */

#brdmenu A:link, #brdmenu A:visited,
.blockpost DT A:link, .blockpost DT A:visited, .blockpost H2 A:link, .blockpost H2 A:visited,
.postlink A:link, .postlink A:visited, .postfootright A:link, .postfootright A:visited, .blockmenu A:link, .blockmenu A:visited
{TEXT-DECORATION: none}

/* 3.2 Underline on hover for links in headers and main menu */

#brdmenu A:hover, .blockpost H2 A:hover {TEXT-DECORATION: underline}

/****************************************************************/
/* 4. BORDER WIDTH AND STYLE */
/****************************************************************/

/* 4.1 By default borders are 1px solid */

DIV.box, .pun TD, .pun TH, .pun BLOCKQUOTE, DIV.codebox, DIV.forminfo, DIV.blockpost LABEL {
    BORDER-STYLE: solid;
    BORDER-WIDTH: 1px
}

/* 4.2 Special settings for the board header. */

#brdheader DIV.box {BORDER-TOP-WIDTH: 4px}

/* 4.3 Borders for table cells */

.pun TD, .pun TH {
    BORDER-BOTTOM: none;
    BORDER-RIGHT: none
}

.pun .tcl {BORDER-LEFT: none}

/* 4.4 Special setting for fieldsets to preserve IE defaults */

DIV>FIELDSET {
    BORDER-STYLE: solid;
    BORDER-WIDTH: 1px
}

/****************************************************************/
/* 5. VERTICAL AND PAGE SPACING */
/****************************************************************/

/* 5.1 Page margins */

HTML, BODY {MARGIN: 0; PADDING: 0}
#punwrap {margin:12px 20px}

/* 5.2 Creates vertical space between main board elements (Margins) */

DIV.blocktable, DIV.block, DIV.blockform, DIV.block2col, #postreview {MARGIN-BOTTOM: 12px}
#punindex DIV.blocktable, DIV.blockpost {MARGIN-BOTTOM: 6px}
DIV.block2col DIV.blockform, DIV.block2col DIV.block {MARGIN-BOTTOM: 0px}

/* 5.3 Remove space above breadcrumbs, postlinks and pagelinks with a negative top margin */

DIV.linkst, DIV.linksb {MARGIN-TOP: -12px}
DIV.postlinksb {MARGIN-TOP: -6px}

/* 5.4 Put a 12px gap above the board information box in index because the category tables only
have a 6px space beneath them */

#brdstats {MARGIN-TOP: 12px}

/****************************************************************/
/* 6. SPACING AROUND CONTENT */
/****************************************************************/

/* 6.1 Default padding for main items */

DIV.block DIV.inbox, DIV.blockmenu DIV.inbox {PADDING: 3px 6px}
.pun P, .pun UL, .pun DL, DIV.blockmenu LI, .pun LABEL, #announce DIV.inbox DIV {PADDING: 3px 0}
.pun H2 {PADDING: 4px 6px}

/* 6.2 Special spacing for various elements */

.pun H1 {PADDING: 3px 0px 0px 0}
#brdtitle P {PADDING-TOP: 0px}
DIV.linkst {PADDING: 8px 6px 3px 6px}
DIV.linksb, DIV.postlinksb {PADDING: 3px 6px 8px 6px}
#brdwelcome, #brdfooter DL A, DIV.blockmenu LI, DIV.rbox INPUT  {LINE-HEIGHT: 1.4em}
#viewprofile DT, #viewprofile DD {PADDING: 0 3px; LINE-HEIGHT: 2em}

/* 6.4 Create some horizontal spacing for various elements */

#brdmenu LI, DIV.rbox INPUT, DIV.blockform P INPUT  {MARGIN-RIGHT: 12px}

/****************************************************************/
/* 7. SPACING FOR TABLES */
/****************************************************************/

.pun TH, .pun TD {PADDING: 4px 6px}
.pun TD P {PADDING: 5px 0 0 0}

/****************************************************************/
/* 8. SPACING FOR POSTS */
/****************************************************************/

/* 8.1 Padding around left and right columns in viewtopic */

DIV.postleft DL, DIV.postright {PADDING: 6px}

/* 8.2 Extra spacing for poster contact details and avatar */

DD.usercontacts, DD.postavatar {MARGIN-TOP: 5px}
DD.postavatar {MARGIN-BOTTOM: 5px}

/* 8.3 Extra top spacing for signatures and edited by */

DIV.postsignature, DIV.postmsg P.postedit {PADDING-TOP: 15px}

/* 8.4 Spacing for code and quote boxes */

DIV.postmsg H4 {MARGIN-BOTTOM: 10px}
.pun BLOCKQUOTE, DIV.codebox {MARGIN: 5px 15px 15px 15px; PADDING: 8px}

/* 8.5 Padding for the action links and online indicator in viewtopic */

DIV.postfootleft P, DIV.postfootright UL, DIV.postfootright DIV {PADDING: 10px 6px 5px 6px}

/* 8.6 This is the input on moderators multi-delete view */

DIV.blockpost INPUT, DIV.blockpost LABEL {
    PADDING: 3px;
    DISPLAY: inline
}

P.multidelete {
    PADDING-TOP: 10px;
    PADDING-BOTTOM: 5px
}

/* 8.7 Make sure paragraphs in posts don't get any padding */

DIV.postmsg P {PADDING: 0}

/****************************************************************/
/* 9. SPECIAL SPACING FOR FORMS */
/****************************************************************/

/* 9.1 Padding around fieldsets */

DIV.blockform FORM, DIV.fakeform {PADDING: 20px 20px 15px 20px}
DIV.inform {PADDING-BOTTOM: 12px}

/* 9.2 Padding inside fieldsets */

.pun FIELDSET {PADDING: 0px 12px 0px 12px}
DIV.infldset {PADDING: 9px 0px 12px 0}
.pun LEGEND {PADDING: 0px 6px}

/* 9.3 The information box at the top of the registration form and elsewhere */

DIV.forminfo {
    MARGIN-BOTTOM: 12px;
    PADDING: 9px 10px
}

/* 9.4 BBCode help links in post forms */

UL.bblinks LI {PADDING-RIGHT: 20px}

UL.bblinks {PADDING-BOTTOM: 10px; PADDING-LEFT: 4px}

/* 9.5 Horizontal positioning for the submit button on forms */

DIV.blockform P INPUT {MARGIN-LEFT: 12px}

/****************************************************************/
/* 10. POST STATUS INDICATORS */
/****************************************************************/

/* 10.1 These are the post status indicators which appear at the left of some tables. 
.inew = new posts, .iredirect = redirect forums, .iclosed = closed topics and
.isticky = sticky topics. By default only .inew is different from the default.*/

DIV.icon {
    FLOAT: left;
    MARGIN-TOP: 0.3em;
    MARGIN-LEFT: 0.1em;
    DISPLAY: block;
    BORDER-WIDTH: none;
    WIDTH: 20px;
    HEIGHT : 20px;
}

cs.css

/****************************************************************/
/* 1. BACKGROUND AND TEXT COLOURS */
/****************************************************************/

/* 1.1 Default background colour and text colour */

.pun {COLOR: #333}

DIV.box, .pun BLOCKQUOTE, DIV.codebox, #adminconsole FIELDSET TH, .rowodd, .roweven {BACKGROUND-COLOR: #E3E1E1}
#adminconsole TD, #adminconsole TH {BORDER-COLOR: #E3E1E1}

/* 1. 2 Darker background colours */

TD.tc2, TD.tc3, TD.tcmod, #postpreview, #viewprofile DD, DIV.forminfo,
#adminconsole FIELDSET TD, DIV.blockmenu DIV.box, #adstats DD {BACKGROUND-COLOR: #C9C9C9}

/* 1.3 Main headers and navigation bar background and text colour */

.pun H2, #brdmenu {BACKGROUND-COLOR: #3F541E; COLOR: #FFF}

/* 1.4 Table header rows */

.pun TH, .bgc4 {BACKGROUND-COLOR: #C9C9C9}

/* 1.5 Fieldset legend text colour */

.pun LEGEND {COLOR: #3F541E}

/* 1.6 Highlighted text for various items */

.showhot, .pun DIV.blockmenu LI.isactive A, #posterror LI STRONG {COLOR: #333}

/****************************************************************/
/* 2. POST BACKGROUNDS AND TEXT */
/****************************************************************/

/* 2.1 This is the setup for posts. */

DIV.blockpost DIV.box, DIV.postright, DIV.postfootright {BACKGROUND-COLOR: #E3E1E1}
DIV.postright, DIV.postfootright {BORDER-LEFT-COLOR: #C9C9C9}
DIV.postleft, DIV.postfootleft, DIV.blockpost LABEL {BACKGROUND-COLOR: #C9C9C9}

/* 2.2 Background for post headers and text colour for post numbers in viewtopic */

DIV.blockpost H2 {BACKGROUND-COLOR: #3F541E}
DIV.blockpost H2 SPAN.conr {COLOR: #B7D094}

/* 2.3 This is the line above the signature in posts. Colour and background should be the same */

.pun HR {BACKGROUND-COLOR: #333; COLOR: #333}

/****************************************************************/
/* 3. BORDER COLOURS */
/****************************************************************/

/* 3.1 All external borders */

DIV.box {BORDER-COLOR: #A2A163}

/* 3.2 Makes the top border of posts match the colour used for post headers */

DIV.blockpost DIV.box {BORDER-COLOR: #3F541E #3F541E #3F541E}

/* 3.3 Table internal borders. By default TH is same as background so border is invisible */

.pun TD {BORDER-COLOR: #CEDEB9}
.pun TH {BORDER-COLOR: #C9C9C9}

/* 3.4 Creates the inset border for quote boxes, code boxes and form info boxes */

.pun BLOCKQUOTE, DIV.codebox, DIV.forminfo, DIV.blockpost LABEL {BORDER-COLOR: #ACA899 #FFF #FFF #ACA899}

/* 3.5 Gecko's default fieldset borders are really nasty so this gives them a colour
without interferring with IE's rather nice default */

.pun DIV>FIELDSET {BORDER-COLOR: #ACA899}

/****************************************************************/
/* 4. LINK COLOURS */
/****************************************************************/

/* 4.1 This is the default for all links */

.pun A:link, .pun A:visited {COLOR: #3F541E}
.pun A:hover {COLOR: #A90909}

/* 4.2 This is the colour for links in header rows and the navigation bar */

.pun H2 A:link, .pun H2 A:visited, #brdmenu A:link, #brdmenu A:visited {COLOR: #FFF}
.pun H2 A:hover, #brdmenu A:hover {COLOR: #FFF}

/* 4.3 This is for closed topics and "hot" links */

A:link.showclosed,  A:visited.showclosed {COLOR: #888}
A:hover.showclosed {COLOR: #AAA}
A:link.showhot,  A:visited.showhot {COLOR: #B42000}
A:hover.showhot {COLOR: #B42000}

/****************************************************************/
/* 5. POST STATUS INDICATORS */
/****************************************************************/

/* These are the post status indicators which appear at the left of some tables. 
.inew = new posts, .iredirect = redirect forums, .iclosed = closed topics and
.isticky = sticky topics. The default is "icon". By default only .inew is different.*/

DIV.icon {background-image: url(http://www.highschoolfever.com/forum/upload/img/icons/old.png) }
TR.iredirect DIV.icon {background-image: none }
TR.iclosed DIV.icon {background-image: url(http://www.highschoolfever.com/forum/upload/img/icons/closed.png) }
TR.isticky DIV.icon {background-image: url(http://www.highschoolfever.com/forum/upload/img/icons/sticky.png) }
TR.inew DIV.icon {background-image: url(http://www.highschoolfever.com/forum/upload/img/icons/new.png) }

/* 5.2 Class .tclcon is a div inside the first column of tables with post indicators. The
margin creates space for the post status indicator */

TD DIV.tclcon {MARGIN-LEFT: 2.3em}

THANK YOU ALREADY FOR YOUR HELP!

Re: Custom topic icons

Your code... My website...

http://www.marine-hunters.co.uk/mhmain/forum.php

It looks like you have been playing with code elsewhere.

22

Re: Custom topic icons

sorry what you mean with it? and no i didnt play with it somewhere else.

Re: Custom topic icons

Put it online right now and I will look straight away mate. Its hard to see what you mean without the code being on line...

24

Re: Custom topic icons

ok hold on ill put i now online

Re: Custom topic icons

eddy81 wrote:

ok hold on ill put i now online

Cheers you can change it back now. I see the problem... not 100% on the fix. But I can post what I see...or find a fix smile

1 questions...
Do you have images turned off?