Announcement

Collapse
No announcement yet.

How to replace this image with function by class css

Collapse
X
 
  • Filter
  • Time
  • Show
Clear All
new posts

  • stradfred89
    replied
    Yes simply

    Leave a comment:


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

    Leave a comment:


  • stradfred89
    replied
    Ok is Solved !

    Juste add css :

    Code:
    .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:

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

    Leave a comment:


  • stradfred89
    replied
    ho i find in functions_forumlist.php, the declaration
    Code:
    forum['statusicon'] .= '_lock';
    I add this in my template :
    Code:
    <if condition="$forum['statusicon'] == 'lock'">"statusicon_new_lock"<else />"statusicon_old_lock"</if>
    But don't work

    Leave a comment:


  • stradfred89
    replied
    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 ^^

    Leave a comment:


  • DoE
    replied
    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?

    Leave a comment:


  • stradfred89
    replied
    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:

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

    Leave a comment:


  • DoE
    replied
    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:

    Code:
    .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:

    Code:
     
     <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,

    Leave a comment:


  • stradfred89
    replied
    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
    Last edited by stradfred89; Mon 20th Apr '09, 8:31am.

    Leave a comment:


  • DoE
    replied
    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:

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

    Code:
       <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.

    Leave a comment:


  • stradfred89
    replied
    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:
    Code:
    .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

    Leave a comment:


  • stradfred89
    started a topic How to replace this image with function by class css

    How to replace this image with function by class css

    Hie all,

    How to replace this image with function by class css:

    Code:
    <img src="$stylevar[imgdir_statusicon]/$forum[imageprefix]forum_$forum[statusicon].gif" alt="" border="0" id="forum_statusicon_$forum[forumid]" />
    Thanks in advance.
    Last edited by stradfred89; Tue 21st Apr '09, 12:26pm. Reason: Solved
widgetinstance 262 (Related Topics) skipped due to lack of content & hide_module_if_empty option.
Working...
X