The forum of the forums
Welcome to the Official Support Forum of Forumotion!

To take full advantage of everything offered by our forum, please log in if you are already a member, or join our community if you've not yet.



Create a free forum like this one.

Who is online customization

View previous topic View next topic Go down

Solved Who is online customization

Post by Guest on June 27th 2015, 2:06 pm

Hullo,
I have a question.Very HappyIs it possible to fully customize the "Who is online?" part of the forum?
Normally it looks like this:


But I'd like to divide it into 3 tables, like this:


Is there an existing code for it or could anyone help me, please?Very Happy
My forum version is punbb.

Thanks in advance!


Last edited by Diana on July 8th 2015, 11:03 am; edited 1 time in total

Guest
Guest


Back to top Go down

Solved Re: Who is online customization

Post by Sir. Mayo on June 27th 2015, 6:26 pm

What is your forum url?

Sir. Mayo
Forumember

Male Posts : 960
Reputation : 84
Language : English, Some french.
Location : Working 11Pm-7Am EST I will try to respond ASAP

http://sir-mayo.forumotion.com/

Back to top Go down

Solved Re: Who is online customization

Post by Guest on June 28th 2015, 12:42 pm

tophun.net Lol

Guest
Guest


Back to top Go down

Solved Re: Who is online customization

Post by Sir. Mayo on June 28th 2015, 3:39 pm

Awesome, thanks what colors did you want it? I have worked up a little of it up in html, but am only able o on my free time so i should have it by june 1st, EDT Time. If thats fine?

Sir. Mayo
Forumember

Male Posts : 960
Reputation : 84
Language : English, Some french.
Location : Working 11Pm-7Am EST I will try to respond ASAP

http://sir-mayo.forumotion.com/

Back to top Go down

Solved Re: Who is online customization

Post by Guest on June 30th 2015, 9:26 am

Thank you! Yellow border and white background is possible? Very Happy

I'm patient, just take your time, but truly hope byjune 1st you meant july 1st.Mr. Green

Guest
Guest


Back to top Go down

Solved Re: Who is online customization

Post by Ange Tuteur on July 7th 2015, 11:49 am

Hi @Diana,

Before I intervene, I'd like to ask you if the template index_body has been modified ? If it has, could you provide me it so I can work from it ?

Ange Tuteur
Forumaster

Male Posts : 13021
Reputation : 2681
Language : EN10, FR5
Location : Pennsylvania

http://fmdesign.forumotion.com

Back to top Go down

Solved Re: Who is online customization

Post by Guest on July 7th 2015, 12:48 pm

Hi Ange!Mr. Green
Thank you, here it is:

Spoiler:
Code:
{JAVASCRIPT}
<!-- BEGIN switch_user_logged_in -->
<div id="pun-visit" class="clearfix">
   <ul>
         <li><a href="{U_SEARCH_NEW}">{L_SEARCH_NEW}</a></li>
         <li><a href="{U_SEARCH_SELF}">{L_SEARCH_SELF}</a></li>
      <li><a href="{U_SEARCH_UNANSWERED}">{L_SEARCH_UNANSWERED}</a></li>
      <li><a href="{U_MARK_READ}">{L_MARK_FORUMS_READ}</a></li>
   </ul>
   <p>{LOGGED_AS}. {LAST_VISIT_DATE}</p>
</div>
<!-- END switch_user_logged_in -->


<!-- BEGIN switch_user_login_form_header -->
<div class="main">
<form action="{S_LOGIN_ACTION}" method="post" name="form_login">
   <div class="user_login_form main-box center">
      <label><span class="genmed">{L_USERNAME} :</span> <input class="post" type="text" size="10" name="username" /></label> &nbsp;
      <label><span class="genmed">{L_PASSWORD} :</span> <input class="post" type="password" size="10" name="password" /></label> &nbsp;
      <label><span class="gensmall">{L_AUTO_LOGIN}</span> <input class="radio" type="checkbox" name="autologin" {AUTOLOGIN_CHECKED} /></label> &nbsp;
      {S_HIDDEN_FIELDS}<input class="mainoption" type="submit" name="login" value="{L_LOGIN}" />
      <!-- BEGIN switch_fb_connect -->
      <span class="fb_or">{switch_user_login_form_header.switch_fb_connect.L_OR}</span>
      <fb:login-button size="large" onlogin="window.location='/facebook_connect.forum'" v="2" scope="{switch_user_login_form_header.switch_fb_connect.L_FB_PERMISSIONS}">{switch_user_login_form_header.switch_fb_connect.L_FB_LOGIN_BUTTON}</fb:login-button>
      <!-- END switch_fb_connect -->
   </div>
</form>
</div>
<!-- END switch_user_login_form_header -->

{CHATBOX_TOP}


