مقاله: آموزش اضافه کردن باکس کاربرتر ماه / کاملا فلت و بسیار زیبا (اختصاصی)

درود .

بعد از چند ماه با دست پر اومدم

بریم سر اصل مطلب :d

:

ابتدا به headinclude_bottom برین و کد زیر رو که مربوط به اتصال فونت ایکون به قالب هست رو قرار بدید

کد:

<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">

توجه : اگر میخواهید که در این مرحله میتوانید تولتیپ اضافه کنید (توی باکس خیلی قشنگ میشه !)

خب بعدش میریم سراغ header یا ناو بار فرقی نداره / اما من اینجا هدر رو میرم / و در زیر

کد:

<div id="header" class="floatcontainer doc_header">

این کد هارو اضافه کنید :

کد:

<div id="bestuser">

<ul>
<img src="http://8pic.ir/images/i5qzvifba6d4v27r1vgb.png"></img>
 <div id="txt">
  <h1>MISFeasAnCE</h1>
   <h2><a href="#"><i class="fa fa-external-link"></i>طراح وب</a></h2>
    <p>لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است.</p>
</div>
</ul>

<li>
 <div id="iconha">
  <i id="tashakor" class="fa fa-heart fa-lg" rel="tooltip" title="تشکرشده">&nbsp;&nbsp;<span>310</span></i>
  <i id="cheshm" class="fa fa-eye fa-lg" rel="tooltip" title="نوشته ها">&nbsp;&nbsp;<span>127</span></i>
  <i id="raay" class="fa fa-user fa-2x" rel="tooltip" title="تعداد رای ها">&nbsp;&nbsp;<span>853</span></i>
 </div>
</li>

* خیلی مرتبن اصن توجه نکردین *

بعدش برین به additional.css و اضافه کنید :

کد:

/*********** Best user ****************/

#bestuser
{
float:left;
width:330px;
height:150px;
background:#fff;
margin:5% 0 0 2%;
border-radius:3px;
font-family:yekan,verdana;
border-bottom: 40px solid #4EB6B6;
}

#bestuser ul
{
margin-top:5%;
text-align:center;
}

#bestuser ul p
{
margin: 4%;
width: 180px;
color:#A5A5A5;
}

#bestuser ul img
{
float: left;
border-radius: 50%;
margin:5% 0 0 28px;
border: 3px solid #DBDBDB;
}

#txt{
top:6px;
right: 5px;
position: relative;
}

#bestuser ul h1{
color:#658585;
font-size:17px;
}

#bestuser ul h2 a{
color:#F2765C;
text-decoration: none;
font:16px yekan,FontAwesome;
}

#bestuser ul h2 a i{
top: 4px;
left: 5px;
margin-top: 2px;
position: relative;
}

#iconha{
color: #E3EEEE;
}

#iconha span{
font-size:17px;
}

#tashakor{
float:left;
margin: 7.7% 7%;
}

#cheshm{
float:left;
margin: 6.7% 7%;
font-size: 24px;
}

#cheshm span{
font-size: 14px;
}

#raay{
float:left;
margin: 5.7% 7%;
font-size: 24px;
}

/*********** End Of Best user *********/

تموم شد .

توجه مهم : 1- در بعضی استایل ها ممکنه داس هدر زیاد ارتفاء نداشته باشه به همین دلیل شاید به هم ریخته شه برای حل این مشکل میتونید کد هارو زیر ناوبار بزارین یا ارتفاء داس هدر رو زیاد کنین .
2- حتما تعداد کراکتر های بیوگرافی باید 70 تا باشه / باز تاکید میکنم 70 .

موفق باشید