How to replace this image with function by class css

[stradfred89]

Hie all,

How to replace this image with function by class css:

<img src="$stylevar[imgdir_statusicon]/$forum[imageprefix]forum_$forum[statusicon].gif" alt="" border="0" id="forum_statusicon_$forum[forumid]" />

Thanks in advance.

[stradfred89]

I am can be badly expressed, saddened I speak not indeed about English.

I would like to call the images forum_new.gif, forum_old.gif, forum_link.gif with a class css.

I tried well with that:

.statusicon {
border-top : 1px solid #191919;
border-bottom : 1px solid #040404;
background : #101010 url(images/statusicon/$forum[imageprefix]forum_$forum[statusicon].gif) no-repeat center;
width : 29px;
height : 29px;
}

But without any successes

[DoE]

That won't work because CSS gets evaluated once, and you need it to be re-evaluated for each forum.

What you will need to do is place that CSS in each template that you want the status icon to use that css class, as the template gets evaluated for each forum. For example:

Open forumhome_forumbit_level1_post (this is for Sub Forums)

At the top you will find:

<if condition="!$show['collapsable_forums']">
<tbody>
</if>

Directly below that, paste in this:

<style type="text/css">
.statusicon {
border-top : 1px solid #191919;
border-bottom : 1px solid #040404;
background : #101010 url($stylevar[imgdir_statusicon]/$forum[imageprefix]forum_$forum[statusicon].gif) no-repeat center;
width : 29px;
height : 29px;
}
</style>

To apply it to the TD you will need:

   <td class="statusicon"><img src="clear.gif" width="29" height="29" alt="" border="0" id="forum_statusicon_$forum[forumid]" /></td>

The clear image is required for both ensuring a proper TD width, (as you are using the status image as a background), and to give something to assign the forum id to.

Hopefully the above example will give you a starting point.

[stradfred89]

Thanks a lot !! Work great

Ok the style directely on the template, good idea.


Edit: Itshows well icones forum_old.gif but does not change status during a new message

[DoE]

Seemed too easy for it to work the first time.

I think what you may have to do is make two CSS definitions (.statusicon_new .statusicons_old), placed in your main CSS, and then use a conditional in the TD to select which definition to use. I tested this on my site and it works to give the new or old status icon for sub-forums (this does not take into account different status icon prefixes for now):

Place in your main CSS:

.statusicon_new {
border-top : 1px solid #191919;
border-bottom : 1px solid #040404;
background : #101010 url($stylevar[imgdir_statusicon]/forum_new.gif) no-repeat center;
width : 29px;
height : 29px;
}
.statusicon_old {
border-top : 1px solid #191919;
border-bottom : 1px solid #040404;
background : #105010 url($stylevar[imgdir_statusicon]/forum_old.gif) no-repeat center;
width : 29px;
height : 29px;
}

and in the forumhome_forumbit_level1_post template:

 
 <td class=<if condition="$forum['statusicon'] == 'new'">"statusicon_new"<else />"statusicon_old"</if>><img src="clear.gif" alt="" border="0" id="forum_statusicon_$forum[forumid]" /></td>

Hopefully you can use the above example to get a little closer to what you want to achieve,

[stradfred89]

ha great, sympathetic to your share me help.

But how to continue the conditions for all the icons?

Here are how i' have make the continuation:

<td class=<if condition="$forum['statusicon'] == 'new'">"statusicon_new"<else />"statusicon_old"</if><if condition="$forum['statusicon'] == 'new_lock'">"statusicon_new_lock"<else />"statusicon_old_lock"</if><if condition="$forum['statusicon'] == 'link'">"statusicon_link"</if>><img src="$stylevar[imgdir_misc]/clear.gif" width="29" height="29" alt="" border="0" id="forum_statusicon_$forum[forumid]" /></td>

[DoE]

Wow, long statement,

Let me think about it for tonight and see if I can come up with a better way to use CSS for status icons.

It is a good challenge, but I need to ask, why try to put the status icons into CSS, when they work well the way they are?

[stradfred89]

In fact I make a design for my site which uses several colors, and instead of using similar styles which weighed down for nothing the BD, I thus make call up has sheets of outside style to show my design in of the other one colors.

Otherwise with the higher given code I is only the statu forum_old and forum_new which displays, padlocks do not want ^^

[stradfred89]

ho i find in functions_forumlist.php, the declaration

forum['statusicon'] .= '_lock';

I add this in my template :

<if condition="$forum['statusicon'] == 'lock'">"statusicon_new_lock"<else />"statusicon_old_lock"</if>

But don't work

[stradfred89]

Ok is Solved !

Juste add css :

.new {
border-top : 1px solid #191919;
border-bottom : 1px solid #040404;
background : #101010 url(../../statusicon/forum_new.gif) no-repeat center;
width : 29px;
height : 29px;
}
.old {
border-top : 1px solid #191919;
border-bottom : 1px solid #040404;
background : #101010 url(../../statusicon/forum_old.gif) no-repeat center;
width : 29px;
height : 29px;
}
.lock {
border-top : 1px solid #191919;
border-bottom : 1px solid #040404;
background : #101010 url(../../statusicon/forum_new_lock.gif) no-repeat center;
width : 29px;
height : 29px;
}
.old_lock {
border-top : 1px solid #191919;
border-bottom : 1px solid #040404;
background : #101010 url(../../statusicon/forum_old_lock.gif) no-repeat center;
width : 29px;
height : 29px;
}
.link {
border-top : 1px solid #191919;
border-bottom : 1px solid #040404;
background : #101010 url(../../statusicon/forum_link.gif) no-repeat center;
width : 29px;
height : 29px;
}

and the template:

<td class="$forum[statusicon]"><img src="$stylevar[imgdir_misc]/clear.gif" width="29" height="29" alt="" border="0" id="forum_statusicon_$forum[forumid]" /></td>

The end

[DoE]

Nice! I would never have thought of using $forum[statusicon] to determine the assigned class!

[stradfred89]

Yes simply