{BOARD_INDEX}

<!-- BEGIN disable_viewonline -->
<div class="main">
   <div class="a_box stats" id="stats_area">
   <a class="fake_pos" id="goto_stats"></a>
      <div id="a_box_padding">
         <h1 id="abox_head">
            <span id="abox_img"></span>
            <!-- BEGIN switch_viewonline_link -->
            <a href="{U_VIEWONLINE}" rel="nofollow">{L_WHO_IS_ONLINE}</a>
            <!-- END switch_viewonline_link -->
            <!-- BEGIN switch_viewonline_nolink -->
            <a href="#stats_area">{L_WHO_IS_ONLINE}</a>
            <!-- END switch_viewonline_nolink -->
         </h1>
         <div id="abox_descript">
            <span class="right">{TOTAL_POSTS}</span>
            {TOTAL_USERS}<br/>
            {NEWEST_USER}
            <!--div class="dhighlight" style="background: #fbcb43;">
               <div id="dh_img"></div>
               <h2>
                  We Are Forumotion Skin Fixers<br/>
                  <a href="" class="dh_button">Xem c?ng đ?ng</a>
               </h2>
               <br class="clfloat"/>
            </div-->
         </div>
         <div id="abox_descript">
            {TOTAL_USERS_ONLINE}<br />
            {RECORD_USERS}
            <br />
            {LOGGED_IN_USER_LIST}

            {L_ONLINE_USERS}
            {L_CONNECTED_MEMBERS}<br />
            {L_WHOSBIRTHDAY_TODAY}{L_WHOSBIRTHDAY_WEEK}
            <div class="clear"></div>

            <p>Csoportok: <span id="groupLegend">{GROUP_LEGEND}</span></p>
         </div>
         <!-- BEGIN switch_chatbox_activate -->
         <div id="abox_lastpost">
            {TOTAL_CHATTERS_ONLINE}&nbsp;:&nbsp;
            {CHATTERS_LIST}<br />
            <!-- BEGIN switch_chatbox_popup -->
               <div id="chatbox_popup"></div>
               <script type="text/javascript">
                  insertChatBoxPopup('{disable_viewonline.switch_chatbox_activate.switch_chatbox_popup.U_FRAME_CHATBOX}', '{L_CLICK_TO_JOIN_CHAT}');
               </script>
            <!-- END switch_chatbox_popup -->
         </div>
         <!-- END switch_chatbox_activate -->
      </div>
   </div>
</div>
<!-- END disable_viewonline -->
<!-- BEGIN switch_user_logged_out -->
<div id="pun-visit">
   <p>{L_NOT_CONNECTED} {L_LOGIN_REGISTER}</p>
</div>
<!-- END switch_user_logged_out -->

<!-- BEGIN message_admin_index -->
<div class="main">
   <!-- BEGIN message_admin_titre -->
   <div class="main-head">
      <h1 class="page-title">{message_admin_index.message_admin_titre.MES_TITRE}</h1>
   </div>
   <!-- END message_admin_titre -->

   <!-- BEGIN message_admin_txt -->
   <div id="pun-announcement">
      <p>{message_admin_index.message_admin_txt.MES_TXT}</p>
   </div>
   <!-- END message_admin_txt -->
</div>
<!-- END message_admin_index -->
<!-- BEGIN switch_user_login_form_footer -->
<form action="{S_LOGIN_ACTION}" method="post" name="form_login">
   <div class="user_login_form main-box center">
      <label><span class="genmed">{L_USERNAME} :</span> <input class="post" type="text" size="10" name="username"/></label> &nbsp;
      <label><span class="genmed">{L_PASSWORD} :</span> <input class="post" type="password" size="10" name="password"/></label> &nbsp;
      <label><span class="gensmall">{L_AUTO_LOGIN}</span> <input class="radio" type="checkbox" name="autologin" {AUTOLOGIN_CHECKED} /></label> &nbsp;
      {S_HIDDEN_FIELDS}<input class="mainoption" type="submit" name="login" value="{L_LOGIN}" />
      <!-- BEGIN switch_fb_connect -->
      <span class="genmed fb_or">{switch_user_login_form_footer.switch_fb_connect.L_OR}</span>
      <fb:login-button size="large" onlogin="window.location='/facebook_connect.forum'" v="2" scope="{switch_user_login_form_footer.switch_fb_connect.L_FB_PERMISSIONS}">{switch_user_login_form_footer.switch_fb_connect.L_FB_LOGIN_BUTTON}</fb:login-button>
      <!-- END switch_fb_connect -->
   </div>
</form>
<!-- END switch_user_login_form_footer -->

{CHATBOX_BOTTOM}

