Help with miniprofiles

Hello my forum is phpbb2 version and I do have all the codes I want to use for mini profiles but I don't know where to put them that it will work.

Here are the codes:

Code:

<center><div class="mp-avatar"><div id='tabs_content_container'><div id='<!-- |id| -->TAB1' class='tab_content' style='display: block'><!-- |avatar| --></div><div id='<!-- |id| -->TAB2' class='tab_content'><div style='padding-top:20px;'></div><div class='mp-stab'><div class='mp-sinner'><div class='mp-alias'><!-- |field_1| --></div><div class='mp-barunder'><!-- |field_3| --></div><div class='mp-gif'><img src="<!-- |field_8| -->"></div><div class='mp-age'><!-- |field_2| --></div><div class='mp-ageunder'>AGE</div><div class='mp-postsunder'>POSTS</div><div class='mp-posts'><!-- |posts| --></div></div></div></div><div id='<!-- |id| -->TAB3' class='tab_content'> <div style='padding-top:20px;'></div><div class='mp-stab'><div class='mp-sinner'><div class='mp-ttab'><a href='/'>app</a> <a style="border-bottom:none; color:#969696; font-size:15px;"> •</a> <a href='/'>plot</a></div><div class='mp-barunder' style='margin-top:10px;'><!-- |status| --></div><div class='mp-quote'><div class='mp-quotecontent'><!-- |field_6| --></div></div><div class='mp-occupation'><!-- |field_7| --></div></div></div></div></div><div id='tabs_container' style='margin-top:-10px;'><ul id='tabs'><li class='active'><a href='#<!-- |id| -->TAB1'>i.</a></li><li><a href='#<!-- |id| -->TAB2'>ii.</a></li><li><a href='#<!-- |id| -->TAB3'>iii.</a></li></ul></div></div></center>

Code:

/*** MINI PROF ***/

.tab_content { display: none; color: white; width:250px; height:350px; background-image:url(http://i.imgur.com/GfMBMrR.png);
background-attachment:fixed;
text-align:center; }

#tabs { list-style: none;
padding: 0px 0px;
display: table;
width: 250px;
}

#tabs li { background-color: white;
padding: 2px;
margin: 0px 5px;
display: table-cell;
}


#tabs li.active  {
  transition: 0.6s; -moz-transition: 0.6s; -webkit-transition: 0.6s; -o-transition: 0.6s;
  background-color: #yellow;
}


#tabs_content_container { background: rgba(200,200,200,0.70); }
.mp-avatar {
 width:250px;
 height:400px;
 overflow:hidden;
}
.mp-stab {
 width:190px;
 margin:auto;
 height:290px;
 border:1px solid #cee760;
 padding:10px;
}
.mp-sinner {
 background-color:#fff;
 padding:10px;
 height:93%;
}
.mp-alias {
 color:#cee760;
 font-family:old standard tt;
 font-size:25px;
 text-align:center;
 padding-top:10px;
}
.mp-alias a {
 color:#cee760;
}
.mp-barunder {
 background-color:#B8D6CC;
 width:150px;
 padding-top:2px;
 padding-bottom:2px;
 font-family: 'Roboto Condensed', sans-serif;
 font-size:9px;
 color: #fff;
 text-transform:uppercase;
 margin:auto;
 margin-top:-8px;
}
.mp-gif {
 width:150px;
 height:150px;
 background-image:url(http://placehold.it/150x150);
 margin:auto;
 border-bottom:1px solid #B8D6CC;
}
.mp-age {
 width:65px;
 padding-top:2px;
 padding-bottom:2px;
 font-family: old standard tt;
 font-size:15px;
 text-align:center;
 float:left;
 background-color:#cee760;
 margin-top:5px;
 margin-left:15px;
}
.mp-ageunder {
 font-family: 'Roboto Condensed', sans-serif;
 font-size:9px;
 color: #969696;
 text-transform:uppercase;
 margin-top:13px;
 margin-left:-25px;
}
.mp-posts {
 width:65px;
 padding-top:2px;
 padding-bottom:2px;
 font-family: old standard tt;
 font-size:15px;
 text-align:center;
 background-color:#cee760;
 margin-top:10px;
 margin-left:90px;
}
.mp-postsunder {
 font-family: 'Roboto Condensed', sans-serif;
 font-size:9px;
 color: #969696;
 text-transform:uppercase;
 margin-top:18px;
 margin-left:-39px;
 float:left;
}
.mp-ttab a {
 border-bottom:1px solid #cee760;
 font-family:old standard tt;
 font-size:25px;
 text-align:center;
 text-transform:lowercase;
 padding:5px;
 -moz-transition: all 0.9s ease-in-out;
 -webkit-transition: all 0.9s ease-in-out;
 -o-transition: all 0.9s ease-in-out;
}
.mp-tabb a:hover {
 padding-left:15px;
 padding-right:15px;
 border-bottom:1px solid #B8D6CC;
}
.mp-tabb {
 color:#969696;
 font-size:30px;
}
.mp-quote {
 background-image:url(http://i.imgur.com/GfMBMrR.png);
 border:6px double #fff;
 width:145px;
 margin:auto;
 margin-top:5px;
 height:100px;
}
.mp-quotecontent {
 font-family: 'Roboto Condensed', sans-serif;
 font-size:9px;
 color: #969696;
 text-transform:none;
 text-align:justify;
 padding:4px;
 overflow:auto;
 background-color:#fff;
 line-height:100%;
 margin:auto;
 width:125px;
 height:80px;
 margin-top:5px;
}
.mp-occupation {
 color:#cee760;
 font-family:old standard tt;
 font-size:20px;
 text-align:center;
 padding-top:15px;
 text-transform:uppercase;
 line-height:100%;
 width:100px;
 margin:auto;
}

and here is also live preview for mini profiles:
http://ohdarling.jcink.net/index.php?act=ST&f=1&t=5

The second is CSS code:
Administration Panel > Display > Colors & Pictures > Colors
CSS Stylesheet Tab