Choose the color of your profile
3 posters
Choose the color of your profile
by كونان2000 December 18th 2021, 10:07 pm
Choose the color of your profile
_______________
Hello All, This tutorial will help you to To make users choose the color of their profile,This modification applies as long as your templates have not been modified significantly.
--------------------------------------------------------
WORKS ON THE FOLLOWING FORUM VERSIONS:
phpBB2 phpBB3 ModernBB AwesomeBB _______________
Login as Admin / Founder and go tothe Administration Panel >> Users & Groups >> Profiles
and click 
Field editType : Images list
Name : as you like
Description : as you like
URL icon : leave it blank
Necessarily filled ?: as you like
Display : Profile + Messages
Display type : Icon or Icon + Text
Who can modify the profile field value ? Moderators + Member himself
Display this field for users that are at least : Guests
Separator : as you like
_______
Set options like the picture
Name : as you like
Description : as you like
URL icon : leave it blank
Necessarily filled ?: as you like
Display : Profile + Messages
Display type : Icon or Icon + Text
Who can modify the profile field value ? Moderators + Member himself
Display this field for users that are at least : Guests
Separator : as you like
_______
Set options like the picture
Then put the names of the following colors
Copy and paste the code files for your forum.- phpBB2 :
- 1. Go to Admin Panel > Display > Templates > General
2. Please choose viewtopic_body
3. Click modify
button
4. Find this code:- Code:
<td class="{postrow.displayed.ROW_CLASS}"{postrow.displayed.THANK_BGCOLOR} valign="top" width="150">
<span class="name"><a name="{postrow.displayed.U_POST_ID}" style="position: relative; top: -30px; width: 1px;" id="{postrow.displayed.U_POST_ID}"></a><strong>{postrow.displayed.POSTER_NAME}</strong></span><br />
<span class="postdetails poster-profile">
{postrow.displayed.POSTER_RANK}<br />
{postrow.displayed.RANK_IMAGE}{postrow.displayed.POSTER_AVATAR}<br /><br />
<div {postrow.displayed.AWARDS_SHOW} class="dd_award {postrow.displayed.PROFILE_POSITION}">{postrow.displayed.AWARDS}</div>
<div class="award_more"></div>
<br>
<!-- BEGIN profile_field -->
{postrow.displayed.profile_field.LABEL} {postrow.displayed.profile_field.CONTENT}{postrow.displayed.profile_field.SEPARATOR}
<!-- END profile_field -->
{postrow.displayed.POSTER_RPG}
</span><br />
<img src="https://2img.net/i/empty.gif" alt="" style="width:150px;height:1px" />
</td>
5. And replace by this:- Code:
<td class="{postrow.displayed.ROW_CLASS}"{postrow.displayed.THANK_BGCOLOR} valign="top" width="150">
<div id="p{postrow.displayed.U_POST_ID}" class="post {postrow.displayed.ROW_COUNT}{postrow.displayed.ONLINE_IMG_NEW} post--{postrow.displayed.U_POST_ID}"{postrow.displayed.THANK_BGCOLOR} style="{postrow.displayed.DISPLAYABLE_STATE}">
<div style="position: relative; top: -30px; width: 1px;" id="{postrow.displayed.U_POST_ID}"></div>
<div class="postprofile" id="profile{postrow.displayed.U_POST_ID}">
<span class="name"><a name="{postrow.displayed.U_POST_ID}" style="position: relative; top: -30px; width: 1px;" id="{postrow.displayed.U_POST_ID}"></a><div class="namee"><strong>{postrow.displayed.POSTER_NAME}</strong></div></span>
<span class="postdetails poster-profile">
<div class="ranke">{postrow.displayed.POSTER_RANK}</div>
<div class="avatare">{postrow.displayed.RANK_IMAGE}{postrow.displayed.POSTER_AVATAR}</div><br />
<div {postrow.displayed.AWARDS_SHOW} class="dd_award {postrow.displayed.PROFILE_POSITION}">{postrow.displayed.AWARDS}</div>
<div class="award_more"></div>
<br>
<br />
<!-- BEGIN profile_field -->
{postrow.displayed.profile_field.LABEL} {postrow.displayed.profile_field.CONTENT}{postrow.displayed.profile_field.SEPARATOR}
<!-- END profile_field -->
{postrow.displayed.POSTER_RPG}
</span><br />
<img src="https://2img.net/i/empty.gif" alt="" style="width:150px;height:1px" />
</div>
</div>
</td>
Installing the JavaScript
To install the system you only need to go to Modules > JavaScript codes management and create a new script with the following settings.
Title : as you like
Placement : In the topics- Code:
$(function() {
//كونان2000.
var version = "phpBB2";
if(version.toLowerCase() == "phpbb2"){
$(".postprofile img[title='undefined']").closest('.postprofile').addClass("undefined");
$(".postprofile img[title='blue']").closest('.postprofile').addClass("blue");
$(".postprofile img[title='grey']").closest('.postprofile').addClass("grey");
$(".postprofile img[title='green']").closest('.postprofile').addClass("green");
$(".postprofile img[title='yellow']").closest('.postprofile').addClass("yellow");
$(".postprofile img[title='purple']").closest('.postprofile').addClass("purple");
$(".postprofile img[title='Orange']").closest('.postprofile').addClass("Orange");
$(".postprofile img[title='Pink']").closest('.postprofile').addClass("Pink");
$(".postprofile img[title='black']").closest('.postprofile').addClass("black");
$(".postprofile img[title='red']").closest('.postprofile').addClass("red");
$(".postprofile img[title='LightCoral']").closest('.postprofile').addClass("LightCoral");
$(".postprofile img[title='Wisteria']").closest('.postprofile').addClass("Wisteria");
$(".postprofile img[title='SlateBlue']").closest('.postprofile').addClass("SlateBlue");
$(".postprofile img[title='Indigo']").closest('.postprofile').addClass("Indigo");
}
});
Installing the CSS
Firstly you'll need to add some CSS to your stylesheet so the system displays correctly. Go to Administration Panel > Display > Colors > CSS stylesheet and paste the following rules in your stylesheet.
CSS- Code:
.postprofile {
background: #;
border-bottom: 16px solid #607d8b;
border-left: 1px solid #607d8b;
border-radius: 3px!important;
border-right: 1px solid #607d8b;
border-top: 16px solid #607d8b;
padding: 60px 3px 3px!important;
position: relative!important;
}
hr {
margin: 5px 0px!important;
padding: 2px!important;
}
.avatare:after {
margin-top: 22px;
display: flex;
background: #607d8b;
content: "Profile";
padding: 5px!important;
justify-content: center;
}
.postprofile:before {
background: #607d8b;
position: relative;
bottom: 40px;
text-align: center;
border-radius: 33px;
color: beige;
content: "OFFLINE";
display: block!important;
}
div.post.online .postprofile:before {
border-radius: 33px;
color: #f5f5dc;
content: "ONLINE";
display: block!important;
bottom: 40px;
position: relative;
text-align: center;
z-index: 2;
}
.postprofile .label {
padding-right: 6px;
font-weight: 500;
}
.blue {
background: #f6f6f6!important;
border-bottom: 16px solid #3e459c!important;
border-left: 1px solid #3e459c!important;
border-right: 1px solid #3e459c!important;
border-top: 16px solid #3e459c!important;
}
.grey {
background: #f6f6f6!important;
border-bottom: 16px solid #a0a09a!important;
border-left: 1px solid #a0a09a!important;
border-right: 1px solid #a0a09a!important;
border-top: 16px solid #a0a09a!important;
}
.green {
background: #f6f6f6!important;
border-bottom: 16px solid #42b649!important;
border-left: 1px solid #42b649!important;
border-right: 1px solid #42b649!important;
border-top: 16px solid #42b649!important;
}
.yellow {
background: #f6f6f6!important;
border-bottom: 16px solid #ede816!important;
border-left: 1px solid #ede816!important;
border-right: 1px solid #ede816!important;
border-top: 16px solid #ede816!important;
}
.purple {
background: #f6f6f6!important;
border-bottom: 16px solid #aa4399!important;
border-left: 1px solid #aa4399!important;
border-right: 1px solid #aa4399!important;
border-top: 16px solid #aa4399!important;
}
div.post.online .postprofile.undefined:before {
background: #;!important;
}
div.post.online .postprofile.purple:before {
background: #aa4399!important;
}
div.post.online .postprofile.grey:before {
background: #a0a09a;!important;
}
div.post.online .postprofile.blue:before {
background: #3e459c!important;
}
div.post.online .postprofile.green:before {
background: #42b649;!important;
}
div.post.online .postprofile.yellow:before {
background: #ede816!important;
}
.undefined .avatare:after {
background: #;!important;
}
.purple .avatare:after {
background: #aa4399!important;
}
.grey .avatare:after {
background: #a0a09a;!important;
}
.blue .avatare:after {
background: #3e459c!important;
}
.green .avatare:after {
background: #42b649;!important;
}
.yellow .avatare:after {
background: #ede816!important;
}
.undefined hr {
background-color: #!important;
}
.purple hr {
background-color: #aa4399!important;
}
.grey hr {
background-color: #a0a09a;!important;
}
.blue hr {
background-color: #3e459c!important;
}
.green hr {
background-color: #42b649;!important;
}
.yellow hr {
background-color: #ede816!important;
}
.Orange {
background: #f6f6f6!important;
border-bottom: 16px solid #ffa200!important;
border-left: 1px solid #ffa200!important;
border-right: 1px solid #ffa200!important;
border-top: 16px solid #ffa200!important;
}
div.post.online .postprofile.Orange:before {
background: #ffa200!important;
}
.Orange .avatare:after {
background: #ffa200!important;
}
.Orange hr {
background-color: #ffa200!important;
}
.LightCoral {
background: #f6f6f6!important;
border-bottom: 16px solid #f08080!important;
border-left: 1px solid #f08080!important;
border-right: 1px solid #f08080!important;
border-top: 16px solid #f08080!important;
}
div.post.online .postprofile.LightCoral:before {
background: #f08080!important;
}
.LightCoral .avatare:after {
background: #f08080!important;
}
.LightCoral hr {
background-color: #f08080!important;
}
.Pink {
background: #f6f6f6!important;
border-bottom: 16px solid #ffc0cb!important;
border-left: 1px solid #ffc0cb!important;
border-right: 1px solid #ffc0cb!important;
border-top: 16px solid #ffc0cb!important;
}
div.post.online .postprofile.Pink:before {
background: #ffc0cb!important;
}
.Pink .avatare:after {
background: #ffc0cb!important;
}
.Pink hr {
background-color: #ffc0cb!important;
}
.black {
background: #f6f6f6!important;
border-bottom: 16px solid #000000!important;
border-left: 1px solid #000000!important;
border-right: 1px solid #000000!important;
border-top: 16px solid #000000!important;
}
div.post.online .postprofile.black:before {
background: #000000!important;
}
.black .avatare:after {
color: #fff;
background: #000000!important;
}
.black hr {
background-color: #000000!important;
}
.red {
background: #f6f6f6!important;
border-bottom: 16px solid #e90000!important;
border-left: 1px solid #e90000!important;
border-right: 1px solid #e90000!important;
border-top: 16px solid #e90000!important;
}
div.post.online .postprofile.red:before {
background: #e90000!important;
}
.red .avatare:after {
background: #e90000!important;
}
.red hr {
background-color: #e90000!important;
}
.Light Coral {
background: #f6f6f6!important;
border-bottom: 16px solid #f08080!important;
border-left: 1px solid #f08080!important;
border-right: 1px solid #f08080!important;
border-top: 16px solid #f08080!important;
}
div.post.online .postprofile.Light Coral:before {
background: #f08080!important;
}
.Light Coral .avatare:after {
background: #f08080!important;
}
.Light Coral hr {
background-color: #f08080!important;
}
.Wisteria {
background: #f6f6f6!important;
border-bottom: 16px solid #c6aec7!important;
border-left: 1px solid #c6aec7!important;
border-right: 1px solid #c6aec7!important;
border-top: 16px solid #c6aec7!important;
}
div.post.online .postprofile.Wisteria:before {
background: #c6aec7!important;
}
.Wisteria .avatare:after {
background: #c6aec7!important;
}
.Wisteria hr {
background-color: #c6aec7!important;
}
.SlateBlue {
background: #f6f6f6!important;
border-bottom: 16px solid #6a5acd!important;
border-left: 1px solid #6a5acd!important;
border-right: 1px solid #6a5acd!important;
border-top: 16px solid #6a5acd!important;
}
div.post.online .postprofile.SlateBlue:before {
background: #6a5acd!important;
}
.SlateBlue .avatare:after {
background: #6a5acd!important;
}
.SlateBlue hr {
background-color: #6a5acd!important;
}
.Indigo {
background: #f6f6f6!important;
border-bottom: 16px solid #4b0082!important;
border-left: 1px solid #4b0082!important;
border-right: 1px solid #4b0082!important;
border-top: 16px solid #4b0082!important;
}
div.post.online .postprofile.Indigo:before {
background: #4b0082!important;
}
.Indigo .avatare:after {
background: #4b0082!important;
}
.Indigo hr {
background-color: #4b0082!important;
}
.namee {
font-size: 16px;
padding: 5px;
text-align: center;
}
- phpBB3 :
Installing the JavaScript
To install the system you only need to go to Modules > JavaScript codes management and create a new script with the following settings.
Title : as you like
Placement : In the topics- Code:
$(function() {
//كونان2000.
var version = "phpBB3";
if(version.toLowerCase() == "phpbb3"){
$(".postprofile img[title='undefined']").closest('.postprofile').addClass("undefined");
$(".postprofile img[title='blue']").closest('.postprofile').addClass("blue");
$(".postprofile img[title='grey']").closest('.postprofile').addClass("grey");
$(".postprofile img[title='green']").closest('.postprofile').addClass("green");
$(".postprofile img[title='yellow']").closest('.postprofile').addClass("yellow");
$(".postprofile img[title='purple']").closest('.postprofile').addClass("purple");
$(".postprofile img[title='Orange']").closest('.postprofile').addClass("Orange");
$(".postprofile img[title='Pink']").closest('.postprofile').addClass("Pink");
$(".postprofile img[title='black']").closest('.postprofile').addClass("black");
$(".postprofile img[title='red']").closest('.postprofile').addClass("red");
$(".postprofile img[title='LightCoral']").closest('.postprofile').addClass("LightCoral");
$(".postprofile img[title='Wisteria']").closest('.postprofile').addClass("Wisteria");
$(".postprofile img[title='SlateBlue']").closest('.postprofile').addClass("SlateBlue");
$(".postprofile img[title='Indigo']").closest('.postprofile').addClass("Indigo");
}
});
Installing the CSS
Firstly you'll need to add some CSS to your stylesheet so the system displays correctly. Go to Administration Panel > Display > Colors > CSS stylesheet and paste the following rules in your stylesheet.
CSS- Code:
.postprofile {
background: #f6f6f6;
border-bottom: 16px solid #607d8b;
border-left: 1px solid #607d8b;
border-radius: 3px;
border-right: 1px solid #607d8b;
border-top: 16px solid #607d8b;
padding: 60px 3px 3px!important;
width: 18%;
}
hr {
margin: 8px 0px;
padding: 2px;
}
dd.postprofile-info {
background-color: #fff;
border-bottom: 1px dotted #2196f3;
border-radius: 5px 5px 5px 5px;
border-right: 3px solid #2196f3;
}
dd:nth-child(6):before {
margin-bottom: 10px;
background: #607d8b;
color: #fff;
content: "profile";
display: flex;
justify-content: center;
padding: 4px;
}
.postprofile:before {
padding: 5px;
text-align: center;
background: #607d8b;
border-radius: 33px;
color: beige;
content: "OFFLINE";
}
div.post.online .postprofile:before {
padding: 5px;
text-align: center;
border-radius: 33px;
color: beige;
content: "ONLINE";
}
div.post .postprofile:before {
left: 7px;
position: absolute;
right: 7px;
top: 10px;
z-index: 2;
}
.postprofile .label {
padding-right: 6px;
font-weight: 500;
}
.blue {
background: #f6f6f6!important;
border-bottom: 16px solid #3e459c!important;
border-left: 1px solid #3e459c!important;
border-right: 1px solid #3e459c!important;
border-top: 16px solid #3e459c!important;
}
.grey {
background: #f6f6f6!important;
border-bottom: 16px solid #a0a09a!important;
border-left: 1px solid #a0a09a!important;
border-right: 1px solid #a0a09a!important;
border-top: 16px solid #a0a09a!important;
}
.green {
background: #f6f6f6!important;
border-bottom: 16px solid #42b649!important;
border-left: 1px solid #42b649!important;
border-right: 1px solid #42b649!important;
border-top: 16px solid #42b649!important;
}
.yellow {
background: #f6f6f6!important;
border-bottom: 16px solid #ede816!important;
border-left: 1px solid #ede816!important;
border-right: 1px solid #ede816!important;
border-top: 16px solid #ede816!important;
}
.purple {
background: #f6f6f6!important;
border-bottom: 16px solid #aa4399!important;
border-left: 1px solid #aa4399!important;
border-right: 1px solid #aa4399!important;
border-top: 16px solid #aa4399!important;
}
div.post.online .postprofile.undefined:before {
background: #;!important;
}
div.post.online .postprofile.purple:before {
background: #aa4399!important;
}
div.post.online .postprofile.grey:before {
background: #a0a09a;!important;
}
div.post.online .postprofile.blue:before {
background: #3e459c!important;
}
div.post.online .postprofile.green:before {
background: #42b649;!important;
}
div.post.online .postprofile.yellow:before {
background: #ede816!important;
}
.undefined dd:nth-child(6):before {
background: #;!important;
}
.purple dd:nth-child(6):before {
background: #aa4399!important;
color: #fff;
}
.grey dd:nth-child(6):before {
background: #a0a09a;!important;
color: #fff;
}
.blue dd:nth-child(6):before {
background: #3e459c!important;
color: #fff;
}
.green dd:nth-child(6):before {
background: #42b649;!important;
color: #fff;
}
.yellow dd:nth-child(6):before {
background: #ede816!important;
color: #000;
}
.undefined .postprofile dd {
border-bottom: 1px dotted #;!important;
border-right: 3px solid #;!important;
}
.purple .postprofile dd {
border-bottom: 1px dotted #aa4399!important;
border-right: 3px solid #aa4399!important;
}
.grey .postprofile dd {
border-bottom: 1px dotted #a0a09a;!important;
border-right: 3px solid #a0a09a;!important;
}
.blue .postprofile dd {
border-bottom: 1px dotted #3e459c!important;
border-right: 3px solid #3e459c!important;
}
.green .postprofile dd {
border-bottom: 1px dotted #42b649;!important;
border-right: 3px solid #42b649;!important;
}
.yellow .postprofile dd {
border-bottom: 1px dotted #ede816!important;
border-right: 3px solid #ede816!important;
}
.undefined hr {
border-bottom:2px solid #;!important;
}
.purple hr {
border-bottom: 2px solid #aa4399!important;
}
.grey hr {
border-bottom: 2px solid #a0a09a;!important;
}
.blue hr {
border-bottom: 2px solid #3e459c!important;
}
.green hr {
border-bottom: 2px solid #42b649;!important;
}
.yellow hr {
border-bottom: 2px solid #ede816!important;
}
.Orange {
background: #f6f6f6!important;
border-bottom: 16px solid #ffa200!important;
border-left: 1px solid #ffa200!important;
border-right: 1px solid #ffa200!important;
border-top: 16px solid #ffa200!important;
}
.Orange hr {
border-bottom: 2px solid #ffa200!important;
}
.Orange .postprofile dd {
border-bottom: 1px dotted #ffa200!important;
border-right: 3px solid #ffa200!important;
}
div.post.online .postprofile.Orange:before {
background: #ffa200!important;
}
.Orange dd:nth-child(6):before {
background: #ffa200!important;
color: #fff;
}
.Pink {
background: #f6f6f6!important;
border-bottom: 16px solid #ffc0cb!important;
border-left: 1px solid #ffc0cb!important;
border-right: 1px solid #ffc0cb!important;
border-top: 16px solid #ffc0cb!important;
}
.Pink hr {
border-bottom: 2px solid #ffc0cb!important;
}
.Pink .postprofile dd {
border-bottom: 1px dotted #ffc0cb!important;
border-right: 3px solid #ffc0cb!important;
}
div.post.online .postprofile.Pink:before {
background: #ffc0cb!important;
}
.Pink dd:nth-child(6):before {
background: #ffc0cb!important;
color: #000;
}
.black {
background: #f6f6f6!important;
border-bottom: 16px solid #000000!important;
border-left: 1px solid #000000!important;
border-right: 1px solid #000000!important;
border-top: 16px solid #000000!important;
}
.black hr {
border-bottom: 2px solid #000000!important;
}
.black .postprofile dd {
border-bottom: 1px dotted #000000!important;
border-right: 3px solid #000000!important;
}
div.post.online .postprofile.black:before {
background: #000000!important;
}
.black dd:nth-child(6):before {
background: #000000!important;
color: #fff;
}
.red {
background: #f6f6f6!important;
border-bottom: 16px solid #e90000!important;
border-left: 1px solid #e90000!important;
border-right: 1px solid #e90000!important;
border-top: 16px solid #e90000!important;
}
.red hr {
border-bottom: 2px solid #e90000!important;
}
.red .postprofile dd {
border-bottom: 1px dotted #e90000!important;
border-right: 3px solid #e90000!important;
}
div.post.online .postprofile.red:before {
background: #e90000!important;
}
.red dd:nth-child(6):before {
background: #e90000!important;
color: #fff;
}
.LightCoral {
background: #f6f6f6!important;
border-bottom: 16px solid #f08080!important;
border-left: 1px solid #f08080!important;
border-right: 1px solid #f08080!important;
border-top: 16px solid #f08080!important;
}
.LightCoral hr {
border-bottom: 2px solid #f08080!important;
}
.LightCoral .postprofile dd {
border-bottom: 1px dotted #f08080!important;
border-right: 3px solid #f08080!important;
}
div.post.online .postprofile.LightCoral:before {
background: #f08080!important;
}
.LightCoral dd:nth-child(6):before {
background: #f08080!important;
color: #fff;
}
.Wisteria {
background: #f6f6f6!important;
border-bottom: 16px solid #c6aec7!important;
border-left: 1px solid #c6aec7!important;
border-right: 1px solid #c6aec7!important;
border-top: 16px solid #c6aec7!important;
}
.Wisteria hr {
border-bottom: 2px solid #c6aec7!important;
}
.Wisteria .postprofile dd {
border-bottom: 1px dotted #c6aec7!important;
border-right: 3px solid #c6aec7!important;
}
div.post.online .postprofile.Wisteria:before {
background: #c6aec7!important;
}
.Wisteria dd:nth-child(6):before {
background: #c6aec7!important;
color: #fff;
}
.SlateBlue {
background: #f6f6f6!important;
border-bottom: 16px solid #6a5acd!important;
border-left: 1px solid #6a5acd!important;
border-right: 1px solid #6a5acd!important;
border-top: 16px solid #6a5acd!important;
}
.SlateBlue hr {
border-bottom: 2px solid #6a5acd!important;
}
.SlateBlue .postprofile dd {
border-bottom: 1px dotted #6a5acd!important;
border-right: 3px solid #6a5acd!important;
}
div.post.online .postprofile.SlateBlue:before {
background: #6a5acd!important;
}
.SlateBlue dd:nth-child(6):before {
background: #6a5acd!important;
color: #fff;
}
.Indigo {
background: #f6f6f6!important;
border-bottom: 16px solid #4b0082!important;
border-left: 1px solid #4b0082!important;
border-right: 1px solid #4b0082!important;
border-top: 16px solid #4b0082!important;
}
.Indigo hr {
border-bottom: 2px solid #4b0082!important;
}
.Indigo .postprofile dd {
border-bottom: 1px dotted #4b0082!important;
border-right: 3px solid #4b0082!important;
}
div.post.online .postprofile.Indigo:before {
background: #4b0082!important;
}
.Indigo dd:nth-child(6):before {
background: #4b0082!important;
color: #fff;
}
- ModernBB :
Installing the JavaScript
To install the system you only need to go to Modules > JavaScript codes management and create a new script with the following settings.
Title : as you like
Placement : In the topics- Code:
$(function() {
//كونان2000.
var version = "phpBB3";
if(version.toLowerCase() == "phpbb3"){
$(".postprofile img[title='undefined']").closest('.postprofile').addClass("undefined");
$(".postprofile img[title='blue']").closest('.postprofile').addClass("blue");
$(".postprofile img[title='grey']").closest('.postprofile').addClass("grey");
$(".postprofile img[title='green']").closest('.postprofile').addClass("green");
$(".postprofile img[title='yellow']").closest('.postprofile').addClass("yellow");
$(".postprofile img[title='purple']").closest('.postprofile').addClass("purple");
$(".postprofile img[title='Orange']").closest('.postprofile').addClass("Orange");
$(".postprofile img[title='Pink']").closest('.postprofile').addClass("Pink");
$(".postprofile img[title='black']").closest('.postprofile').addClass("black");
$(".postprofile img[title='red']").closest('.postprofile').addClass("red");
$(".postprofile img[title='LightCoral']").closest('.postprofile').addClass("LightCoral");
$(".postprofile img[title='Wisteria']").closest('.postprofile').addClass("Wisteria");
$(".postprofile img[title='SlateBlue']").closest('.postprofile').addClass("SlateBlue");
$(".postprofile img[title='Indigo']").closest('.postprofile').addClass("Indigo");
}
});
Installing the CSS
Firstly you'll need to add some CSS to your stylesheet so the system displays correctly. Go to Administration Panel > Display > Colors > CSS stylesheet and paste the following rules in your stylesheet.
CSS- Code:
.postprofile {
background: #f6f6f6;
border-bottom: 16px solid #607d8b;
border-left: 1px solid #607d8b;
border-radius: 3px;
border-right: 1px solid #607d8b;
border-top: 16px solid #607d8b;
padding: 60px 3px 3px!important;
position: relative!important;
width: 18%;
}
hr {
background-color: #fff;
border-bottom: 1px dotted #2196f3;
margin-bottom: 4px;
padding: 2px;
}
dd.postprofile-info {
background-color: #fff;
border-bottom: 1px dotted #2196f3;
border-radius: 5px 5px 5px 5px;
border: 2px solid #607d8b;
}
dd.postprofile-info:before {
display: flex;
color: white;
padding: 4px;
display: flex;
content: "profile";
justify-content: center;
background: #607d8b;
}
.postprofile:before {
text-align: center;
background: #607d8b;
border-radius: 33px;
color: beige;
content: "OFFLINE";
}
div.post.online .postprofile:before {
text-align: center;
border-radius: 33px;
color: beige;
content: "ONLINE";
}
div.post .postprofile:before {
left: 7px;
position: absolute;
right: 7px;
top: 10px;
z-index: 2;
}
.postprofile .label {
padding-left: 3px;
font-weight: 500;
}
.blue {
background: #f6f6f6!important;
border-bottom: 16px solid #3e459c!important;
border-left: 1px solid #3e459c!important;
border-right: 1px solid #3e459c!important;
border-top: 16px solid #3e459c!important;
}
.grey {
background: #f6f6f6!important;
border-bottom: 16px solid #a0a09a!important;
border-left: 1px solid #a0a09a!important;
border-right: 1px solid #a0a09a!important;
border-top: 16px solid #a0a09a!important;
}
.green {
background: #f6f6f6!important;
border-bottom: 16px solid #42b649!important;
border-left: 1px solid #42b649!important;
border-right: 1px solid #42b649!important;
border-top: 16px solid #42b649!important;
}
.yellow {
background: #f6f6f6!important;
border-bottom: 16px solid #ede816!important;
border-left: 1px solid #ede816!important;
border-right: 1px solid #ede816!important;
border-top: 16px solid #ede816!important;
}
.purple {
background: #f6f6f6!important;
border-bottom: 16px solid #aa4399!important;
border-left: 1px solid #aa4399!important;
border-right: 1px solid #aa4399!important;
border-top: 16px solid #aa4399!important;
}
div.post.online .postprofile.undefined:before {
background: #;!important;
}
div.post.online .postprofile.purple:before {
background: #aa4399!important;
}
div.post.online .postprofile.grey:before {
background: #a0a09a;!important;
}
div.post.online .postprofile.blue:before {
background: #3e459c!important;
}
div.post.online .postprofile.green:before {
background: #42b649;!important;
}
div.post.online .postprofile.yellow:before {
background: #ede816!important;
}
.undefined dd.postprofile-info:before {
background: #;!important;
}
.purple dd.postprofile-info:before {
background: #aa4399!important;
}
.grey dd.postprofile-info:before {
background: #a0a09a;!important;
}
.blue dd.postprofile-info:before {
background: #3e459c!important;
}
.green dd.postprofile-info:before {
background: #42b649;!important;
}
.yellow dd.postprofile-info:before {
background: #ede816!important;
}
.undefined dd.postprofile-info {
border-bottom: 1px dotted #;!important;
border: 2px solid #;!important;
}
.purple dd.postprofile-info {
border-bottom: 1px dotted #aa4399!important;
border: 2px solid #aa4399!important;
}
.grey dd.postprofile-info {
border-bottom: 1px dotted #a0a09a;!important;
border: 2px solid #a0a09a;!important;
}
.blue dd.postprofile-info {
border-bottom: 1px dotted #3e459c!important;
border: 2px solid #3e459c!important;
}
.green dd.postprofile-info {
border-bottom: 1px dotted #42b649;!important;
border: 2px solid #42b649;!important;
}
.yellow dd.postprofile-info {
border-bottom: 1px dotted #ede816!important;
border: 2px solid #ede816!important;
}
.undefined hr {
border-bottom: 1px dotted #;!important;
}
.purple hr {
border-bottom: 1px dotted #aa4399!important;
}
.grey hr {
border-bottom: 1px dotted #a0a09a;!important;
}
.blue hr {
border-bottom: 1px dotted #3e459c!important;
}
.green hr {
border-bottom: 1px dotted #42b649;!important;
}
.yellow hr {
border-bottom: 1px dotted #ede816!important;
}
.Orange {
background: #f6f6f6!important;
border-bottom: 16px solid #ffa200!important;
border-left: 1px solid #ffa200!important;
border-right: 1px solid #ffa200!important;
border-top: 16px solid #ffa200!important;
}
.Orange hr {
border-bottom: 2px solid #ffa200!important;
}
.Orange dd.postprofile-info {
border-bottom: 1px dotted #ffa200!important;
border: 2px solid #ffa200!important;
}
div.post.online .postprofile.Orange:before {
background: #ffa200!important;
}
.Orange dd.postprofile-info:before {
background: #ffa200!important;
color: #fff;
}
.Pink {
background: #f6f6f6!important;
border-bottom: 16px solid #ffc0cb!important;
border-left: 1px solid #ffc0cb!important;
border-right: 1px solid #ffc0cb!important;
border-top: 16px solid #ffc0cb!important;
}
.Pink hr {
border-bottom: 2px solid #ffc0cb!important;
}
.Pink dd.postprofile-info {
border-bottom: 1px dotted #ffc0cb!important;
border: 2px solid #ffc0cb!important;
}
div.post.online .postprofile.Pink:before {
background: #ffc0cb!important;
}
.Pink dd.postprofile-info:before {
background: #ffc0cb!important;
color: #000;
}
.black {
background: #f6f6f6!important;
border-bottom: 16px solid #000000!important;
border-left: 1px solid #000000!important;
border-right: 1px solid #000000!important;
border-top: 16px solid #000000!important;
}
.black hr {
border-bottom: 2px solid #000000!important;
}
.black dd.postprofile-info {
border-bottom: 1px dotted #000000!important;
border: 2px solid #000000!important;
}
div.post.online .postprofile.black:before {
background: #000000!important;
}
.black dd.postprofile-info:before {
background: #000000!important;
color: #fff;
}
.red {
background: #f6f6f6!important;
border-bottom: 16px solid #e90000!important;
border-left: 1px solid #e90000!important;
border-right: 1px solid #e90000!important;
border-top: 16px solid #e90000!important;
}
.red hr {
border-bottom: 2px solid #e90000!important;
}
.red dd.postprofile-info {
border-bottom: 1px dotted #e90000!important;
border: 2px solid #e90000!important;
}
div.post.online .postprofile.red:before {
background: #e90000!important;
}
.red dd.postprofile-info:before {
background: #e90000!important;
color: #fff;
}
.LightCoral {
background: #f6f6f6!important;
border-bottom: 16px solid #f08080!important;
border-left: 1px solid #f08080!important;
border-right: 1px solid #f08080!important;
border-top: 16px solid #f08080!important;
}
.LightCoral hr {
border-bottom: 2px solid #f08080!important;
}
.LightCoral dd.postprofile-info {
border-bottom: 1px dotted #f08080!important;
border: 2px solid #f08080!important;
}
div.post.online .postprofile.LightCoral:before {
background: #f08080!important;
}
.LightCoral dd.postprofile-info:before {
background: #f08080!important;
color: #fff;
}
.Wisteria {
background: #f6f6f6!important;
border-bottom: 16px solid #c6aec7!important;
border-left: 1px solid #c6aec7!important;
border-right: 1px solid #c6aec7!important;
border-top: 16px solid #c6aec7!important;
}
.Wisteria hr {
border-bottom: 2px solid #c6aec7!important;
}
.Wisteria dd.postprofile-info {
border-bottom: 1px dotted #c6aec7!important;
border: 2px solid #c6aec7!important;
}
div.post.online .postprofile.Wisteria:before {
background: #c6aec7!important;
}
.Wisteria dd.postprofile-info:before {
background: #c6aec7!important;
color: #fff;
}
.SlateBlue {
background: #f6f6f6!important;
border-bottom: 16px solid #6a5acd!important;
border-left: 1px solid #6a5acd!important;
border-right: 1px solid #6a5acd!important;
border-top: 16px solid #6a5acd!important;
}
.SlateBlue hr {
border-bottom: 2px solid #6a5acd!important;
}
.SlateBlue dd.postprofile-info {
border-bottom: 1px dotted #6a5acd;!important;
border: 2px solid #6a5acd;!important;
}
div.post.online .postprofile.SlateBlue:before {
background: #6a5acd!important;
}
.SlateBlue dd.postprofile-info:before {
background: #6a5acd!important;
color: #fff;
}
.Indigo {
background: #f6f6f6!important;
border-bottom: 16px solid #4b0082!important;
border-left: 1px solid #4b0082!important;
border-right: 1px solid #4b0082!important;
border-top: 16px solid #4b0082!important;
}
.Indigo hr {
border-bottom: 2px solid #4b0082!important;
}
.Indigo dd.postprofile-info {
border-bottom: 1px dotted #4b0082;!important;
border: 2px solid #4b0082;!important;
}
div.post.online .postprofile.Indigo:before {
background: #4b0082!important;
}
.Indigo dd.postprofile-info:before {
background: #4b0082!important;
color: #fff;
}
- AwesomeBB :
Installing the JavaScript
To install the system you only need to go to Modules > JavaScript codes management and create a new script with the following settings.
Title : as you like
Placement : In the topics- Code:
$(function() {
//كونان2000.
var version = "phpBB3";
if(version.toLowerCase() == "phpbb3"){
$(".post-aside img[title='undefined']").closest('.post-aside').addClass("undefined");
$(".post-aside img[title='blue']").closest('.post-aside').addClass("blue");
$(".post-aside img[title='grey']").closest('.post-aside').addClass("grey");
$(".post-aside img[title='green']").closest('.post-aside').addClass("green");
$(".post-aside img[title='yellow']").closest('.post-aside').addClass("yellow");
$(".post-aside img[title='purple']").closest('.post-aside').addClass("purple");
$(".post-aside img[title='Orange']").closest('.post-aside').addClass("Orange");
$(".post-aside img[title='Pink']").closest('.post-aside').addClass("Pink");
$(".post-aside img[title='black']").closest('.post-aside').addClass("black");
$(".post-aside img[title='red']").closest('.post-aside').addClass("red");
$(".post-aside img[title='LightCoral']").closest('.post-aside').addClass("LightCoral");
$(".post-aside img[title='Wisteria']").closest('.post-aside').addClass("Wisteria");
$(".post-aside img[title='SlateBlue']").closest('.post-aside').addClass("SlateBlue");
$(".post-aside img[title='Indigo']").closest('.post-aside').addClass("Indigo");
}
});
Installing the CSS
Firstly you'll need to add some CSS to your stylesheet so the system displays correctly. Go to Administration Panel > Display > Colors > CSS stylesheet and paste the following rules in your stylesheet.
CSS- Code:
.post-aside {
background: #f6f6f6!important;
border-bottom: 16px solid #607d8b;
border-left: 1px solid #607d8b;
border-right: 1px solid #607d8b;
border-top: 16px solid #607d8b;
padding: 60px 3px 3px!important;
}
.blue {
background: #f6f6f6!important;
border-bottom: 16px solid #3e459c!important;
border-left: 1px solid #3e459c!important;
border-right: 1px solid #3e459c!important;
border-top: 16px solid #3e459c!important;
}
.grey {
background: #f6f6f6!important;
border-bottom: 16px solid #a0a09a!important;
border-left: 1px solid #a0a09a!important;
border-right: 1px solid #a0a09a!important;
border-top: 16px solid #a0a09a!important;
}
.green {
background: #f6f6f6!important;
border-bottom: 16px solid #42b649!important;
border-left: 1px solid #42b649!important;
border-right: 1px solid #42b649!important;
border-top: 16px solid #42b649!important;
}
.yellow {
background: #f6f6f6!important;
border-bottom: 16px solid #ede816!important;
border-left: 1px solid #ede816!important;
border-right: 1px solid #ede816!important;
border-top: 16px solid #ede816!important;
}
.purple {
background: #f6f6f6!important;
border-bottom: 16px solid #aa4399!important;
border-left: 1px solid #aa4399!important;
border-right: 1px solid #aa4399!important;
border-top: 16px solid #aa4399!important;
}
.blue dd {
border-bottom: 1px dotted #3e459c!important;
border-left: 3px solid #3e459c!important;
}
.grey dd {
border-bottom: 1px dotted #a0a09a!important;
border-left: 3px solid #a0a09a!important;
}
.green dd {
border-bottom: 1px dotted #42b649!important;
border-left: 3px solid #42b649!important;
}
.yellow dd {
border-bottom: 1px dotted #ede816!important;
border-left: 3px solid #ede816!important;
}
.purple dd {
border-bottom: 1px dotted #aa4399!important;
border-left: 3px solid #aa4399!important;
}
.purple .post-author-status {
width: 92%;
background-color: #aa4399!important;
}
.yellow .post-author-status {
width: 92%;
background-color: #ede816!important;
}
.green .post-author-status {
width: 92%;
background-color: #42b649!important;
}
.grey .post-author-status {
width: 92%;
background-color: #a0a09a!important;
}
.blue .post-author-status {
width: 92%;
background-color: #3e459c!important;
}
dd {
background-color: #ffffff;
border-bottom: 1px dotted #607d8b;
border-radius: 5px 5px 5px 5px;
border-left: 3px solid #607d8b;
border-width: 0 3px 2px 0;
font-family: "tahoma";
font-weight: bold;
font-size: 12px;
letter-spacing: 0;
margin: 3px;
padding: 2px;
}
.post-author-status:before {
width: 90%;
text-align: center;
font-weight: 900;
color: white;
content: "ONLINE";
}
.online .post-author-status {
display: block;
}
.post-author-status {
text-align: center;
background-color: #607d8b;
border-radius: 12px;
float: right;
height: auto;
position: absolute;
right: 10px;
top: 8px;
width: 92%;
}
dl.post-author-details:before {
color: white;
padding: 4px;
display: flex;
content: "Profile";
justify-content: center;
background: #607d8b;
}
.post-author-avatar {
margin: 0px;
}
.post-author-status {
background-color: #000;
border-radius: 12px;
display: none;
float: right;
height: auto;
position: absolute;
right: 10px;
top: 8px;
width: 90%;
}
.post-author-details span {
font-weight: 600;
margin-left: 5px;
}
aside.post-aside:before {
text-align: center;
width: 85%;
background-color: #607d8b;
border-radius: 12px;
color: #fff;
content: "OFFLINE";
font-weight: 900;
position: absolute;
right: 10px;
top: 8px;
}
.purple dl.post-author-details:before {
background: #aa4399!important;
}
.blue dl.post-author-details:before {
background: #3e459c!important;
}
.green dl.post-author-details:before {
background: #42b649!important;
}
.grey dl.post-author-details:before {
background: #a0a09a!important;
}
.yellow dl.post-author-details:before {
background: #ede816!important;
}
dd {
background: white;
}
.Orange {
background: #f6f6f6!important;
border-bottom: 16px solid #ffa200 !important;
border-left: 1px solid #ffa200 !important;
border-right: 1px solid #ffa200 !important;
border-top: 16px solid #ffa200 !important;
}
.Orange dd {
border-bottom: 1px dotted #ffa200 !important;
border-left: 3px solid #ffa200 !important;
}
.Orange .post-author-status {
width: 92%;
background-color: #ffa200 !important;
}
.Orange dl.post-author-details:before {
background: #ffa200 !important;
}
.Pink {
background: #f6f6f6!important;
border-bottom: 16px solid #ffc0cb !important;
border-left: 1px solid #ffc0cb !important;
border-right: 1px solid #ffc0cb !important;
border-top: 16px solid #ffc0cb !important;
}
.Pink dd {
border-bottom: 1px dotted #ffc0cb !important;
border-left: 3px solid #ffc0cb !important;
}
.Pink .post-author-status {
width: 92%;
background-color: #ffc0cb !important;
}
.Pink dl.post-author-details:before {
background: #ffc0cb !important;
}
.black {
background: #f6f6f6!important;
border-bottom: 16px solid #000000 !important;
border-left: 1px solid #000000 !important;
border-right: 1px solid #000000 !important;
border-top: 16px solid #000000 !important;
}
.black dd {
border-bottom: 1px dotted #000000 !important;
border-left: 3px solid #000000 !important;
}
.black .post-author-status {
width: 92%;
background-color: #000000 !important;
}
.black dl.post-author-details:before {
background: #000000 !important;
}
.red {
background: #f6f6f6!important;
border-bottom: 16px solid #e90000 !important;
border-left: 1px solid #e90000 !important;
border-right: 1px solid #e90000 !important;
border-top: 16px solid #e90000 !important;
}
.red dd {
border-bottom: 1px dotted #e90000 !important;
border-left: 3px solid #e90000 !important;
}
.red .post-author-status {
width: 92%;
background-color: #e90000 !important;
}
.red dl.post-author-details:before {
background: #e90000 !important;
}
.LightCoral {
background: #f6f6f6!important;
border-bottom: 16px solid #f08080 !important;
border-left: 1px solid #f08080 !important;
border-right: 1px solid #f08080 !important;
border-top: 16px solid #f08080 !important;
}
.LightCoral dd {
border-bottom: 1px dotted #f08080 !important;
border-left: 3px solid #f08080 !important;
}
.LightCoral .post-author-status {
width: 92%;
background-color: #f08080 !important;
}
.LightCoral dl.post-author-details:before {
background: #f08080 !important;
}
.Wisteria {
background: #f6f6f6!important;
border-bottom: 16px solid #c6aec7 !important;
border-left: 1px solid #c6aec7 !important;
border-right: 1px solid #c6aec7 !important;
border-top: 16px solid #c6aec7 !important;
}
.Wisteria dd {
border-bottom: 1px dotted #c6aec7 !important;
border-left: 3px solid #c6aec7 !important;
}
.Wisteria .post-author-status {
width: 92%;
background-color: #c6aec7 !important;
}
.Wisteria dl.post-author-details:before {
background: #c6aec7 !important;
}
.SlateBlue {
background: #f6f6f6!important;
border-bottom: 16px solid #6a5acd !important;
border-left: 1px solid #6a5acd !important;
border-right: 1px solid #6a5acd !important;
border-top: 16px solid #6a5acd !important;
}
.SlateBlue dd {
border-bottom: 1px dotted #6a5acd !important;
border-left: 3px solid #6a5acd !important;
}
.SlateBlue .post-author-status {
width: 92%;
background-color: #6a5acd !important;
}
.SlateBlue dl.post-author-details:before {
background: #6a5acd !important;
}
.Indigo {
background: #f6f6f6!important;
border-bottom: 16px solid #4b0082 !important;
border-left: 1px solid #4b0082 !important;
border-right: 1px solid #4b0082 !important;
border-top: 16px solid #4b0082 !important;
}
.Indigo dd {
border-bottom: 1px dotted #4b0082 !important;
border-left: 3px solid #4b0082 !important;
}
.Indigo .post-author-status {
width: 92%;
background-color: #4b0082 !important;
}
.Indigo dl.post-author-details:before {
background: #4b0082 !important;
}
Don't forget to save 
Don't forget to choose your color from your profile
We hope you like this great Trick .
-------------------------------------------------------------------
This tutorial was written by كونان2000 .
كونان2000- Forumember
-
Posts : 36
Reputation : 21
Language : arabic 
skouliki, Ape, SarkZKalie, TonnyKamper and jucarese like this post
Re: Choose the color of your profile
by skouliki December 19th 2021, 8:56 am
thats a great idea ! thanks for sharing
for the punbb version you have errors ?
for the punbb version you have errors ?
skouliki- Manager
-
Posts : 12336
Reputation : 1519
Language : English,Greek
Location : Greece -
كونان2000 likes this post
Re: Choose the color of your profile
by كونان2000 December 20th 2021, 1:39 am
Hello skouliki,skouliki wrote:thats a great idea ! thanks for sharing
for the punbb version you have errors ?
I can't edit the first post
A new code has been created for the PunBB version,
It is now working on the following forum versions:
PunBB phpBB2 phpBB3 ModernBB AwesomeBB _______________
PunBB version
- PunBB:
- 1. Go to Admin Panel > Display > Templates > General
2. Please choose viewtopic_body
3. Click modify button
4. Find this code:- Code:
{postrow.displayed.POSTER_AVATAR}<br />
5. And replace by this:- Code:
<div class="onlinebun">{postrow.displayed.ONLINE_IMG_NEW}</div><br />
<div class="offlinebun">OFFLINE</div><br />
{postrow.displayed.POSTER_AVATAR}<br />
Installing the JavaScript
To install the system you only need to go to Modules > JavaScript codes management and create a new script with the following settings.
Title : as you like
Placement : In the topics- Code:
$(function() {
//كونان2000.
var version = "phpBB3";
if(version.toLowerCase() == "phpbb3"){
$(".user img[title='undefined']").closest('.user').addClass("undefined");
$(".user img[title='blue']").closest('.user').addClass("blue");
$(".user img[title='grey']").closest('.user').addClass("grey");
$(".user img[title='green']").closest('.user').addClass("green");
$(".user img[title='yellow']").closest('.user').addClass("yellow");
$(".user img[title='purple']").closest('.user').addClass("purple");
$(".user img[title='Orange']").closest('.user').addClass("Orange");
$(".user img[title='Pink']").closest('.user').addClass("Pink");
$(".user img[title='black']").closest('.user').addClass("black");
$(".user img[title='red']").closest('.user').addClass("red");
$(".user img[title='LightCoral']").closest('.user').addClass("LightCoral");
$(".user img[title='Wisteria']").closest('.user').addClass("Wisteria");
$(".user img[title='SlateBlue']").closest('.user').addClass("SlateBlue");
$(".user img[title='Indigo']").closest('.user').addClass("Indigo");
}
});
Installing the CSS
Firstly you'll need to add some CSS to your stylesheet so the system displays correctly. Go to Administration Panel > Display > Colors > CSS stylesheet and paste the following rules in your stylesheet.
CSS- Code:
.pun .post .user {
background: #f6f6f6;
border-bottom: 16px solid #607d8b;
border-left: 1px solid #607d8b;
border-radius: 3px;
border-right: 1px solid #607d8b;
border-top: 16px solid #607d8b;
padding: 60px 3px 3px!important;
}
.pun .user-ident .username {
margin-top: 14px;
width: 100%;
text-align: center;
}
.offlinebun {
background: #607d8b;
color: #f0ffff;
left: 0;
position: absolute;
right: 0;
text-align: center;
top: 60px;
z-index: 0;
border-radius: 77px;
}
.onlinebun {
position: absolute;
background: #607d8b;
color: #f0ffff;
text-align: center;
left: 0;
right: 0;
z-index: 2;
border-radius: 77px;
}
.user-info:before {
margin-bottom: 11px;
text-align: center;
background: #607d8b;
display: block;
content: "profile";
color: azure;
}
.blue {
background: #f6f6f6!important;
border-bottom: 16px solid #3e459c!important;
border-left: 1px solid #3e459c!important;
border-right: 1px solid #3e459c!important;
border-top: 16px solid #3e459c!important;
}
.blue .onlinebun {
background: #3e459c!important;
}
.blue .user-info:before {
background: #3e459c!important;
}
.grey {
background: #f6f6f6!important;
border-bottom: 16px solid #a0a09a!important;
border-left: 1px solid #a0a09a!important;
border-right: 1px solid #a0a09a!important;
border-top: 16px solid #a0a09a!important;
}
.grey .onlinebun {
background: #a0a09a!important;
}
.grey .user-info:before {
background: #a0a09a!important;
}
.green {
background: #f6f6f6!important;
border-bottom: 16px solid #42b649!important;
border-left: 1px solid #42b649!important;
border-right: 1px solid #42b649!important;
border-top: 16px solid #42b649!important;
}
.green .onlinebun {
background: #42b649!important;
}
.green .user-info:before {
background: #42b649!important;
}
.yellow {
background: #f6f6f6!important;
border-bottom: 16px solid #ede816!important;
border-left: 1px solid #ede816!important;
border-right: 1px solid #ede816!important;
border-top: 16px solid #ede816!important;
}
.yellow .onlinebun {
background: #ede816!important;
}
.yellow .user-info:before {
background: #ede816!important;
}
.purple {
background: #f6f6f6!important;
border-bottom: 16px solid #aa4399!important;
border-left: 1px solid #aa4399!important;
border-right: 1px solid #aa4399!important;
border-top: 16px solid #aa4399!important;
}
.purple .onlinebun {
background: #aa4399!important;
}
.purple .user-info:before {
background: #aa4399!important;
}
.Orange {
background: #f6f6f6!important;
border-bottom: 16px solid #ffa200!important;
border-left: 1px solid #ffa200!important;
border-right: 1px solid #ffa200!important;
border-top: 16px solid #ffa200!important;
}
.Orange .onlinebun {
background: #ffa200!important;
}
.Orange .user-info:before {
background: #ffa200!important;
}
.Pink {
background: #f6f6f6!important;
border-bottom: 16px solid #ffc0cb!important;
border-left: 1px solid #ffc0cb!important;
border-right: 1px solid #ffc0cb!important;
border-top: 16px solid #ffc0cb!important;
}
.Pink .onlinebun {
background: #ffc0cb!important;
}
.Pink .user-info:before {
background: #ffc0cb!important;
}
.black {
background: #f6f6f6!important;
border-bottom: 16px solid #000000!important;
border-left: 1px solid #000000!important;
border-right: 1px solid #000000!important;
border-top: 16px solid #000000!important;
}
.black .onlinebun {
background: #000000!important;
}
.black .user-info:before {
background: #000000!important;
}
.red {
background: #f6f6f6!important;
border-bottom: 16px solid #e90000!important;
border-left: 1px solid #e90000!important;
border-right: 1px solid #e90000!important;
border-top: 16px solid #e90000!important;
}
.red .onlinebun {
background: #e90000!important;
}
.red .user-info:before {
background: #e90000!important;
}
.LightCoral {
background: #f6f6f6!important;
border-bottom: 16px solid #f08080!important;
border-left: 1px solid #f08080!important;
border-right: 1px solid #f08080!important;
border-top: 16px solid #f08080!important;
}
.LightCoral .onlinebun {
background: #f08080!important;
}
.LightCoral .user-info:before {
background: #f08080!important;
}
.Wisteria {
background: #f6f6f6!important;
border-bottom: 16px solid #c6aec7!important;
border-left: 1px solid #c6aec7!important;
border-right: 1px solid #c6aec7!important;
border-top: 16px solid #c6aec7!important;
}
.Wisteria .onlinebun {
background: #c6aec7!important;
}
.Wisteria .user-info:before {
background: #c6aec7!important;
}
.SlateBlue {
background: #f6f6f6!important;
border-bottom: 16px solid #6a5acd!important;
border-left: 1px solid #6a5acd!important;
border-right: 1px solid #6a5acd!important;
border-top: 16px solid #6a5acd!important;
}
.SlateBlue .onlinebun {
background: #6a5acd!important;
}
.SlateBlue .user-info:before {
background: #6a5acd!important;
}
.Indigo {
background: #f6f6f6!important;
border-bottom: 16px solid #4b0082!important;
border-left: 1px solid #4b0082!important;
border-right: 1px solid #4b0082!important;
border-top: 16px solid #4b0082!important;
}
.Indigo .onlinebun {
background: #4b0082!important;
}
.Indigo .user-info:before {
background: #4b0082!important;
}
كونان2000- Forumember
- Posts : 36
Reputation : 21
Language : arabic -
skouliki, SarkZKalie and TonnyKamper like this post
skouliki- Manager
- Posts : 12336
Reputation : 1519
Language : English,Greek
Location : Greece -
كونان2000 likes this post
Re: Choose the color of your profile
by YoshiGM December 20th 2021, 3:33 pm
Nice tutorial dude.
Thanks for sharing it with us
Thanks for sharing it with us
YoshiGM- Active Poster
-
Posts : 1210
Reputation : 133
Language : Spanish & English
Location : Mexico -
كونان2000 likes this post
Re: Choose the color of your profile
by كونان2000 December 21st 2021, 2:50 am
كونان2000- Forumember
- Posts : 36
Reputation : 21
Language : arabic -
Similar topics» Is there a limit to the images you can choose from in a profile?
» Allowing users to choose which color...
» Premium users choose their own name color
» How can i make it where people can choose their own color for their name?
» How do you make a personalized profile page with options that you can choose from?
» Allowing users to choose which color...
» Premium users choose their own name color
» How can i make it where people can choose their own color for their name?
» How do you make a personalized profile page with options that you can choose from?
Page 1 of 1
Permissions in this forum:
You cannot reply to topics in this forum
Facebook
Twitter
Pinterest
Youtube