<!-- BEGIN switch_legend -->
<ul id="pun-legend">
   <li>
      <img src="{FORUM_NEW_IMG}" alt="{L_NEW_POSTS}" />&nbsp;{L_NEW_POSTS}
      <img src="{FORUM_IMG}" alt="{L_NO_NEW_POSTS}" />&nbsp;{L_NO_NEW_POSTS}
      <img src="{FORUM_LOCKED_IMG}" alt="{L_FORUM_LOCKED}" />&nbsp;{L_FORUM_LOCKED}
   </li>
</ul>
<!-- END switch_legend -->

{AUTO_DST}

<!-- BEGIN switch_fb_index_login -->
<div id="fb-root"></div>
<script>
FB.init({
appId : {switch_fb_index_login.FACEBOOK_APP_ID},
cookie : true,
xfbml : true,
oauth : true,
version : 'v2.3'
});

(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/en_US/sdk.js";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
</script>
<!-- END switch_fb_index_login -->

Guest
Guest


Back to top Go down

Solved Re: Who is online customization

Post by Ange Tuteur on July 7th 2015, 1:39 pm

@Diana thanks Smile

Replace your template with this :
Code:
{JAVASCRIPT}
<!-- BEGIN switch_user_logged_in -->
<div id="pun-visit" class="clearfix">
  <ul>
        <li><a href="{U_SEARCH_NEW}">{L_SEARCH_NEW}</a></li>
        <li><a href="{U_SEARCH_SELF}">{L_SEARCH_SELF}</a></li>
      <li><a href="{U_SEARCH_UNANSWERED}">{L_SEARCH_UNANSWERED}</a></li>
      <li><a href="{U_MARK_READ}">{L_MARK_FORUMS_READ}</a></li>
  </ul>
  <p>{LOGGED_AS}. {LAST_VISIT_DATE}</p>
</div>
<!-- END switch_user_logged_in -->


<!-- BEGIN switch_user_login_form_header -->
<div class="main">
<form action="{S_LOGIN_ACTION}" method="post" name="form_login">
  <div class="user_login_form main-box center">
      <label><span class="genmed">{L_USERNAME} :</span> <input class="post" type="text" size="10" name="username" /></label> &nbsp;
      <label><span class="genmed">{L_PASSWORD} :</span> <input class="post" type="password" size="10" name="password" /></label> &nbsp;
      <label><span class="gensmall">{L_AUTO_LOGIN}</span> <input class="radio" type="checkbox" name="autologin" {AUTOLOGIN_CHECKED} /></label> &nbsp;
      {S_HIDDEN_FIELDS}<input class="mainoption" type="submit" name="login" value="{L_LOGIN}" />
      <!-- BEGIN switch_fb_connect -->
      <span class="fb_or">{switch_user_login_form_header.switch_fb_connect.L_OR}</span>
      <fb:login-button size="large" onlogin="window.location='/facebook_connect.forum'" v="2" scope="{switch_user_login_form_header.switch_fb_connect.L_FB_PERMISSIONS}">{switch_user_login_form_header.switch_fb_connect.L_FB_LOGIN_BUTTON}</fb:login-button>
      <!-- END switch_fb_connect -->
  </div>
</form>
</div>
<!-- END switch_user_login_form_header -->

{CHATBOX_TOP}


{BOARD_INDEX}

<!-- BEGIN disable_viewonline -->
<div id="whoisOnline">
  <div class="whoisBox">
    <div class="whoisBoxInner">
      {TOTAL_USERS}<br/>
      {NEWEST_USER}<br/><br/>
   
      {TOTAL_USERS_ONLINE}<br/>
      {RECORD_USERS}<br/><br/>
   
      {TOTAL_POSTS}<br/><br/>
   
      {L_WHOSBIRTHDAY_TODAY}{L_WHOSBIRTHDAY_WEEK}
    </div>
  </div>
 
  <div class="whoisBox">
    <div class="whoisBoxInner">
      {LOGGED_IN_USER_LIST}<br/><br/>
      {L_ONLINE_USERS}
      {L_CONNECTED_MEMBERS}
    </div>
  </div>
 
  <div class="whoisBox">
    <div class="whoisBoxInner">
      <p>Csoportok: <span id="groupLegend">{GROUP_LEGEND}</span></p>
    </div>
  </div>
  <div class="clear"></div>
</div>
<!-- END disable_viewonline -->
<!-- BEGIN switch_user_logged_out -->
<div id="pun-visit">
  <p>{L_NOT_CONNECTED} {L_LOGIN_REGISTER}</p>
</div>
<!-- END switch_user_logged_out -->

<!-- BEGIN message_admin_index -->
<div class="main">
  <!-- BEGIN message_admin_titre -->
  <div class="main-head">
      <h1 class="page-title">{message_admin_index.message_admin_titre.MES_TITRE}</h1>
  </div>
  <!-- END message_admin_titre -->

  <!-- BEGIN message_admin_txt -->
  <div id="pun-announcement">
      <p>{message_admin_index.message_admin_txt.MES_TXT}</p>
  </div>
  <!-- END message_admin_txt -->
</div>
<!-- END message_admin_index -->
<!-- BEGIN switch_user_login_form_footer -->
<form action="{S_LOGIN_ACTION}" method="post" name="form_login">
  <div class="user_login_form main-box center">
      <label><span class="genmed">{L_USERNAME} :</span> <input class="post" type="text" size="10" name="username"/></label> &nbsp;
      <label><span class="genmed">{L_PASSWORD} :</span> <input class="post" type="password" size="10" name="password"/></label> &nbsp;
      <label><span class="gensmall">{L_AUTO_LOGIN}</span> <input class="radio" type="checkbox" name="autologin" {AUTOLOGIN_CHECKED} /></label> &nbsp;
      {S_HIDDEN_FIELDS}<input class="mainoption" type="submit" name="login" value="{L_LOGIN}" />
      <!-- BEGIN switch_fb_connect -->
      <span class="genmed fb_or">{switch_user_login_form_footer.switch_fb_connect.L_OR}</span>
      <fb:login-button size="large" onlogin="window.location='/facebook_connect.forum'" v="2" scope="{switch_user_login_form_footer.switch_fb_connect.L_FB_PERMISSIONS}">{switch_user_login_form_footer.switch_fb_connect.L_FB_LOGIN_BUTTON}</fb:login-button>
      <!-- END switch_fb_connect -->
  </div>
</form>
<!-- END switch_user_login_form_footer -->

{CHATBOX_BOTTOM}

<!-- BEGIN switch_legend -->
<ul id="pun-legend">
  <li>
      <img src="{FORUM_NEW_IMG}" alt="{L_NEW_POSTS}" />&nbsp;{L_NEW_POSTS}
      <img src="{FORUM_IMG}" alt="{L_NO_NEW_POSTS}" />&nbsp;{L_NO_NEW_POSTS}
      <img src="{FORUM_LOCKED_IMG}" alt="{L_FORUM_LOCKED}" />&nbsp;{L_FORUM_LOCKED}
  </li>
</ul>
<!-- END switch_legend -->

{AUTO_DST}

<!-- BEGIN switch_fb_index_login -->
<div id="fb-root"></div>
<script>
    FB.init({
      appId      : {switch_fb_index_login.FACEBOOK_APP_ID},
      cookie    : true,
      xfbml      : true,
      oauth      : true,
      version    : 'v2.3'
    });

  (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/en_US/sdk.js";
    fjs.parentNode.insertBefore(js, fjs);
  }(document, 'script', 'facebook-jssdk'));
