Author name ribbon

Howdy,

Today I will show you how to add author name inside post body and online status at the same time. All of that will be nicely packed in one ribbon. This tutorial works for AwesomeBB version only. 

Offline user:

Online user:

Go to CP > Display > Templates > General > viewtopic_body and find:

<div  >

Just under it add this code:

 <span  >
<span  ></span><div  ></div> {postrow.displayed.POSTER_NAME}
</span>

Save template. Go to CP > Display > Pictures & Colors > Colors & CSS > CSS Stylesheet and paste this code:

.ribbon {
   width: 200px;
   height: 50px;
   line-height: 50px;
   padding-left: 15px;
   position: absolute;
   left: -8px;
   top: 20px;
   background: #cd1313;
}
 
.ribbon:before,
.ribbon:after {
   content: "";
   position: absolute;
}
 
.ribbon:before {
   height: 0;
   width: 0;
   top: -8.5px;
   left: 0.1px;
   border-bottom: 9px solid #850505;
   border-left: 9px solid transparent;
}
 
.ribbon:after {
   height: 0;
   width: 0;
   right: -14.5px;
   border-top: 25px solid transparent;
   border-bottom: 25px solid transparent;
   border-left: 15px solid #cd1313;
}
 
.ribbon a {
   color: #fff;
   text-decoration: none;
   text-transform: uppercase;
   padding-left: 20px;
   font-weight: bold;
}
 
.ribbon a strong {
   color: #fff;
   text-align: center;
}
 
.ribbon-online {
   top: 0;
   bottom: 0;
   left: 10px;
   margin: auto;
   background-color: #e3eb37;
   animation: pulse-animation 2s infinite;
}
 
.ribbon-offline {
   position: absolute;
   top: 0;
   bottom: 0;
   left: 10px;
   margin: auto;
   background-color: #fff;
   height: 12px;
   width: 12px;
   border-radius: 12px;
}
 
@keyframes pulse-animation {
   0% {
      box-shadow: 0 0 0 0px rgba(0, 0, 0, 0.3);
   }
 
   100% {
      box-shadow: 0 0 0 20px rgba(0, 0, 0, 0);
   }
}
 
.post-content {
   margin-top: 65px;
}

If you want to add cool pulsation effect for online status, follow this tutorial: https://freecodes.forumotion.me/p1045758-add-pulsation-animation-for-online-status

I also tested adding smaller avatars inside ribbon but it's way too small to look okay there.
Feel free to change colors so it fits your forum theme.

Cheers.