The forum of the forums

Would you like to react to this message? Create an account in a few clicks or log in to continue.
The forum of the forums
5 posters

    Add Offline Icon

    Glavee
    Glavee
    Forumember


    Posts : 149
    Reputation : 1
    Language : English

    Solved Add Offline Icon

    Post by Glavee December 24th 2014, 9:20 pm

    Hi!

    Everytime someone is logged on it appears Online, but when it's off, nothing appears. I would like to put an Offline icon too.

    How should I do that?


    Last edited by Glavee on December 29th 2014, 1:24 pm; edited 1 time in total
    Ange Tuteur
    Ange Tuteur
    Forumaster


    Male Posts : 13207
    Reputation : 3000
    Language : English & 日本語
    Location : Pennsylvania

    Solved Re: Add Offline Icon

    Post by Ange Tuteur December 25th 2014, 4:07 am

    Hello Glavee,

    Add the following rules to your stylesheet.
    Display > Colors > CSS stylesheet
    Code:
    .post { background:url(/your_img.gif) no-repeat top right } /*offline*/
    .post.online { background:url(/your_img.gif) no-repeat top right } /*online*/

    Replace /your_img.gif by the URL of your online and offline image. I marked them with comments. Wink
    Glavee
    Glavee
    Forumember


    Posts : 149
    Reputation : 1
    Language : English

    Solved Re: Add Offline Icon

    Post by Glavee December 25th 2014, 10:46 am

    Ange Tuteur, it doesn't work, maybe because my Online icon is on top-right?

    Here's the code that I introduced:

    Code:
    .post { background:url(http://i39.servimg.com/u/f39/19/09/39/37/offlin12.png) no-repeat top right } /*offline*/
    .post.online { background:url(http://i39.servimg.com/u/f39/19/09/39/37/online14.png) no-repeat top right } /*online*/
    Ange Tuteur
    Ange Tuteur
    Forumaster


    Male Posts : 13207
    Reputation : 3000
    Language : English & 日本語
    Location : Pennsylvania

    Solved Re: Add Offline Icon

    Post by Ange Tuteur December 26th 2014, 12:00 am

    Is your forum version still phpbb3, or did you change it again ?
    Glavee
    Glavee
    Forumember


    Posts : 149
    Reputation : 1
    Language : English

    Solved Re: Add Offline Icon

    Post by Glavee December 26th 2014, 1:49 am

    Ange Tuteur wrote:Is your forum version still phpbb3, or did you change it again ?

    I changed it again. I like more the design of punBB.
    Glavee
    Glavee
    Forumember


    Posts : 149
    Reputation : 1
    Language : English

    Solved Re: Add Offline Icon

    Post by Glavee December 26th 2014, 5:48 pm

    BUMP
    Glavee
    Glavee
    Forumember


    Posts : 149
    Reputation : 1
    Language : English

    Solved Re: Add Offline Icon

    Post by Glavee December 27th 2014, 12:15 am

    Bump
    _Twisted_Mods_
    _Twisted_Mods_
    Helper
    Helper


    Male Posts : 2083
    Reputation : 336
    Language : English
    Location : Ms

    Solved Re: Add Offline Icon

    Post by _Twisted_Mods_ December 27th 2014, 1:53 am

    i couldnt figure it out with css but you can goto
    modules>javascript managment and create a new javascript and use this

    Code:
    $(function(){
    $('.pun .post .username').prepend(' <img src="http://i39.servimg.com/u/f39/19/09/39/37/offlin12.png" class="i_icon_offline" alt="Offline" title="Offline" style="z-index:0;position: absolute; margin-left: 150px;width:49px;height:14px;"> ');
    $('.pun .post .username .i_icon_online').attr('src', 'http://i39.servimg.com/u/f39/19/09/39/37/online14.png');
    $('.pun .post .username .i_icon_online').attr('style', 'z-index:1;position: absolute; margin-left: 150px;');
    });
    Glavee
    Glavee
    Forumember


    Posts : 149
    Reputation : 1
    Language : English

    Solved Re: Add Offline Icon

    Post by Glavee December 27th 2014, 2:03 am

    _Twisted_Mods_ wrote:i couldnt figure it out with css but you can goto
    modules>javascript managment and create a new javascript and use this

    Code:
    $(function(){
    $('.pun .post .username').prepend(' <img src="http://i39.servimg.com/u/f39/19/09/39/37/offlin12.png" class="i_icon_offline" alt="Offline" title="Offline" style="z-index:0;position: absolute; margin-left: 150px;width:49px;height:14px;"> ');
    $('.pun .post .username .i_icon_online').attr('src', 'http://i39.servimg.com/u/f39/19/09/39/37/online14.png');
    $('.pun .post .username .i_icon_online').attr('style', 'z-index:1;position: absolute; margin-left: 150px;');
    });

    @_Twisted_Mods_ It doesn't work, but I've edited my viewtopic_body and CSS, that's how it looks like:

    viewtopic_body:

    Code:
    <script type="text/javascript">//<![CDATA[
    var multiquote_img_off = '{JS_MULTIQUOTE_IMG_OFF}', multiquote_img_on = '{JS_MULTIQUOTE_IMG_ON}', _atr = '{JS_DIR}addthis/', _ati = '{PATH_IMG_FA}addthis/'{ADDTHIS_LANG}, addthis_localize = { share_caption: "{L_SHARE_CAPTION}", email: "{L_EMAIL}", email_caption: "{L_EMAIL_CAPTION}", favorites: "{L_SHARE_BOOKMARKS}", print: "{L_PRINT}", more: "{L_MORE}" };
    $(function(){

        if(typeof(_atc) == "undefined") {
            _atc = { };
        }

        _atc.cwait = 0;
        $('.addthis_button').mouseup(function(){
            if ($('#at15s').css('display') == 'block') {
                addthis_close();
            }
        });
    });

    var hiddenMsgLabel = { visible:'{JS_HIDE_HIDDEN_MESSAGE}', hidden:'{JS_SHOW_HIDDEN_MESSAGE}' };
    showHiddenMessage = function(id)
    {
        try
        {
            var regId = parseInt(id, 10);
            if( isNaN(regId) ) { regId = 0; }
           
            if( regId > 0)
            {
                $('.post--' + id).toggle(0, function()
            {
                if( $(this).is(":visible") )
                {
                  $('#hidden-title--' + id).html(hiddenMsgLabel.visible);
                }
                else
                {
                  $('#hidden-title--' + id).html(hiddenMsgLabel.hidden);
                }
            });
            }
        }
        catch(e) { }
       
      return false;
    };

    //]]>
    </script>

    <!-- BEGIN switch_user_logged_in -->
    <div id="pun-visit" class="clearfix">
      <ul>
          <!-- BEGIN switch_plus_menu -->
          <li>
            <script type="text/javascript">//<![CDATA[
                var url_favourite = '{switch_user_logged_in.U_FAVOURITE_JS_PLUS_MENU}';
                var url_newposts = '{U_NEWPOSTS_JS_PLUS_MENU}';
                var url_egosearch = '{U_EGOSEARCH_JS_PLUS_MENU}';
                var url_unanswered = '{U_UNANSWERED_JS_PLUS_MENU}';
                var url_watchsearch = '{U_WATCHSEARCH_JS_PLUS_MENU}';
                var url_tellfriend = '{U_TELLFRIEND_JS_PLUS_MENU}';
                insert_plus_menu_new('f{FORUM_ID}&amp;t={TOPIC_ID}','{JS_SESSION_ID}', {JS_AUTH_FAVOURITES});
            //]]>
            </script>
          </li>
          <!-- END switch_plus_menu -->
          <li><a class="addthis_button" href="http://www.addthis.com/bookmark.php?v=250&amp;pub=forumotion">{L_SHARE}</a></li>
          <li><a href="{U_SEARCH_NEW}">{L_SEARCH_NEW}</a></li>
          <li><a href="{U_SEARCH_SELF}">{L_SEARCH_SELF}</a></li>
          <!-- BEGIN watchtopic -->
          <li>{S_WATCH_TOPIC}</li>
          <!-- END watchtopic -->
      </ul>
      <p>{LOGGED_AS}. {LAST_VISIT_DATE}</p>
    </div>
    <!-- END switch_user_logged_in -->
    <!-- BEGIN switch_user_logged_out -->
    <div id="pun-visit">
      <p>{L_NOT_CONNECTED} {L_LOGIN_REGISTER}</p>
    </div>
    <!-- END switch_user_logged_out -->

    <div class="pun-crumbs noprint">
      <p class="crumbs" itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
          <a href="{U_INDEX}" itemprop="url"><span itemprop="title">{L_INDEX}</span></a>{NAV_CAT_DESC}&nbsp;ť&nbsp;
          <strong><a href="{TOPIC_URL}" itemprop="url"><span itemprop="title">{TOPIC_TITLE}</span></a></strong>
          <!-- BEGIN switch_twitter_btn -->
          <span id="twitter_btn" style="margin-left: 6px; ">
            <a href="http://twitter.com/share" class="twitter-share-button" data-count="horizontal">Tweet</a>
            <script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>
          </span>
          <!-- END switch_twitter_btn -->
          <!-- BEGIN switch_fb_likebtn -->
          <div id="fb-root"></div>
          <script>(function(d, s, id) {
            var js, fjs = d.getElementsByTagName(s)[0];
            if (d.getElementById(id)) return;
            js = d.createElement(s); js.id = id;
            js.src = "//connect.facebook.net/{LANGUAGE}/all.js#xfbml=1";
            fjs.parentNode.insertBefore(js, fjs);
          }(document, 'script', 'facebook-jssdk'));</script> 
          <div class="fb-like right" data-href="{FORUM_URL}{TOPIC_URL}" data-layout="button_count" data-action="like" data-show-faces="false" data-share="false" style="top:-15px;"></div>
          <!-- END switch_fb_likebtn -->
      </p>
    </div>

    <div class="main paged">
      <div class="paged-head clearfix">
                <h1>{TOPIC_TITLE}</h1>
          <!-- BEGIN topicpagination -->
          <p class="paging">{PAGINATION}</p>
          <!-- END topicpagination -->
          <p class="posting">
            <!-- BEGIN switch_user_authpost -->
            <a href="{U_POST_NEW_TOPIC}" rel="nofollow"><img src="{POST_IMG}" class="{POST_IMG_CLASS}" alt="{L_POST_NEW_TOPIC}" /></a>&nbsp;&nbsp;
            <!-- END switch_user_authpost -->

            <!-- BEGIN switch_user_authreply -->
            <a href="{U_POST_REPLY_TOPIC}"><img src="{REPLY_IMG}" class="i_reply" alt="{L_POST_REPLY_TOPIC}" /></a>
            <!-- END switch_user_authreply -->
          </p>
      </div>
      {POLL_DISPLAY}
      <div class="main-head clearfix">
          <p class="h2">
            <a href="{U_VIEW_OLDER_TOPIC}">{L_VIEW_PREVIOUS_TOPIC}</a>&nbsp;<a href="{U_VIEW_NEWER_TOPIC}">{L_VIEW_NEXT_TOPIC}</a>&nbsp;<a href="#bottom">{L_GOTO_DOWN}</a>&nbsp;&nbsp;
            {L_MESSAGE} [{PAGE_NUMBER}]
          </p>
      </div>

      <div class="main-content topic">
          <!-- BEGIN postrow -->
            <!-- BEGIN hidden -->
                <p class="p-hidden">{postrow.hidden.MESSAGE}</p>
            <!-- END hidden -->
           
            <!-- BEGIN displayed -->
           
            <div class="post post--{postrow.displayed.U_POST_ID}"{postrow.displayed.THANK_BGCOLOR} style="{postrow.displayed.DISPLAYABLE_STATE}">
                <a name="{postrow.displayed.U_POST_ID}" style="position: relative; top: -20px; width: 1px;" id="{postrow.displayed.U_POST_ID}"></a>
                <div class="postmain"{postrow.displayed.THANK_BGCOLOR}>
                  <div id="p{postrow.displayed.U_POST_ID}" class="posthead"{postrow.displayed.THANK_BGCOLOR}>
                      <h2>
                        <strong>{postrow.displayed.COUNT_POSTS}</strong>
                        {postrow.displayed.ICON} <a href="{postrow.displayed.POST_URL}">{postrow.displayed.POST_SUBJECT}</a> {postrow.displayed.POST_DATE_NEW}
                      </h2>
                  </div>

                  <div class="postbody"{postrow.displayed.THANK_BGCOLOR}>
                    <div class="user">
                      <div class="user-ident">
                            <center><h4 class="username">{postrow.displayed.ONLINE_IMG}{postrow.displayed.POSTER_NAME}</h4></center>
                            <div class="user-basic-info">
                              <center><br />{postrow.displayed.RANK_IMAGE}
                                {postrow.displayed.POSTER_AVATAR}<br /></center>
                            </div>
                        </div>
                        <div class="user-info">
                            <!-- BEGIN profile_field -->
                            {postrow.displayed.profile_field.LABEL}{postrow.displayed.profile_field.CONTENT}{postrow.displayed.profile_field.SEPARATOR}
                            <!-- END profile_field -->
                            {postrow.displayed.POSTER_RPG}
                        </div>
                      </div>

                      <div class="post-entry">
                        <div class="entry-content">
                            <!-- BEGIN switch_vote_active -->
                            <div class="vote gensmall">
                              <!-- BEGIN switch_vote -->
                              <div class="vote-button"><a href="{postrow.displayed.switch_vote_active.switch_vote.U_VOTE_PLUS}"><img src="http://i39.servimg.com/u/f39/19/09/39/37/button13.png"></a></div>
                              <!-- END switch_vote -->

                              <!-- BEGIN switch_bar -->
                              <div class="vote-bar" title="{postrow.displayed.switch_vote_active.L_VOTE_TITLE}">
                                  <!-- BEGIN switch_vote_plus -->
                                  <div class="vote-bar-plus" style="height:{postrow.displayed.switch_vote_active.switch_bar.switch_vote_plus.HEIGHT_PLUS}px;"></div>
                                  <!-- END switch_vote_plus -->

                                  <!-- BEGIN switch_vote_minus -->
                                  <div class="vote-bar-minus" style="height:{postrow.displayed.switch_vote_active.switch_bar.switch_vote_minus.HEIGHT_MINUS}px;"></div>
                                  <!-- END switch_vote_minus -->
                              </div>
                              <!-- END switch_bar -->

                              <!-- BEGIN switch_no_bar -->
                                <div title="{postrow.displayed.switch_vote_active.L_VOTE_TITLE}" class="vote-no-bar"><br /></div>
                              <!-- END switch_no_bar -->

                              <!-- BEGIN switch_vote -->
                              <div class="vote-button"><a href="{postrow.displayed.switch_vote_active.switch_vote.U_VOTE_MINUS}"><img src="http://i39.servimg.com/u/f39/19/09/39/37/button14.png"></a></div>
                              <!-- END switch_vote -->
                            </div>
                            <!-- END switch_vote_active -->
                            <div>
                              <div>{postrow.displayed.MESSAGE}</div>
                              <!-- BEGIN switch_attachments -->
                              <dl class="attachbox">
                                  <dt>{postrow.displayed.switch_attachments.L_ATTACHMENTS}</dt>
                                  <dd>
                                    <!-- BEGIN switch_post_attachments -->
                                    <dl class="file">
                                        <dt>
                                          <img src="{postrow.displayed.switch_attachments.switch_post_attachments.U_IMG}" alt="" />

                                          <!-- BEGIN switch_dl_att -->
                                          <a class="postlink" href="{postrow.displayed.switch_attachments.switch_post_attachments.switch_dl_att.U_ATTACHMENT}">{postrow.displayed.switch_attachments.switch_post_attachments.switch_dl_att.ATTACHMENT}</a> {postrow.displayed.switch_attachments.switch_post_attachments.switch_dl_att.ATTACHMENT_DEL}
                                          <!-- END switch_dl_att -->

                                          <!-- BEGIN switch_no_dl_att -->
                                          {postrow.displayed.switch_attachments.switch_post_attachments.switch_no_dl_att.ATTACHMENT} {postrow.displayed.switch_attachments.switch_post_attachments.switch_no_dl_att.ATTACHMENT_DEL}
                                          <!-- END switch_no_dl_att -->
                                        </dt>

                                        <!-- BEGIN switch_no_comment -->
                                        <dd>
                                          <em>{postrow.displayed.switch_attachments.switch_post_attachments.switch_no_comment.ATTACHMENT_COMMENT}</em>
                                        </dd>
                                        <!-- END switch_no_comment -->

                                        <!-- BEGIN switch_no_dl_att -->
                                        <dd>
                                          <em><strong>{postrow.displayed.switch_attachments.switch_post_attachments.switch_no_dl_att.TEXT_NO_DL}</strong></em>
                                        </dd>
                                        <!-- END switch_no_dl_att -->

                                        <dd>({postrow.displayed.switch_attachments.switch_post_attachments.FILE_SIZE}) {postrow.displayed.switch_attachments.switch_post_attachments.NB_DL}</dd>
                                    </dl>
                                    <!-- END switch_post_attachments -->
                                  </dd>
                              </dl>
                              <!-- END switch_attachments -->
                                                                     
                                                                      <div class="clear"></div>
                            </div>
                            <p>
                               
                            </p>
                        </div>
                      </div>
                  </div>
                                                                     
                  <!-- BEGIN switch_signature -->
                  <div class="sig-content">
                      {postrow.displayed.SIGNATURE_NEW}
                  </div>
                  <!-- END switch_signature -->

                  <div class="postfoot">
                      <div class="user-contact profile_{postrow.displayed.PROFILE_POSITION}">
                        {postrow.displayed.PROFILE_IMG} {postrow.displayed.PM_IMG} {postrow.displayed.EMAIL_IMG}<!-- BEGIN contact_field --> {postrow.displayed.contact_field.CONTENT}<!-- END contact_field -->
                      </div>
                      <div class="post-options profile_{postrow.displayed.PROFILE_POSITION}">
                        {postrow.displayed.THANK_IMG} {postrow.displayed.MULTIQUOTE_IMG} {postrow.displayed.QUOTE_IMG} {postrow.displayed.EDIT_IMG} {postrow.displayed.DELETE_IMG} {postrow.displayed.IP_IMG} {postrow.displayed.REPORT_IMG}
                      </div>
                      <div style="clear:both;"></div>
                  </div>
                </div>
            </div>
            <!-- BEGIN first_post_br -->
            </div>
            <hr id="first-post-br" />
            <div class="main-content topic">
            <!-- END first_post_br -->
            <!-- END displayed -->
          <!-- END postrow -->
      </div>

      <div class="main-foot clearfix">
          <p class="h2">
            <a href="{U_VIEW_OLDER_TOPIC}">{L_VIEW_PREVIOUS_TOPIC}</a>&nbsp;<a href="{U_VIEW_NEWER_TOPIC}">{L_VIEW_NEXT_TOPIC}</a>&nbsp;<a href="#top">{L_BACK_TO_TOP}</a>&nbsp;&nbsp;
            {L_MESSAGE} [{PAGE_NUMBER}]
          </p>
          <p class="options">
            <input type="hidden" name="t" value="{TOPIC_ID}" />

            <!-- <input type="hidden" name="sid" value="{S_SID}" /> -->
            <input type="hidden" name="{SECURE_ID_NAME}" value="{SECURE_ID_VALUE}" />

            <!-- BEGIN viewtopic_bottom -->
            {S_TOPIC_ADMIN}
            <!-- END viewtopic_bottom -->
          </p>
      </div>

      <a name="bottomtitle"></a>

      <div class="paged-foot clearfix">
          <!-- BEGIN topicpagination -->
          <p class="paging">{PAGINATION}</p>
          <!-- END topicpagination -->
          <p class="posting">
            <!-- BEGIN switch_user_authpost -->
            <a href="{U_POST_NEW_TOPIC}" rel="nofollow"><img src="{POST_IMG}" class="{POST_IMG_CLASS}" alt="{L_POST_NEW_TOPIC}" /></a>&nbsp;&nbsp;
            <!-- END switch_user_authpost -->

            <!-- BEGIN switch_user_authreply -->
            <a href="{U_POST_REPLY_TOPIC}"><img src="{REPLY_IMG}" class="i_reply" alt="{L_POST_REPLY_TOPIC}" /></a>
            <!-- END switch_user_authreply -->
          </p>
      </div>

    </div>

    <div class="pun-crumbs">
      <p class="crumbs">
          <a href="{U_INDEX}">{L_INDEX}</a>{NAV_CAT_DESC}&nbsp;ť&nbsp;
          <strong><a href="{TOPIC_URL}">{TOPIC_TITLE}</a></strong>
      </p>
    </div>

    <!-- BEGIN promot_trafic -->
    <div class="main" id="ptrafic_close" style="display:none">
      <div class="main-head clearfix">
          <p class="h2">{PROMOT_TRAFIC_TITLE}</p>
          <p class="options"><a href="javascript:ShowHideLayer('ptrafic_open','ptrafic_close');"><img src="{TABS_MORE_IMG}" alt="+" align="" border="0" /></a></p>
      </div>
    </div>
    <div class="main" id="ptrafic_open" style="display:''">
      <div class="main-head clearfix">
          <p class="h2">{PROMOT_TRAFIC_TITLE}</p>
          <p class="options"><a href="javascript:ShowHideLayer('ptrafic_open','ptrafic_close');"><img src="{TABS_LESS_IMG}" alt="-" align="" border="0" /></a></p>
      </div>
      <div class="main-content clearfix">
          <!-- BEGIN link -->
          ť&nbsp;<a href="{promot_trafic.link.U_HREF}" target="_blank" title="{promot_trafic.link.TITLE}" rel="nofollow">{promot_trafic.link.TITLE}</a><br />
          <!-- END link -->
      </div>
    </div>
    <!-- END promot_trafic -->

    <!-- BEGIN switch_forum_rules -->
    <div class="main" id="forum_rules">
      <div class="main-head clearfix">
          <p class="h2">{L_FORUM_RULES}</p>
      </div>
      <table class="main-content frm">
          <tr>
            <!-- BEGIN switch_forum_rule_image -->
            <td class="logo">
                <img src="{RULE_IMG_URL}" alt="" />
            </td>
            <!-- END switch_forum_rule_image -->
            <td class="rules entry-content">
                {RULE_MSG}
            </td>
          </tr>
      </table>
    </div>
    <!-- END switch_forum_rules -->

    <!-- BEGIN switch_user_logged_in -->
    <a name="quickreply"></a>
    {QUICK_REPLY_FORM}
    <!-- END switch_user_logged_in -->

    <div id="pun-info" class="main">
      <div class="main-content">
          <div id="stats">
            <p>{L_TABS_PERMISSIONS} <br />{S_AUTH_LIST}</p>
          </div>
      </div>
    </div>

    <!-- BEGIN switch_image_resize -->
    <script type="text/javascript">
    //<![CDATA[
    $(resize_images({ 'selector' : '.post-entry .entry-content', 'max_width' : {switch_image_resize.IMG_RESIZE_WIDTH}, 'max_height' : {switch_image_resize.IMG_RESIZE_HEIGHT} }));
    //]]>
    </script>
    <!-- END switch_image_resize -->

    <script src="{JS_DIR}addthis/addthis_widget.js" type="text/javascript"></script>

    CSS:

    Code:
    body {
        background-color: #164269;
        color: #5A5A5A;
        font-family: tahoma,helvetica,arial,sans-serif;
        font-size: 13px;
        padding-bottom: 15px;
        margin-top: 15px;
    }

    .pun {
        background-color: #fff;
        width: 75%;
    }

    #pun_out {
        background:url("http://i43.servimg.com/u/f43/14/53/79/27/matti10.png") repeat;background:rgba(0,0,0,0.18);
        border:1px solid #0b2337;
        border:1px solid rgba(0,0,0,0.35);
        -webkit-box-shadow:inset rgba(255,255,255,0.1) 0px 0px 0px 1px;
        -moz-box-shadow:inset rgba(255,255,255,0.1) 0px 0px 0px 1px;
        box-shadow:inset rgba(255,255,255,0.1) 0px 0px 0px 1px;
        padding:8px;
        position:relative;
        width: 990px;
        margin-left: auto;
        margin-right: auto;
        -webkit-border-radius: 4px;
        -moz-border-radius: 4px;
        border-radius: 4px;
    }

    #pun-intro {
        background-color: #304154;
        background-image: url("http://i43.servimg.com/u/f43/14/53/79/27/backgr10.png");
        background-repeat: repeat-x;
        padding: 1.5em 1em 1em 1em;
        border-bottom: 0px solid #296fa5;
        text-align: left;
        box-shadow: 0 0 5px rgba(0, 0, 0, 0.75) inset;
        margin-bottom: 10px;
        border: 1px solid #273749;
        -webkit-border-radius: 4px;
        -moz-border-radius: 4px;
        border-radius: 4px;
        height: 85px;
    }

    .main .main-head {
        background-color: #1E4371;
        background-image: url("http://i43.servimg.com/u/f43/14/53/79/27/bg-top10.png");
        background-position: 50% 50%;
        background-repeat: repeat-x;
        box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.25) inset, 0 1px 3px rgba(0, 0, 0, 0.3), 0 2px 0 rgba(255, 255, 255, 0.2) inset;
        color: #FFFFFF;
        font-size: 12px;
        font-weight: bold !important;
        margin-top: 15px;
        padding-bottom: 13px;
        padding-left: 13px;
        padding-right: 13px;
        padding-top: 13px;
        text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
        -webkit-border-radius: 4px 4px 0px 0px;
        -moz-border-radius: 4px 4px 0px 0px;
        border-radius: 4px 4px 0px 0px;
    }

    .pun .main-content {
        background-color: #FBFBFB;
        border: 1px solid #B9C4CD;
    }

    .pun table.table td {
        background: #e6effd url(http://i43.servimg.com/u/f43/14/53/79/27/altbg10.gif) repeat-x top left;
        border-top: 1px solid #B9C4CD;
        border-right: 0px solid #000;
        border-left: 0px solid #000;
        line-height: 130%;
        padding-bottom: 0.7em;
        padding-left: 0;
        padding-right: 0;
        padding-top: 0.6em;
    }
    .pun .main table td.tc2, .pun .main table td.tc3 {
        background: #e6effd url(http://i43.servimg.com/u/f43/14/53/79/27/altbg10.gif) repeat-x top left;
        border-top: 1px solid #B9C4CD;
    }

    .pun table.table th {
        background: #d9d9d9 url(http://i43.servimg.com/u/f43/14/53/79/27/gradie10.png) repeat-x 0 50%;
        color: #333333;
        padding-bottom: 0.5em;
        padding-left: 0;
        padding-right: 0;
        padding-top: 0.5em;
    }

    #pun-logo {
        margin-left: -13px;
        margin-top: -22px;
    }

    #pun-logo:hover { opacity: 0.8; }

    .for_topics {
        width: 74px;
        height: 33px;
        background: url("http://i43.servimg.com/u/f43/14/53/79/27/fp10.png") no-repeat left top;
        text-align: center;
        font-size: 12px;
        font-weight: bold;   
        line-height: normal;
        color: #0e2c3e;
        padding-top: 3px;
        margin-left: 13px;
    }

    .for_topics span {
        display: block;
        color: #105289;
        font-size: 10px;
    }

    .for_posts {
        width: 74px;
        height: 33px;
        background: url("http://i43.servimg.com/u/f43/14/53/79/27/fp10.png") no-repeat left top;
        text-align: center;
        font-size: 12px;
        font-weight: bold;   
        line-height: normal;
        color: #0e2c3e;
        padding-top: 3px;
        margin-left: 13px;
    }

    .for_posts span {
        display: block;
        color: #105289;
        font-size: 10px;
    }

    .page-title h2, .page-title span {
        color: #FFFFFF !important;
        font-size: 14px;
        font-weight: bold;
    }

    .pun .paged-head, .pun .paged-foot {
        border: 0px solid !important;
        background-color: !important;
        padding: 0.6em 1.3em 0.3em 1.3em;

    }

    .pun .frm-form {
       background: !important;
       border: none;

    }

    #pun-head #pun-navlinks {
        box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.2) inset;
        background-color: #304154;
        background-image: url("http://i43.servimg.com/u/f43/14/73/12/96/pun-na10.png");
        background-origin: padding-box;
        background-position: 0 0;
        background-repeat: repeat-x;
        border: 1px solid #1E2831;
        height: 28px;
        -webkit-border-radius: 4px;
        -moz-border-radius: 4px;
        border-radius: 4px;
    }

    #pun-navlinks ul {
        text-align: center;
    }
    #pun-navlinks li {
        display: inline;
        font-size: 15px;
        line-height: 30px;
    }
    #pun-navlinks li a {
        margin-left: -8px;
        margin-right: -8px;
        color: #fff;
        font-family: tahoma,helvetica,arial,sans-serif
        text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.8);
        padding-top: 12px;
        padding-left: 14px;
        padding-right: 14px;
        padding-bottom: 10px;
    }
    #pun-navlinks a, #pun-navlinks a:visited {
        text-decoration: none;
    }
    #pun-navlinks a:active, #pun-navlinks a:focus, #pun-navlinks a:hover {
        text-decoration: none;
        color: #fff;
        text-shadow: 0 0 4px rgba(255, 255, 255, 0.7);
        padding-top: 12px;
        padding-left: 14px;
        padding-right: 14px;
        padding-bottom: 10px;
        background-color: rgba(0, 0, 0, 0.2);
    }

    .main .main-foot{
        background-color: #fff;
        color: #666;
        font-weight: 400;
        padding-bottom: 0.7em;
        padding-left: 1.3em;
        padding-right: 1.3em;
        padding-top: 0.7em;
    }

    .pun a:link { color: #105289;text-decoration: none;}
    .pun a:visited { color: #105289;}
    .pun a:hover { color: #ff6600; text-decoration: none;}
    .pun a:active { color: #990000;}

    #pun-title {
        display: none;
    }

    .pun .post {
        border: 1px solid #CBDAEA;
        margin: 10px;
        background: #FDFEFF;
    }

    .postfoot {
        border-top: 1px solid #CBDAEA;
        clear: both;
        margin-left: -17em;
        padding-bottom: 0.5em;
        padding-left: 1em;
        padding-right: 1em;
        padding-top: 0.5em;
        text-align: right;
        background: #F4FAFF;
    }

    .pun .postmain {
        background-color: #FDFEFF;
        border-left: 1px solid #CBDAEA;
        margin-left: 17em;
    }
    .pun .posthead {
        background-color: #F4FAFF;
        border-bottom: 1px solid #CBDAEA;
        padding-bottom: 0.5em;
        padding-left: 1em;
        padding-right: 1.3em;
        padding-top: 0.5em;
    }

    .entry-content {
        font-family: Verdana,Helvetica,Arial,sans-serif;
        font-size: 13px;
    }

    .user-contact a {
        background-color: #2e425a;
        -webkit-border-radius: 4px;
        -moz-border-radius: 4px;
        border-radius: 4px;
        color: #FFFFFF;
        display: inline-block;
        padding: 3px;
        box-shadow: rgba(0,0,0,0.6) 0px 0px 2px;
        -webkit-box-shadow: rgba(0,0,0,0.6) 0px 0px 2px;
        -moz-box-shadow: rgba(0,0,0,0.6) 0px 0px 2px;
        -khtml-box-shadow: rgba(0,0,0,0.6) 0px 0px 2px;
    }

    .codebox {
        background-color: #E4EAF2;
        margin-bottom: 1em;
        margin-left: 1em;
        margin-right: 1em;
        margin-top: 1em;
        border: 1px solid #8394B2;
        border-left: 4px solid #8394B2;
    }
    .codebox dt {
        border-bottom: 1px solid #8394B2;
        padding-bottom: 0.25em;
        padding-left: 0.25em;
        padding-right: 0.25em;
        padding-top: 0.25em;
        font-weight: bold;
        color: #8394B2;
    }
    .codebox dd {
        background-color: #fff;
        color: #435C7A;
        margin-bottom: 1px;
        margin-left: 1px;
        margin-right: 1px;
        margin-top: 1px;
        padding-bottom: 4px;
        padding-left: 4px;
        padding-right: 4px;
        padding-top: 4px;
    }

    .postmain blockquote {
        background-color: #FFFFFF;
        border: 1px solid #4E6A97;
        padding-bottom: 0.5em;
        padding-left: 1em;
        padding-right: 1em;
        padding-top: 0.5em;
        border-radius: 3px; -webkit-border-radius:  3px; -moz-border-radius:  3px; -khtml-border-radius:  3px;
    }

    #pun-about {
        background-color: #F4F4F4;
        border: 1px solid #DDDDDD;
        line-height: 150%;
        padding-bottom: 0.6em;
        padding-left: 1em;
        padding-right: 1em;
        padding-top: 0.6em;
        text-align: right;

    }
    #pun-about ul {
        list-style-type: none;
    }
    #pun-about ul li {
        display: inline;
    }
    #pun-about ul li a {
        font-weight: normal;
        text-decoration: none;
    }
    #pun-about #qjump {
        display: none;
    }

    #pun-visit, .main-box {
        background-color: #F4F4F4;
        border: 1px solid #B9C4CD;
        margin-left: 0;
        margin-right: 0;
        margin-top: 0;
        padding-bottom: 0.6em;
        padding-left: 1em;
        padding-right: 1em;
        padding-top: 0.6em;

    }

    h4.username br {
      display: none;
    }

    .edit{ display: none; }

    #repu { margin:2px 0; }
    .repuBlock {
        height:8px;
        width:8px;
        background:#0A0;
        border:1px solid #080;
        -webkit-border-radius:2px;
          -moz-border-radius:2px;
                border-radius:2px;
        -webkit-box-shadow:0 3px 3px #0C0 inset;
          -moz-box-shadow:0 3px 3px #0C0 inset;
                box-shadow:0 3px 3px #0C0 inset;
        display:inline-block;
        margin:0 0.5px;
    }

    .vote {float: right;
    width: 35px;
    margin-left: 4px;}

    .a_chat_pm tr, .a_chat_pm td, .a_chat_tab tr, .a_chat_tab td {
        display:none!important;
    }
    .a_chat_pm:before, .a_chat_tab:before {
        content: 'Hidden Content';
        font-style: italic;
    }

    h4.away, h4.away + ul {
        display: none;
    }

    Hope we can do something... :/

    Thank you!
    _Twisted_Mods_
    _Twisted_Mods_
    Helper
    Helper


    Male Posts : 2083
    Reputation : 336
    Language : English
    Location : Ms

    Solved Re: Add Offline Icon

    Post by _Twisted_Mods_ December 27th 2014, 3:20 am

    did u turn on javascript and set it to all pages?
    Glavee
    Glavee
    Forumember


    Posts : 149
    Reputation : 1
    Language : English

    Solved Re: Add Offline Icon

    Post by Glavee December 27th 2014, 10:40 am

    _Twisted_Mods_ wrote:did u turn on javascript and set it to all pages?

    If you mean Enable Javascript code management, yes.


    If not, I don't know.
    _Twisted_Mods_
    _Twisted_Mods_
    Helper
    Helper


    Male Posts : 2083
    Reputation : 336
    Language : English
    Location : Ms

    Solved Re: Add Offline Icon

    Post by _Twisted_Mods_ December 27th 2014, 2:28 pm

    this is for the site in your profile correct?
    Glavee
    Glavee
    Forumember


    Posts : 149
    Reputation : 1
    Language : English

    Solved Re: Add Offline Icon

    Post by Glavee December 27th 2014, 6:16 pm

    _Twisted_Mods_ wrote:this is for the site in your profile correct?

    If you talk about the Offline button, no it's for the profile from the messages in posts.
    _Twisted_Mods_
    _Twisted_Mods_
    Helper
    Helper


    Male Posts : 2083
    Reputation : 336
    Language : English
    Location : Ms

    Solved Re: Add Offline Icon

    Post by _Twisted_Mods_ December 27th 2014, 7:32 pm

    no the url to your site
    Glavee
    Glavee
    Forumember


    Posts : 149
    Reputation : 1
    Language : English

    Solved Re: Add Offline Icon

    Post by Glavee December 27th 2014, 7:35 pm

    _Twisted_Mods_ wrote:no the url to your site

    http://1001hacks.omgforum.net/
    Glavee
    Glavee
    Forumember


    Posts : 149
    Reputation : 1
    Language : English

    Solved Re: Add Offline Icon

    Post by Glavee December 28th 2014, 12:11 pm

    Bump
    Glavee
    Glavee
    Forumember


    Posts : 149
    Reputation : 1
    Language : English

    Solved Re: Add Offline Icon

    Post by Glavee December 28th 2014, 11:33 pm

    BUMP
    Glavee
    Glavee
    Forumember


    Posts : 149
    Reputation : 1
    Language : English

    Solved Re: Add Offline Icon

    Post by Glavee December 29th 2014, 2:52 am

    Just on top...
    Derri
    Derri
    Helper
    Helper


    Male Posts : 8711
    Reputation : 638
    Language : English & Basic French
    Location : Scotland, United Kingdom

    Solved Re: Add Offline Icon

    Post by Derri December 29th 2014, 3:09 am

    Glavee wrote:Bump

    Glavee wrote:BUMP

    Glavee wrote:Just on top...

    You've been reminded twice about your bumping of thread before they can be bumped again. You must wait 24 hours since the last reply in order to bump your thread. Since this is your third reminder you have received a warning. If you continue then you'll be given another warning.

    Ange Tuteur
    Ange Tuteur
    Forumaster


    Male Posts : 13207
    Reputation : 3000
    Language : English & 日本語
    Location : Pennsylvania

    Solved Re: Add Offline Icon

    Post by Ange Tuteur December 29th 2014, 5:25 am

    Hello @Glavee,

    Go to Administration Panel > Display > Templates > General > viewtopic_body Edit

    Find :
    Code:
    {postrow.displayed.ONLINE_IMG}

    Replace by :
    Code:
    <div class="isOn">{postrow.displayed.ONLINE_IMG}</div>

    Save and publish. Add


    Next go to Modules > JavaScript codes management > Create a new script

    Titre : Your choice
    Placement : In all the pages
    Code:
    $(function() {
     Â var image_offline = 'http://2img.net/i/fa/subsilver/topic_delete.gif';
     Â for (var i=0,a=document.getElementsByTagName('DIV'); i<a.length; i++) {
     Â   if (/isOn/.test(a[i].className) && !a[i].firstChild) {
     Â     var off = document.createElement('IMG');
     Â     off.src = image_offline, off.className = 'i_icon_offline';
     Â     a[i].appendChild(off);
     Â   }
     Â }
    });

    To change the offline image, replace https://2img.net/i/fa/subsilver/topic_delete.gif by the URL of your image.
    Glavee
    Glavee
    Forumember


    Posts : 149
    Reputation : 1
    Language : English

    Solved Re: Add Offline Icon

    Post by Glavee December 29th 2014, 12:23 pm

    Ange Tuteur wrote:Hello @Glavee,

    Go to Administration Panel > Display > Templates > General > viewtopic_body Edit

    Find :
    Code:
    {postrow.displayed.ONLINE_IMG}

    Replace by :
    Code:
    <div class="isOn">{postrow.displayed.ONLINE_IMG}</div>

    Save and publish. Add


    Next go to Modules > JavaScript codes management > Create a new script

    Titre : Your choice
    Placement : In all the pages
    Code:
    $(function() {
     Â var image_offline = 'bla bla';
     Â for (var i=0,a=document.getElementsByTagName('DIV'); i<a.length; i++) {
     Â   if (/isOn/.test(a[i].className) && !a[i].firstChild) {
     Â     var off = document.createElement('IMG');
     Â     off.src = image_offline, off.className = 'i_icon_offline';
     Â     a[i].appendChild(off);
     Â   }
     Â }
    });

    To change the offline image, replace BLA BLA by the URL of your image.

    This is how the code looks like:

    Code:
    <div class="postbody"{postrow.displayed.THANK_BGCOLOR}>
     Â                <div class="user">
     Â                  <div class="user-ident">
     Â                    <h4 class="username"><div class="isOn">{postrow.displayed.ONLINE_IMG}</div>{postrow.displayed.POSTER_NAME}</h4>
     Â                    <div class="user-basic-info">
     Â                         <center>{postrow.displayed.RANK_IMAGE}
     Â                           {postrow.displayed.POSTER_AVATAR}</center>
     Â                       </div>

    I want it to stay before the username.

    Add Offline Icon Nhe611

    I want it to look like before, but with offline button too (in the same position as the online one):

    Add Offline Icon Erh65e13
    TheCrow
    TheCrow
    Manager
    Manager


    Male Posts : 6916
    Reputation : 795
    Language : Greek, English

    Solved Re: Add Offline Icon

    Post by TheCrow December 29th 2014, 12:53 pm

    Change the command <div class="isOn"> to <span class="isOn"> and the last command </div> to </span> and remove all commands from CSS that have .isOn in it. That should fix your problem.
    Glavee
    Glavee
    Forumember


    Posts : 149
    Reputation : 1
    Language : English

    Solved Re: Add Offline Icon

    Post by Glavee December 29th 2014, 1:11 pm

    To every one who wanna do this too, follow this tutorial (it works on punbb for sure)!

    1. Follow the Ange Tuteur's steps (on his last post)
    2. Change what Luffy said and delete all form CSS which contain .isOn
    3. And now if you refresh the page, the offline icon will dissapear so all you have to to now is:

       PA > Modules > HTML & JAVASCRIPT > Javascript codes management > and find your javascript code where you introduced Ange Tuteur's code and Open it.

       Now you need to find:
       
    Code:
    for (var i=0,a=document.getElementsByTagName('DIV'); i<a.length; i++) {


      and replace it with:

    Code:
    for (var i=0,a=document.getElementsByTagName('SPAN'); i<a.length; i++) {

    And now it should work (at least for punbb version).

    Thank you Ange Tuteur and Luffy!
    Ange Tuteur
    Ange Tuteur
    Forumaster


    Male Posts : 13207
    Reputation : 3000
    Language : English & 日本語
    Location : Pennsylvania

    Solved Re: Add Offline Icon

    Post by Ange Tuteur December 29th 2014, 8:16 pm

    You're welcome Wink

    Topic archived

      Current date/time is September 22nd 2024, 7:22 pm