Adding blue and purple color around avatar [punBB, phpBB2, phpBB3, ModernBB and AwesomeBB]

Hi all,

Recently, we developed a css code that allows everyone to show two colors around the avatar (blue and pink).

Demonstration

Images:

Code CSS
Add in: Display > Pictures and Colors > Colors & CSS > CSS Stylesheet > Add a new CSS code

Version modifications

punBB

Code:

.user-basic-info a {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 1px;
    background: rgba(255,255,,0.5);
    overflow: hidden;
    border-radius: 10px;
    border: 1px solid #f4f4f4;
    max-width: 60%;
    z-index: 2;
    margin: 0 auto;
}
.user-basic-info a::before {
    content: "";
    position: absolute;
    width: 80px;
    height: 140%;
    background: linear-gradient(#00ccff,#00ccff,#d400d4,#d400d4);
    border-radius: 5px;
    z-index: 1;
    overflow: hidden;
    animation: animate 2s linear infinite;
}
.user-basic-info a img {
    position: relative;
    z-index: 1;
}
@keyframes animate {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg)
    }
}

Template modifications

Find (line 156)

Code:

{postrow.displayed.POSTER_AVATAR}<br /><br />

Replace it with

Code:

<div class='avatar__container'>{postrow.displayed.POSTER_AVATAR} </div><br /><br />

phpBB2

in viewtopic_body find

Code:

{postrow.displayed.POSTER_AVATAR}<br /><br />

Replace it with

Code:

<div class='avatar__container'>{postrow.displayed.POSTER_AVATAR} </div><br /><br />

Code:

.avatar__container {
    position: relative;
    display: inline-block;
    padding: 3px;
    background: rgba(255,255,,0.5);
    overflow: hidden;
    border-radius: 10px;
    border: 1px solid #f4f4f4;
    z-index: 2;
    margin: 0 auto;
}
.avatar__container:before {
content: "";
    position: absolute;
    width: 80px;
    height: 150%;
    background: linear-gradient(#00ccff,#00ccff,#d400d4,#d400d4);
    border-radius: 5px;
    z-index: 1;
    overflow: hidden;
    animation: animate 2s linear infinite;
    left: 15px;
    bottom: -25px;
}
.avatar__container img {
  position: relative;
  z-index: 3;
  border-radius: 10px;
  background-color: #fff;
}
@keyframes animate {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg)
    }
}

phpBB3

in viewtopic_body find

Code:

<dt>
 {postrow.displayed.POSTER_AVATAR}
<br /><strong style="font-size:1.2em">{postrow.displayed.POSTER_NAME}</strong>
 </dt>

Replace it with:

Code:

<dt>
                                          <div class='avatar__container'>
 {postrow.displayed.POSTER_AVATAR}
                                          </div>
                                  <br /><strong style="font-size:1.2em">{postrow.displayed.POSTER_NAME}</strong>
 </dt>

Code:

.avatar__container {
    position: relative;
    display: inline-block;
    padding: 3px;
    background: rgba(255,255,,0.5);
    overflow: hidden;
    border-radius: 10px;
    border: 1px solid #f4f4f4;
    z-index: 2;
    margin: 0 auto;
}
.avatar__container:before {
content: "";
    position: absolute;
    width: 80px;
    height: 140%;
    background: linear-gradient(#00ccff,#00ccff,#d400d4,#d400d4);
    border-radius: 5px;
    z-index: 1;
    overflow: hidden;
    animation: animate 2s linear infinite;
    left: 15px;
    bottom: -25px;
}
.avatar__container img {
  position: relative;
  z-index: 3;
  border-radius: 10px;
}

ModernBB

Code:

Coming soon

AwesomeBB

Code:

Coming soon

P.S: For avatars that are different (ex: https://prnt.sc/Kb2NKIlyR5Rt ), find this code:

Code:

.user-basic-info a img {
    position: relative;
    z-index: 1;
}

once found replace it with:

Code:

.user-basic-info a img {
    position: relative;
    z-index: 1;
    width: 150px;
    height: 95px;
    object-fit: cover;
}

Lovely.