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.

online status beside username [PunBB]

View previous topic View next topic Go down

Solved online status beside username [PunBB]

Post by zenzo on March 27th 2013, 2:05 pm

how to move the online icon on the left side of the username

version PunBB

http://pinoywebmaster.forumotion.com/


Last edited by zenzo on March 30th 2013, 4:57 pm; edited 1 time in total

zenzo
Forumember

Posts : 464
Reputation : 13
Language : english,tagalog
Location : philippines

Back to top Go down

Solved Re: online status beside username [PunBB]

Post by Sanket on March 27th 2013, 2:19 pm

Display>Templates>General
Click on Edit corresponding to viewtopic_body.
Then find this.
Code:
{postrow.displayed.ONLINE_IMG}
Remove that code from there.

Then find this.
Code:
<h4 class="username">{postrow.displayed.POSTER_NAME}</h4>
Replace it with this code.
Code:
{postrow.displayed.ONLINE_IMG}<h4 class="username">{postrow.displayed.POSTER_NAME}</h4>

Hit Save.
Then Publish the templates. See if it works.

The image will appear, but it will be a little misplaced.
Add this to your css to fix its position. I have tried it with the image i have. You can add your image & play around based on the size of your online image.
Code:
.pun .user-ident .username {
    padding-top: 15px !important;
    padding-left: 10px !important;
}
img#i_icon_online {
    margin-bottom: 10px !important;
}

Sanket
ForumGuru

Male Posts : 48766
Reputation : 2819
Language : English
Location : Mumbai

http://webartzforum.com

Back to top Go down

Solved Re: online status beside username [PunBB]

Post by zenzo on March 27th 2013, 2:31 pm

wow it work,. can you add a little space between the icon and username
about 2px


and how to add offline status

zenzo
Forumember

Posts : 464
Reputation : 13
Language : english,tagalog
Location : philippines

Back to top Go down

Solved Re: online status beside username [PunBB]

Post by Sanket on March 27th 2013, 2:35 pm

The offline button never appears for PunBB, does it? So i am afraid thats not possible via this.
Maybe, by javascript.


To increase the spacing, increase the padding-left to 13 px or something.
padding-left: 10px !important;

Sanket
ForumGuru

Male Posts : 48766
Reputation : 2819
Language : English
Location : Mumbai

http://webartzforum.com

Back to top Go down

Solved Re: online status beside username [PunBB]

Post by zenzo on March 27th 2013, 2:42 pm

done adjusting,.

this JS code works on invision
Code:
$(function(){
$('.post:not(".online")').addClass('offline');
$('.post.offline .post-header .popmenubutton a').prepend('<img src="" />');
});

for online offline status

so how to convert it and use for PunBB

zenzo
Forumember

Posts : 464
Reputation : 13
Language : english,tagalog
Location : philippines

Back to top Go down

Solved Re: online status beside username [PunBB]

Post by Sanket on March 27th 2013, 2:51 pm

I don't think i am aware of what needs to be changed in the javascript code. Sorry.

Sanket
ForumGuru

Male Posts : 48766
Reputation : 2819
Language : English
Location : Mumbai

http://webartzforum.com

Back to top Go down

Solved Re: online status beside username [PunBB]

Post by zenzo on March 27th 2013, 11:15 pm


zenzo
Forumember

Posts : 464
Reputation : 13
Language : english,tagalog
Location : philippines

Back to top Go down

Solved Re: online status beside username [PunBB]

Post by Cassius Dio on March 28th 2013, 6:37 am

Hi! Very Happy

For PunBB you can use:
Code:
$(function(){
$('.post:has("#i_icon_online")').addClass('online');
$('.post:not(".online")').addClass('offline');
$('.post.offline .user-info').prepend('<img src="Link offline image" class="i_icon_offline" alt="Offline" title="Offline" /><br />');
});
Replace Link offline image to URL adress of your offline image. Wink

Cassius Dio
Forumember

Male Posts : 581
Reputation : 79
Language : Romanian &English
Location : Yellow Submarine

http://beatles.forummo.com/

Back to top Go down

Solved Re: online status beside username [PunBB]

Post by zenzo on March 28th 2013, 7:05 am

it works SGSS

but it appears on the default position
the online status was place before the username

tell me how to place it also the offline before the username

zenzo
Forumember

Posts : 464
Reputation : 13
Language : english,tagalog
Location : philippines

Back to top Go down

Solved Re: online status beside username [PunBB]

Post by Cassius Dio on March 28th 2013, 4:56 pm

Try this:
Code:
$(function(){
$('.post:has("#i_icon_online")').addClass('online');
$('.post:not(".online")').addClass('offline');
$('.post.offline .username').before('<img src="Link offline image" class="i_icon_offline" alt="Offline" title="Offline" /><br />');
});

Cassius Dio
Forumember

Male Posts : 581
Reputation : 79
Language : Romanian &English
Location : Yellow Submarine

http://beatles.forummo.com/

Back to top Go down

Solved Re: online status beside username [PunBB]

Post by zenzo on March 28th 2013, 11:33 pm

