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.

Add Offline Icon

5 posters

Go down

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
Glavee
Glavee
Forumember

Posts : 149
Reputation : 1
Language : English

http://1point.forumstech.com/

Back to top Go down

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
Ange Tuteur
Ange Tuteur
Forumaster

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

https://fmdesign.forumotion.com

Back to top Go down

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*/
Glavee
Glavee
Forumember

Posts : 149
Reputation : 1
Language : English

http://1point.forumstech.com/

Back to top Go down

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 ?
Ange Tuteur
Ange Tuteur
Forumaster

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

https://fmdesign.forumotion.com

Back to top Go down

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

http://1point.forumstech.com/

Back to top Go down

Solved Re: Add Offline Icon

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

BUMP
Glavee
Glavee
Forumember

Posts : 149
Reputation : 1
Language : English

http://1point.forumstech.com/

Back to top Go down

Solved Re: Add Offline Icon

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

Bump
Glavee
Glavee
Forumember

Posts : 149
Reputation : 1
Language : English

http://1point.forumstech.com/

Back to top Go down

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;');
});
_Twisted_Mods_
_Twisted_Mods_
Helper
Helper

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

http://liquidcode.forumotion.com

Back to top Go down

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!
Glavee
Glavee
Forumember

Posts : 149
Reputation : 1
Language : English

http://1point.forumstech.com/

Back to top Go down

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?
_Twisted_Mods_
_Twisted_Mods_
Helper
Helper

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

http://liquidcode.forumotion.com

Back to top Go down

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.
Glavee
Glavee
Forumember

Posts : 149
Reputation : 1
Language : English

http://1point.forumstech.com/

Back to top Go down

Solved Re: Add Offline Icon

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

this is for the site in your profile correct?
_Twisted_Mods_
_Twisted_Mods_
Helper
Helper

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

http://liquidcode.forumotion.com

Back to top Go down

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.
Glavee
Glavee
Forumember

Posts : 149
Reputation : 1
Language : English

http://1point.forumstech.com/

Back to top Go down

Solved Re: Add Offline Icon

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

no the url to your site
_Twisted_Mods_
_Twisted_Mods_
Helper
Helper

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

http://liquidcode.forumotion.com

Back to top Go down

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

http://1point.forumstech.com/

Back to top Go down

Solved Re: Add Offline Icon

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

Bump
Glavee
Glavee
Forumember

Posts : 149
Reputation : 1
Language : English

http://1point.forumstech.com/

Back to top Go down

Solved Re: Add Offline Icon

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

BUMP
Glavee
Glavee
Forumember

Posts : 149
Reputation : 1
Language : English

http://1point.forumstech.com/

Back to top Go down

Solved Re: Add Offline Icon

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

Just on top...
Glavee
Glavee
Forumember

Posts : 149
Reputation : 1
Language : English

http://1point.forumstech.com/

Back to top Go down

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.

Derri
Derri
Helper
Helper

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

Back to top Go down

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.
Ange Tuteur
Ange Tuteur
Forumaster

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

https://fmdesign.forumotion.com

Back to top Go down

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
Glavee
Glavee
Forumember

Posts : 149
Reputation : 1
Language : English

http://1point.forumstech.com/

Back to top Go down

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.
TheCrow
TheCrow
Manager
Manager

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

https://www.inforumgr.com

Back to top Go down

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!
Glavee
Glavee
Forumember

Posts : 149
Reputation : 1
Language : English

http://1point.forumstech.com/

Back to top Go down

Solved Re: Add Offline Icon

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

You're welcome Wink

Topic archived
Ange Tuteur
Ange Tuteur
Forumaster

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

https://fmdesign.forumotion.com

Back to top Go down

Back to top

- Similar topics

 
Permissions in this forum:
You cannot reply to topics in this forum