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.

Pulsation effect for avatar and online status

3 posters

Go down

Pulsation effect for avatar and online status Empty Pulsation effect for avatar and online status

Post by System32 Thu Nov 17, 2022 1:48 pm

Taking in considuration how we don't have enough tutorials for AwesomeBB and skins as well, I decided to make small contribution.
Title: Pulsation effect for avatar and online status button
Description: Once you open the post, you can see around avatar image and online status icon (small circle) small pulsations. It makes forum a little bit more dynamic.
Preview: https://srpskaucionica.forumotion.com/t3-pravilnik-foruma

Add in CSS this:

Code:
/* AVATAR START */
.avatar-big img{
  border:2px solid #fff;
  outline:1px solid #369fcf;
animation: pulse-animation 2s infinite;
}
.post-author-status {
  animation: pulse-animation 2s infinite;
}
@keyframes pulse-animation {
  0% {
    box-shadow: 0 0 0 0px rgba(0, 0, 0, 0.2);
  }
  100% {
    box-shadow: 0 0 0 20px rgba(0, 0, 0, 0);
  }
}
/* AVATAR END */

Once more, this works only on AwesomeBB. It's not much to be honest, but I find it nice. bounce
System32
System32
Forumember

Male Posts : 387
Reputation : 22
Language : Serbian,English

View user profile https://pomoc-srb.forumotion.com/

Ape, SLGray, BlackScorpion, TonnyKamper, Mimóza and كونان2000 like this post

Back to top Go down

Pulsation effect for avatar and online status Empty Re: Pulsation effect for avatar and online status

Post by SLGray Thu Nov 17, 2022 7:31 pm

Guests will not see the online icon.


Pulsation effect for avatar and online status Slgray10

When your topic has been solved, ensure you mark the topic solved.
Never post your email in public.
SLGray
SLGray
Administrator
Administrator

Male Posts : 50610
Reputation : 3478
Language : English
Location : United States

View user profile https://forumsclub.com/gc/128-link-directory/

Back to top Go down

Pulsation effect for avatar and online status Empty Re: Pulsation effect for avatar and online status

Post by Ape Thu Nov 17, 2022 7:59 pm

it would be nice if you was to make this work for all forums not just AwesomeBB


Pulsation effect for avatar and online status Left1212Pulsation effect for avatar and online status Center11Pulsation effect for avatar and online status Right112
Pulsation effect for avatar and online status Ape_b110
Pulsation effect for avatar and online status Keep_s10
Pulsation effect for avatar and online status Ape1010
Ape
Ape
Administrator
Administrator

Male Posts : 18118
Reputation : 1922
Language : fluent in dork / mumbojumbo & English haha

View user profile http://chatworld.forumotion.co.uk/

SLGray and TonnyKamper like this post

Back to top Go down

Pulsation effect for avatar and online status Empty Re: Pulsation effect for avatar and online status

Post by System32 Thu Nov 17, 2022 9:07 pm

SLGray wrote:Guests will not see the online icon.
Doesn't matter. People can prohibit viewing forum until you register, so..
Ape wrote:it would be nice if you was to make this work for all forums not just AwesomeBB
It would require changing templates. Idea was to make it as simple as possible. Will check tomorrow.
System32
System32
Forumember

Male Posts : 387
Reputation : 22
Language : Serbian,English

View user profile https://pomoc-srb.forumotion.com/

TonnyKamper likes this post

Back to top Go down

Pulsation effect for avatar and online status Empty Re: Pulsation effect for avatar and online status

Post by System32 Fri Nov 18, 2022 7:35 am

UPDATE.

Version: PunBB and phpBB2
Go to: CP > Display > Images > Advanced > Buttons and remove image for online.
Go to: CP > Display > Colors & CSS > CSS Stylesheet and paste this:
Code:
.i_icon_online {
    background-color: #4CAF50;
    border-radius: 12px;
      height: 12px;
    width: 12px;
  animation: pulse-animation 2s infinite;
}
@keyframes pulse-animation {
  0% {
    box-shadow: 0 0 0 0px rgba(0, 0, 0, 0.2);
  }
  100% {
    box-shadow: 0 0 0 20px rgba(0, 0, 0, 0);
  }
}

Note: You can arrange where the online icon will be. This tutorial doesn't cover that.
System32
System32
Forumember

Male Posts : 387
Reputation : 22
Language : Serbian,English

View user profile https://pomoc-srb.forumotion.com/

Ape and TonnyKamper like this post

Back to top Go down

Back to top

- Similar topics

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