درود

در این اموزش قصد دارم زیباسازی پست بیت به سبک استایل watermelon رو بدم

نمونه :



ابتدا به ادمین سی پی >>>استایل ها و قالب ها >>>جستجو در قالب ها >>>additional.css سرچ کنید و انتهای آن اضافه کنید :

کد:
.post_field strong {
    color:#fff;
}
.post_field dt {
    color:#fff;
    font-weight:400;
}


.post_field{

color : #fff;
-webkit-transition:all 0.3s ease-in;
-moz-transition:all 0.3s ease-in;
-o-transition:all 0.3s ease-in;
border-left:0px solid #dbe1e6;border-right:0px solid #731a8b;margin:0 0 3px 0;padding:3px 5px 5px 1px;border-radius:7px;-moz-border-radius:7px;-webkit-border-radius:7px;text-shadow:#b2b2b2 0 0 7px;height:20px;width:177px;

border-bottom:4px solid #8eca2c;
padding :5px;
background : url(images/watermelon/bgpostbit.png)
}
.post_field:hover{-webkit-transform:scale(1.05);-moz-transform:)scale(1.05);-ms-transform:)scale(1.05);-o-transform:scale(1.05); transform:scale(1.05);}
.postbit_logo{margin-left:5px;float:left;position:absolute;background:url(http://up.vbiran.ir/images/avfvrfx0x3lvv7xgxn13.png) no-repeat;-webkit-transition:all 0.8s ease-in;
-moz-transition:all 0.8s ease-in;
-o-transition:all 0.8s ease-in;
height:21px;
width:20px;
left:7px;
opacity:0.85;

}

.post_field:hover .postbit_logo{margin-left:150px;-webkit-transform:rotate(20deg)scale(1.2);-moz-transform:rotate(20deg)scale(1.2);-ms-transform:rotate(20deg)scale(1.2);-o-transform:rotate(20deg)scale(1.2);transform:rotate(20deg)scale(1.2);opacity:0;}

.postbit_logo:after {
background:none;
}

.postbit_div2 {
background:url(http://up.vbiran.ir/images/avfvrfx0x3lvv7xgxn13.png) no-repeat 5px 0px;
opacity:0.9;
height: 25px;
}



.postbit .posthead .postdate, .postbitlegacy .posthead .postdate {
text-shadow: 1px 1px 
#872222 !important;
}


.postbitlegacy .userinfo .username_container {
margin-bottom: 8px;
background: url(http://www.vbiran.ir/images/specialedition/name.png) no-repeat center;
padding: 11px 0px;
margin-right: -10px;
margin-left: -10px;
}
سپس در جستجوی قالب postbit_legacy رو سرچ کنید و کل محتوای آن را با کد زیر عوض کنید :

کد:
{vb:raw template_hook.postbit_start}
<li class="postbitlegacy postbitim postcontainer {vb:raw post.statusicon}" id="post_{vb:raw post.postid}">
<!-- see bottom of postbit.css for .userinfo .popupmenu styles -->

    <div class="posthead">
            <span class="postdate {vb:raw post.statusicon}">
                <vb:if condition="$show['announcement']">
                    <span class="date">{vb:rawphrase x_until_y, {vb:raw post.startdate}, {vb:raw post.enddate}}</span>
                <vb:else />
                    <span class="date">{vb:raw post.postdate}<vb:if condition="!$show['detailedtime']">,&nbsp;<span class="time">{vb:raw post.posttime}</span></vb:if></span>
                </vb:if>
            </span>
            <span class="nodecontrols">
                <vb:if condition="$post['postid'] AND $post['threadid'] AND !$show['moderated']">
<a href="#top" onclick="self.scrollTo(0, 0); return false;">Top</a> |
                    <a name="post{vb:raw post.postid}" href="{vb:link thread, {vb:raw thread}, {vb:raw pageinfo_post}}#post{vb:raw post.postid}" class="<vb:if condition="$show['inlinemod']">ie</vb:if>postcounter">#{vb:raw post.postcount}</a><a id="postcount{vb:raw post.postid}" name="{vb:raw post.postcount}"></a> 
                </vb:if>
                <vb:if condition="$show['moderated']"><a name="post{vb:raw post.postid}"></a>{vb:rawphrase moderated_post}</vb:if>
                <vb:if condition="$show['inlinemod']">
                    <label for="post_imod_checkbox_{vb:raw post.postid}"><input class="postimod" type="checkbox" id="post_imod_checkbox_{vb:raw post.postid}" name="plist[{vb:raw post.postid}]" value="{vb:raw post.checkbox_value}" /></label>
                </vb:if>
            </span>
    </div>
    <div class="postdetails">
        <div class="userinfo">
            <div class="username_container">
            <vb:if condition="$post['userid']">
                {vb:raw memberaction_dropdown}
                {vb:raw post.onlinestatus}
            <vb:else />
                <span class="username guest">{vb:raw post.musername}</span>
            </vb:if>
            </div>
            <vb:if condition="$post['rank']">
                <span class="rank">{vb:raw post.rank}</span>
            </vb:if>
            {vb:raw template_hook.postbit_userinfo_left}

            <vb:if condition="$show['avatar']">
<div class="usercenter">
            <a class="postuseravatar_custom avatar_user" href="{vb:link member, {vb:raw post}}" title="{vb:rawphrase {vb:raw post['onlinestatusphrase']}, {vb:raw post.username}}">
                <img src="{vb:raw post.avatarurl}" alt="{vb:rawphrase xs_avatar, {vb:raw post.username}}" title="{vb:rawphrase xs_avatar, {vb:raw post.username}}" style="-webkit-border-radius: 10px;-moz-border-radius: 10px;border-radius: 10px;" />
            </a>
</div>
            </vb:if> 
            <vb:if condition="$post['userid']">
                <hr />
                <dl class="userinfo_extra">
                    <vb:if condition="$post['joindate']"><div class="post_field"><div class="postbit_div2"><dt>{vb:rawphrase join_date}</dt> <dd>{vb:raw post.joindate}</dd></div></div></vb:if>
<div class="post_field"><div class="postbit_div2"><dt>شماره عضویت</dt><dd>{vb:raw post.userid}</dd></div></div>
<div class="post_field"><div class="postbit_div2"><dt>عنوان کاربر</dt> <dd>{vb:raw post.usertitle}</dd></div></div>
<div class="post_field"><div class="postbit_div2"><dt>میانگین پست در روز</dt> <dd>{vb:raw post.postsperday}</dd></div></div>

                    <vb:if condition="$post['field2']"><div class="post_field"><div class="postbit_div2"><dt>{vb:rawphrase location_perm}</dt> <dd>{vb:raw post.field2}</dd></div></div></vb:if>


<vb:if condition="$post['field5']"><div class="post_field"><div class="postbit_div2"><dt>ورژن ویبولتین</dt> <dd>{vb:raw post.field5}</dd></div></div></vb:if>
<vb:if condition="$post['field21']">
<div class="post_field"><div class="postbit_div2"><dt>آدرس سایت من</dt> <dd><a href="{vb:raw post.field21}"> کلیک کنید </a></dd></div></div>
<vb:else />
<div class="post_field"><div class="postbit_div2"><dt>آدرس سایت من</dt> <dd><a href="http://www.vbiran.ir/profile.php?do=editprofile"> انتخاب نشده </a></dd></div></div>

</vb:if>

                    <vb:if condition="$post['age']"><div class="post_field"><div class="postbit_div2"><dt>{vb:rawphrase age}</dt> <dd>{vb:raw post.age}</dd></div></div></vb:if>
                    <div class="post_field"><div class="postbit_div2"><dt>{vb:rawphrase posts}</dt> <dd>{vb:raw post.posts}</dd></div></div>    

                    {vb:raw template_hook.postbit_userinfo_right_after_posts}

                </dl>
                <vb:if condition="$show['infraction'] OR $show['reppower']">
                <dl class="user_rep">
                    <vb:if condition="$show['infraction']">
                    <div class="post_field"><div class="postbit_div2"><dt>{vb:rawphrase infractions}</dt> 
                    <dd>{vb:raw post.warnings}/{vb:raw post.infractions} ({vb:raw post.ipoints})</dd></div></div>
                    </vb:if>
                    <vb:if condition="$show['reputation']">
                        <vb:if condition="$show['reppower']">
<div class="post_field"><div class="postbit_div2">
                    <dt>{vb:rawphrase reppower}</dt> 
                    <dd id="reppower_{vb:raw post.postid}_{vb:raw post.userid}">{vb:raw post.reppower}</dd></div></div>
                        </vb:if>
                    </vb:if>

                </dl>
                </vb:if>
                {vb:raw template_hook.postbit_userinfo_right}
                <div class="imlinks">
                    {vb:raw post.icqicon} {vb:raw post.aimicon} {vb:raw post.msnicon} {vb:raw post.yahooicon} {vb:raw post.skypeicon}
                </div>
            </vb:if>
            <vb:if condition="$show['reputation']">
<div style="margin:0 auto 0 auto;text-align:center;">
                <span class="postbit_reputation" id="repdisplay_{vb:raw post.postid}_{vb:raw post.userid}" title="{vb:raw post.username} {vb:raw post.level}">
                    <vb:each from="reputationdisplay" value="row">
                        <img class="{vb:raw row.class}" src="{vb:stylevar imgdir_reputation}/reputation_{vb:raw row.posneg}{vb:raw row.imgext}" alt="" />{vb:raw row.rowend}
                    </vb:each>
                </span>
</div>
            </vb:if>

        </div>
        <div class="postbody">
            <div class="postrow<vb:if condition="$show['postedited'] || $post['signature']"> has_after_content</vb:if>">
                {vb:raw template_hook.postbit_messagearea_start}
<div style="float:left;margin-top: 8px;"><g:plusone size="small" href="{vb:link thread, {vb:raw thread}, {vb:raw pageinfo_post}}#post{vb:raw post.postid}"></g:plusone></div>
                <vb:if condition="$post['title'] OR $show['messageicon']">
                <h2 class="title icon">
                    <vb:if condition="$show['messageicon']"><img src="{vb:raw post.iconpath}" alt="{vb:raw post.icontitle}" /> </vb:if>{vb:raw post.title}
                </h2>

                </vb:if>


                        <vb:if condition="$post['isfirstshown']">
                            {vb:raw ad_location.ad_showthread_firstpost_start}
                            {vb:raw ad_location.thread_first_post_content}
                        </vb:if>
                        <vb:if condition="$post['islastshown']">
                            {vb:raw ad_location.thread_last_post_content}
                        </vb:if>
                <div class="content<vb:if condition="$show['first_ad'] OR $show['last_ad']"> hasad</vb:if>">
                    <div id="post_message_{vb:raw post.postid}">
                        <blockquote class="postcontent restore ">
                            {vb:raw post.message}
                        </blockquote>
                    </div>

                    <vb:if condition="$show['attachments']">
                        <div class="attachments">

                        <vb:if condition="$show['thumbnailattachment']">
                            <fieldset class="postcontent">
                                <legend><img src="{vb:stylevar imgdir_misc}/paperclip.png" class="inlineimg" alt="{vb:rawphrase attached_thumbnails}" /> {vb:rawphrase attached_thumbnails}</legend>
                                {vb:raw post.thumbnailattachments}
                            </fieldset>
                        </vb:if>

                        <vb:if condition="$show['imageattachment']">
                            <fieldset class="postcontent">
                                <legend><img src="{vb:stylevar imgdir_misc}/paperclip.png" class="inlineimg" alt="{vb:rawphrase attached_images}" /> {vb:rawphrase attached_images}</legend>
                                {vb:raw post.imageattachments}
                            </fieldset>
                        </vb:if>

                        <vb:if condition="$show['imageattachmentlink']">
                            <fieldset class="postcontent">
                                <legend><img src="{vb:stylevar imgdir_misc}/paperclip.png" class="inlineimg" alt="{vb:rawphrase attached_images}" /> {vb:rawphrase attached_images}</legend>
                                <ul>
                                {vb:raw post.imageattachmentlinks}
                                </ul>
                            </fieldset>
                        </vb:if>

                        <vb:if condition="$show['otherattachment']">
                            <fieldset class="postcontent">
                                <legend><img src="{vb:stylevar imgdir_misc}/paperclip.png" class="inlineimg" alt="{vb:rawphrase attached_files}" /> {vb:rawphrase attached_files}</legend>
                                <ul>
                                {vb:raw post.otherattachments}
                                </ul>
                            </fieldset>
                        </vb:if>

                        <vb:if condition="$show['moderatedattachment']">
                            <fieldset class="postcontent">
                                <legend><img src="{vb:stylevar imgdir_misc}/paperclip.png" class="inlineimg" alt="{vb:rawphrase attachments_pending_approval}" /> {vb:rawphrase attachments_pending_approval}</legend>
                                <ul>
                                {vb:raw post.moderatedattachments}
                                </ul>
                            </fieldset>
                        </vb:if>

                        </div>
                    <!-- / attachments -->
                    </vb:if>
                </div>
            </div>
            <vb:if condition="$show['postedited'] || $post['signature']">
            <div class="after_content">
                <vb:if condition="$show['postedited']">
                <!-- edit note -->
                <blockquote class="postcontent lastedited">
                    <vb:if condition="$show['postedithistory']">
                        {vb:rawphrase last_edited_link_by_x_on_y_at_z_postid, {vb:raw post.edit_username}, {vb:raw post.edit_date}, 
                            {vb:raw post.edit_time}, {vb:raw post.historyurl}}
                    <vb:else />
                        {vb:rawphrase last_edited_by_x_on_y_at_z, {vb:raw post.edit_username}, {vb:raw post.edit_date}, {vb:raw post.edit_time}}
                    </vb:if>
                    <vb:if condition="$post['edit_reason']">
                        <span class="reason">{vb:rawphrase reason}:</span> {vb:raw post.edit_reason}
                    </vb:if>
                </blockquote>
                <!-- / edit note -->
                </vb:if>
                {vb:raw template_hook.postbit_signature_start}
                <vb:if condition="$post['isfirstshown']">
                    {vb:raw ad_location.ad_showthread_firstpost_sig}
                </vb:if>
                {vb:raw template_hook.postbit_signature_end}
            </div>
            </vb:if>
            <div class="cleardiv"></div>

{vb:raw template_hook.postbit_messagearea_end}
                <vb:if condition="$post['signature']">
<div class="verticalline" style="margin-top: 13px;
margin-bottom: -10px;"></div>

                    <blockquote class="signature restore" style="border-top:none;">

<div class="signaturecontainer"><div class="mysignature">{vb:raw post.signature}</div></div></blockquote>
                </vb:if>

        </div>
    </div>
        <div class="postfoot">
            <!-- <div class="postfoot_container"> -->
            <div class="textcontrols floatcontainer">
                <span class="postcontrols">
                    <img style="display:none" id="progress_{vb:raw post.postid}" src="{vb:stylevar imgdir_misc}/progress.gif" alt="{vb:rawphrase loading_editor_please_wait}" />
                    <vb:if condition="$post['editlink']">
                        <a class="editpost" href="{vb:raw post.editlink}" name="vB::QuickEdit::{vb:raw post.postid}" title="{vb:rawphrase edit_delete_message}"><img src="{vb:raw vboptions.cleargifurl}" id="editimg_{vb:raw post.postid}" alt="{vb:rawphrase edit_delete_message}" /> {vb:rawphrase edit_post}</a> 
                    <vb:if condition="THIS_SCRIPT != 'usernote' && THIS_SCRIPT != 'announcement'"><span class="seperator">&nbsp;</span></vb:if>
                    </vb:if>
                    <vb:if condition="$show['quickreply'] AND !$show['threadedmode']">
                        <a id="qr_{vb:raw post.postid}" class='quickreply' href="{vb:raw post.replylink}&amp;noquote=1" rel="nofollow" title="{vb:rawphrase quick_reply_to_this_message}"><img id="replyimg_{vb:raw post.postid}" src="{vb:raw vboptions.cleargifurl}" alt="{vb:rawphrase quick_reply_to_this_message}" /> {vb:rawphrase reply}</a> 
                    <span class="seperator">&nbsp;</span>
                    </vb:if>
                    <vb:if condition="$post['replylink']">
                        <a id="qrwq_{vb:raw post.postid}" class="newreply" href="{vb:raw post.replylink}" rel="nofollow" title="{vb:rawphrase reply_with_quote}"><img id="quoteimg_{vb:raw post.postid}" src="{vb:raw vboptions.cleargifurl}" alt="{vb:rawphrase reply_with_quote}" />  <vb:if condition="$post['forwardlink']">{vb:rawphrase reply_to_private_message}<vb:else />{vb:rawphrase reply_with_quote}</vb:if></a> 
                    <vb:if condition="$show['multiquote_post']"><span class="seperator">&nbsp;</span></vb:if>
                    </vb:if>
                    <vb:if condition="$show['multiquote_post']">
                         <a class="multiquote" href="{vb:raw post.replylink}" rel="nofollow" onclick="return false;" id="mq_{vb:raw post.postid}" title="{vb:rawphrase multi_quote_this_message}"><img id="mq_image_{vb:raw post.postid}" src="{vb:raw vboptions.cleargifurl}" alt="{vb:rawphrase multi_quote_this_message}" />&nbsp;</a> 
                    </vb:if>
                </span>
                <span class="postlinking">
                    <vb:if condition="!$post['forwardlink'] && THIS_SCRIPT != 'usernote' && THIS_SCRIPT != 'announcement'">
                        <vb:if condition="$promote_sectionid AND $promote_sectionid != -1">
                               <a href="{vb:raw promote_url}" class="promotecms">{vb:rawphrase promote_to_article}</a>
                                                       <span class="seperator">&nbsp;</span>
                        </vb:if>
                    </vb:if>

                    {vb:raw template_hook.postbit_controls}
                    {vb:raw post.iplogged}
                    <vb:if condition="$post['forwardlink']">
                        <a class="forwardpost" href="{vb:raw post.forwardlink}" rel="nofollow"><img src="{vb:raw vboptions.cleargifurl}" alt="{vb:rawphrase forward_message}" /> {vb:rawphrase forward}</a>
                        <vb:if condition="$show['reputationlink'] OR $show['infractionlink'] OR $show['moderated'] OR $show['spam'] OR $show['deletedpost'] OR $show['redcard'] OR $show['yellowcard']"><span class="seperator">&nbsp;</span></vb:if>
                    </vb:if>
                    <vb:if condition="$show['reputationlink']">
                        <span class="reputationpopupmenu popupmenu popupcustom" title="{vb:raw post.postid}"><a class="popupctrl reputation" href="reputation.php?{vb:raw session.sessionurl}do=addreputation&amp;p={vb:raw post.postid}" title="{vb:rawphrase add_reputation}" rel="nofollow" id="reputation_{vb:raw post.postid}"><!--<img src="{vb:stylevar imgdir_button}/reputation-40b.png" alt="{vb:rawphrase add_reputation}" /> -->&nbsp;</a></span>
                    </vb:if>

                    <vb:if condition="$show['infractionlink']">
                        &nbsp;<a class="infraction" href="infraction.php?{vb:raw session.sessionurl}do=report&amp;p={vb:raw post.postid}" rel="nofollow" title="{vb:rawphrase add_infraction_for_x, {vb:raw post.username}}"><!-- <img src="{vb:stylevar imgdir_button}/add-infraction_sm.png" alt="{vb:rawphrase add_infraction_for_x, {vb:raw post.username}}" /> --></a></vb:if>
                    <vb:if condition="$show['reportlink']">
                        &nbsp;<a class="report" href="{vb:raw post.reportlink}" rel="nofollow" title="{vb:rawphrase report_bad_post}"><!-- <img src="{vb:stylevar imgdir_button}/report-40b.png" alt="{vb:rawphrase report_bad_post}" /> --></a>
                    </vb:if>
<vb:if condition="$show['moderated']">
                        <img class="moderated" src="{vb:stylevar imgdir_misc}/moderated_sm.png" alt="{vb:rawphrase moderated_post}" />
                    </vb:if>
                    <vb:if condition="$show['spam']">
                        <img class="spam" src="{vb:stylevar imgdir_misc}/spam_detected.png" alt="{vb:rawphrase spam_post}" />
                    </vb:if>
                    <vb:if condition="$show['deletedpost']">
                        <vb:if condition="$show['managepost']">
                            <a class="deleted" href="{vb:raw $vboptions.vbforum_url}{vb:if "$vboptions['vbforum_url']", '/', ''}postings.php?{vb:raw session.sessionurl}do=managepost&amp;p={vb:raw post.postid}" title="{vb:rawphrase manage}">&nbsp;</a>
                        <vb:else />
                            <img class="deleted_nolink" class="inlineimage" src="{vb:stylevar imgdir_button}/deleted_sm.png" alt="{vb:rawphrase deleted_post}" />
                        </vb:if>
                    </vb:if>
                    <vb:if condition="$show['redcard']">
                        <a class="redcard" href="infraction.php?{vb:raw session.sessionurl}do=view&amp;p={vb:raw post.postid}" rel="nofollow" title="{vb:rawphrase received_infraction}"><!-- <img src="{vb:stylevar imgdir_button}/red-card_sm.png" alt="{vb:rawphrase received_infraction}" /> --> &nbsp;</a>
                        <vb:elseif condition="$show['yellowcard']" />
                            <a class="yellowcard" href="infraction.php?{vb:raw session.sessionurl}do=view&amp;p={vb:raw post.postid}" rel="nofollow" title="{vb:rawphrase received_warning}"><!--<img src="{vb:stylevar imgdir_button}/yellow-card_sm.png" alt="{vb:rawphrase received_warning}" /> --> &nbsp;</a>
                    </vb:if>
                    <vb:if condition="$post['api_platform']">
                        <vb:if condition="$post['api_platform_link']">
                            <a class="mobile mobile_{vb:raw post.api_platform}" href="{vb:raw post.api_platform_link}" rel="nofollow" title="{vb:rawphrase {vb:raw post['api_platform_link_title']}}">{vb:rawphrase {vb:raw post['api_platform_link_phrase']}}</a>
                        <vb:else />
                            <span class="mobile mobile_{vb:raw post.api_platform}">{vb:rawphrase {vb:raw post['api_platform_link_phrase']}}</span>
                        </vb:if>
                    </vb:if>
                </span>
            <!-- </div> -->
            </div>
        </div>
    <hr />
</li>
{vb:raw template_hook.postbit_end}

تمام

به همین راحتی

لینک دانلود استایل :

دریافت استایل Watermelon طراحی اختصاصی توسط وی بی ایران

موفق و پیروز باشید