Hi all,
Recently, we developed a css code that allows everyone to show two colors around the avatar (blue and pink).
Demonstration
Code CSS
Add in: Display > Pictures and Colors > Colors & CSS > CSS Stylesheet > Add a new CSS code
Template modifications
Find (line 156)
Replace it with
in viewtopic_body find
Replace it with
in viewtopic_body find
Replace it with:
ModernBB
AwesomeBB
Recently, we developed a css code that allows everyone to show two colors around the avatar (blue and pink).
Demonstration
Code CSS
Add in: Display > Pictures and Colors > Colors & CSS > CSS Stylesheet > Add a new CSS code
Version modifications
punBB
Cod:
.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)
Cod:
{postrow.displayed.POSTER_AVATAR}<br /><br />
Replace it with
Cod:
<div class='avatar__container'>{postrow.displayed.POSTER_AVATAR} </div><br /><br />
phpBB2
in viewtopic_body find
Cod:
{postrow.displayed.POSTER_AVATAR}<br /><br />
Replace it with
Cod:
<div class='avatar__container'>{postrow.displayed.POSTER_AVATAR} </div><br /><br />
Cod:
.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
Cod:
<dt>
{postrow.displayed.POSTER_AVATAR}
<br /><strong style="font-size:1.2em">{postrow.displayed.POSTER_NAME}</strong>
</dt>
Replace it with:
Cod:
<dt>
<div class='avatar__container'>
{postrow.displayed.POSTER_AVATAR}
</div>
<br /><strong style="font-size:1.2em">{postrow.displayed.POSTER_NAME}</strong>
</dt>
Cod:
.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
Cod:
Coming soon
AwesomeBB
Cod:
Coming soon