</script>
<!-- END switch_fb_index_login -->

and add the following CSS to your stylesheet :
Code:
.whoisBox {
  color:#000;
  font-size:12px;
  text-align:center;
  background:#FFF;
  border:3px solid #FBCB43;
  border-top-width:18px;
  border-radius:30px;
  margin:6px 12px;
  padding:12px;
  display:table;
  width:28%;
  height:200px;
  float:left;
}

.whoisBoxInner {
  display:table-cell;
  vertical-align:middle;
}

It should give you the following result :


Let me know if anything needs changing. Wink

Ange Tuteur
Forumaster

Male Posts : 13021
Reputation : 2681
Language : EN10, FR5
Location : Pennsylvania

http://fmdesign.forumotion.com

Back to top Go down

Solved Re: Who is online customization

Post by Guest on July 7th 2015, 3:07 pm

Omg, it's working and looks so pretty! THANK YOU!! ~1~

Guest
Guest


Back to top Go down

Solved Re: Who is online customization

Post by Ange Tuteur on July 7th 2015, 4:09 pm

No problem ! Mr. Green

If there's any problems let me know. I used a different method to vertically center the text, but from what I can see it looks perfect on your forum. thumleft

Ange Tuteur
Forumaster

Male Posts : 13021
Reputation : 2681
Language : EN10, FR5
Location : Pennsylvania

http://fmdesign.forumotion.com

Back to top Go down

Solved Re: Who is online customization

Post by Guest on July 8th 2015, 10:59 am

Oh, everything is just perfect! Thank you very much! Mr. Green

Solved.

Guest
Guest


Back to top Go down

Solved Re: Who is online customization

Post by Ange Tuteur on July 8th 2015, 11:52 am

You're welcome ^^

Topic archived

Enjoy your day. Mr. Green

Ange Tuteur
Forumaster

Male Posts : 13021
Reputation : 2681
Language : EN10, FR5
Location : Pennsylvania

http://fmdesign.forumotion.com

Back to top Go down

View previous topic View next topic Back to top


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