SGSS wrote:Try this:
Code:
$(function(){
$('.post:has("#i_icon_online")').addClass('online');
$('.post:not(".online")').addClass('offline');
$('.post.offline .username').before('<img src="Link offline image" class="i_icon_offline" alt="Offline" title="Offline" /><br />');
});
perfect,. :wouhou:

one thins SGSS,. i try to replace icon into letter

i try this code but did not work
Code:
.post.online  a:before {
  content: 'Online';
  color: lime;
  display: inline-block;
  padding-right:  5px;
  text-shadow: 1px 1px 5px rgba(255, 255, 255, 0.8);
}

.post.offline  a:before {
  content: 'Offline';
  color: red;
  display: inline-block;
  padding-right:  5px;
  text-shadow: 1px 1px 5px rgba(255, 255, 255, 0.8);
}

zenzo
Forumember

Posts : 464
Reputation : 13
Language : english,tagalog
Location : philippines

Back to top Go down

Solved Re: online status beside username [PunBB]

Post by Cassius Dio on March 29th 2013, 6:44 pm

Simple. Replace the JavaScript code by:
Code:
$(function(){
$('.post:has("#i_icon_online")').addClass('online');
$('.post:not(".online")').addClass('offline');
$('.post.offline .username').before('Offline ');
});

You don't need the CSS part. Wink

Cassius Dio
Forumember

Male Posts : 581
Reputation : 79
Language : Romanian &English
Location : Yellow Submarine

http://beatles.forummo.com/

Back to top Go down

Solved Re: online status beside username [PunBB]

Post by zenzo on March 29th 2013, 10:52 pm

SGSS wrote:Simple. Replace the JavaScript code by:
Code:
$(function(){
$('.post:has("#i_icon_online")').addClass('online');
$('.post:not(".online")').addClass('offline');
$('.post.offline .username').before('Offline ');
});

You don't need the CSS part. Wink

wow :wouhou: this is what i like


i also add online on the code
Code:
$(function(){
$('.post:has("#i_icon_online")').addClass('online');
$('.post:not(".online")').addClass('offline');
$('.post.offline .username').before('Offline ');
$('.post.online .username').before('Online ');
});
last thing, can you make the
Code:
online color lime, font weight strong, text-shadow: 1px 1px 5px rgba(255, 255, 255, 0.8)

offline color red, font weight strong, text-shadow: 1px 1px 5px rgba(255, 255, 255, 0.8)

zenzo
Forumember

Posts : 464
Reputation : 13
Language : english,tagalog
Location : philippines

Back to top Go down

Solved Re: online status beside username [PunBB]

Post by Cassius Dio on March 30th 2013, 10:32 am

Of course I can, just replace the JavaScript code by:
Code:
$(function(){
$('.post:has("#i_icon_online")').addClass('online');
$('.post:not(".online")').addClass('offline');
$('.post.offline .username').before('<div class="u_offline">Offline </div>');
$('.post.online .username').before('<div class="u_online">Online </div>');
});

Then add to CSS Stylesheet:
Code:
.u_online{
color: lime !important;
font-weight: strong !important;
text-shadow: 1px 1px 5px rgba(255, 255, 255, 0.8) !important;
}

.u_offline{
color: red !important;
font-weight: strong !important;
text-shadow: 1px 1px 5px rgba(255, 255, 255, 0.8) !important;
}

Cassius Dio
Forumember

Male Posts : 581
Reputation : 79
Language : Romanian &English
Location : Yellow Submarine

http://beatles.forummo.com/

Back to top Go down

Solved Re: online status beside username [PunBB]

Post by zenzo on March 30th 2013, 12:55 pm

opss color and shadow is working

but
Code:
font-weight: strong !important;
is not working

zenzo
Forumember

Posts : 464
Reputation : 13
Language : english,tagalog
Location : philippines

Back to top Go down

Solved Re: online status beside username [PunBB]

Post by Sanket on March 30th 2013, 12:58 pm

font-weight: bold !important;


I don't think there is anything related to strong for it.

Sanket
ForumGuru

Male Posts : 48766
Reputation : 2819
Language : English
Location : Mumbai

http://webartzforum.com

Back to top Go down

Solved Re: online status beside username [PunBB]

Post by Cassius Dio on March 30th 2013, 1:40 pm

Oops, sorry, I written the code too fast and didn't realised the error. Very Happy

Cassius Dio
Forumember

Male Posts : 581
Reputation : 79
Language : Romanian &English
Location : Yellow Submarine

http://beatles.forummo.com/

Back to top Go down

Solved Re: online status beside username [PunBB]

Post by zenzo on March 30th 2013, 2:45 pm

this is solve now

thanks for the help guys.,. :wouhou:

zenzo
Forumember

Posts : 464
Reputation : 13
Language : english,tagalog
Location : philippines

Back to top Go down

Solved Re: online status beside username [PunBB]

Post by Sanket on March 30th 2013, 5:59 pm

Topic Solved & Locked

Sanket
ForumGuru

Male Posts : 48766
Reputation : 2819
Language : English
Location : Mumbai

http://webartzforum.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