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 Wed 27 Mar - 8:05

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

version PunBB

http://pinoywebmaster.forumotion.com/


Last edited by zenzo on Sat 30 Mar - 10:57; 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 Wed 27 Mar - 8:19

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 Wed 27 Mar - 8:31

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 Wed 27 Mar - 8:35

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 Wed 27 Mar - 8:42

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 Wed 27 Mar - 8:51

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 Wed 27 Mar - 17:15


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 Thu 28 Mar - 0:37

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 Thu 28 Mar - 1:05

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 Thu 28 Mar - 10:56

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 Thu 28 Mar - 17:33

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 Fri 29 Mar - 12:44

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 Fri 29 Mar - 16:52

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 Sat 30 Mar - 4:32

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 Sat 30 Mar - 6:55

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 Sat 30 Mar - 6:58

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 Sat 30 Mar - 7:40

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 Sat 30 Mar - 8:45

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 Sat 30 Mar - 11:59

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