Announcement

Collapse
No announcement yet.

How to replace this image with function by class css

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

  • 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

  • #2
    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

    Comment


    • #3
      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.

      Comment


      • #4
        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.

        Comment


        • #5
          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,

          Comment


          • #6
            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>

            Comment


            • #7
              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?

              Comment


              • #8
                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 ^^

                Comment


                • #9
                  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

                  Comment


                  • #10
                    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

                    Comment


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

                      Comment


                      • #12
                        Yes simply

                        Comment

                        widgetinstance 262 (Related Topics) skipped due to lack of content & hide_module_if_empty option.
                        Working...
                        X