آموزش کادر بندی پست بیت خاکستری + ( Hover )

درود .

این پست بیت کادر بندی امضا و کد های لایک وی بی سئو و کادر بندی جنسیت و سیستم عامل و ... رو داره .

و در صورت تمایل می تونید حذفش کنید که در آخر تاپیک می گم از کجا باس این کارو بکنید ...

ابتدا فایل top-highlight.png رو از فایل های پیوست دانلود کرده و توی Public Html _ /images/misc بریزید .

kadreaks.zip این فایل رو از فایل های پیوست دانلود کنید و توی پوشه ی Images بریزید .

توی additional.css اضافه کنید :

.

کد:

.post_field{ background:#f1f1f1 url(images/misc/blog/top-highlight.png) left top repeat-x ; color:#414141; border:1px solid #c4c4c4; padding:3px 3px 3px 10px; margin-bottom:3.5px; text-align:left; -webkit-border-radius:4px; -moz-border-radius:4px; border-radius:4px; text-shadow:1px 1px #fff } .post_field:hover{ background:#e1e1e1 url(images/misc/blog/top-highlight.png) left top repeat-x ; color:#414141; border:1px solid #c4c4c4; padding:3px 3px 3px 10px; margin-bottom:3.5px; text-align:left; -webkit-border-radius:4px; -moz-border-radius:4px; border-radius:4px;text-shadow:1px 1px #fff; box-shadow:#009966 0 0 1px; -moz-box-shadow:#c4c4c4 0 0 1px; -webkit-box-shadow:#c4c4c4 0 0 1px; } .post_field dt{ color:#444; font-weight:bold } .post_field2{ background:#f1f1f1 url(images/misc/blog/top-highlight.png) left top repeat-x ; color:#414141; border:1px solid #c4c4c4; padding:3px 3px 3px 10px; margin-bottom:3.5px; text-align:right; -webkit-border-radius:4px; -moz-border-radius:4px; border-radius:4px; text-shadow:1px 1px #fff } .post_field2:hover{ background:#e1e1e1 url(images/misc/blog/top-highlight.png) left top repeat-x ; color:#414141; border:1px solid #c4c4c4; padding:3px 3px 3px 10px; margin-bottom:3.5px; text-align:right; -webkit-border-radius:4px; -moz-border-radius:4px; border-radius:4px;text-shadow:1px 1px #fff; box-shadow:#009966 0 0 1px; -moz-box-shadow:#c4c4c4 0 0 1px; -webkit-box-shadow:#c4c4c4 0 0 1px; } .post_field2 dt{ color:#444; font-weight:bold } .username_container { padding:2px 0; text-align:center; } .username_container .username strong { font-size: 10pt; font-weight:bold; } .usertitle, .rank{ text-align:center; } .usercenter { padding-top:5px; text-align:center; } .post_field4{ background:#f1f1f1 url(images/misc/blog/top-highlight.png) left top repeat-x ; color:#414141; border:1px solid #c4c4c4; padding:3px 3px 3px 10px; margin-bottom:3.5px; text-align:center; -webkit-border-radius:4px; -moz-border-radius:4px; border-radius:4px; text-shadow:1px 1px #fff } .post_field4:hover{ background:#e1e1e1 url(images/misc/blog/top-highlight.png) left top repeat-x ; color:#414141; border:1px solid #c4c4c4; padding:3px 3px 3px 10px; margin-bottom:3.5px; text-align:center; -webkit-border-radius:4px; -moz-border-radius:4px; border-radius:4px;text-shadow:1px 1px #fff; box-shadow:#009966 0 0 1px; -moz-box-shadow:#c4c4c4 0 0 1px; -webkit-box-shadow:#c4c4c4 0 0 1px; } .postbitlegacy .userinfo .username_container { margin-bottom: 0px; } .box-signature { background: #f1f1e8 url(/images/signature-icon.png) no-repeat 99.3%; border: 2px dashed #d4c6aa; font-family: BKoodakBold,Tahoma; font-size: 14px; border-radius: 5px; box-shadow: 0px 0px 5px #CECECE; text-shadow: 1px 1px white; color: gray; padding: 5px; text-align: right; padding: 16px 67px 16px 67px; } .box-signature:hover { background: #f1f1f1 url(/images/signature-icon.png) no-repeat 99.3% ; }

توی Postbit_legacy :

کد:

{vb:raw template_hook.postbit_start}<li class="postbitlegacy postbitim postcontainer {vb:raw post.statusicon}" id="post_{vb:raw post.postid}"> <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']">, <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"> <div class="post_field4"><vb:if condition="$post['userid']"> {vb:raw memberaction_dropdown} {vb:raw post.onlinestatus}</div> <div class="post_field4"><div class="postbit_div2"><dt></dt> <dd>{vb:raw post.usertitle}</dd></div></div> <vb:else /> <span class="username guest">{vb:raw post.musername}</span> </vb:if> </div> {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}}">  <table cellpadding="0" cellspacing="0" align="center"> <tr> <td><img src="images/post_top_left.png"></td> <td style="background: url(images/post_top_center.png) repeat-x top left"> </td> <td><img src="images/post_top_right.png"></td> </tr> <tr> <td style="background: url(images/post_scale_left.png) repeat-y top left" valign="bottom"> </td> <td> <img src="{vb:raw post.avatarurl}" alt="{vb:rawphrase xs_avatar, {vb:raw post.username}}" title="{vb:rawphrase xs_avatar, {vb:raw post.username}}" /> </td> <td style="background: url(images/post_scale_right.png) repeat-y top right" valign="bottom"> </td> </tr> <tr> <td><img src="images/post_footer_left.png"></td> <td style="background: url(images/post_footer_center.png) repeat-x top left"></td> <td><img src="images/post_footer_right.png"></td> </tr> </table>  </a> <vb:if condition="$post['rank']"> <span class="rank"><div class="post_field4">{vb:raw post.rank}</span></div> </vb:if> </vb:if> </div> <vb:if condition="$post['userid']"> <hr /> <dl class="userinfo_extra"> <div class="post_field"> <marquee loop="-1" scrollamount="1" direction="Right"> {vb:raw post.field5} </marquee> </div> <div class="post_field"><center>  <vb:if condition="$post['field6']"> <div class="eti_postbit">   <img src="images/mobile/{vb:raw post.field6}.png" alt="{vb:raw post.field6}" border="" /></div> </vb:if>  <center/></div> <div class="post_field"><center>  <vb:if condition="$post['field7']"> <div class="eti_postbit">   <img src="images/sim/{vb:raw post.field7}.gif" alt="{vb:raw post.field7}" border="" /></div> </vb:if>  <center/></div> <div class="post_field"><center>  <vb:if condition="$post['field10']"> <div class="eti_postbit">   <img src="images/anty/{vb:raw post.field10}.gif" alt="{vb:raw post.field10}" border="" /> <img src="images/sysamel/{vb:raw post.field11}.gif" alt="{vb:raw post.field11}" border="" /> <img src="images/morogar/{vb:raw post.field12}.gif" alt="{vb:raw post.field12}" border="" /></div> </vb:if>  <center/></div> <div class="post_field"><center>  <vb:if condition="$post['field8']"> <div class="eti_postbit">   <img src="images/jensiat/{vb:raw post.field8}.gif" alt="{vb:raw post.field8}" border="" /> <img src="images/mood/{vb:raw post.field9}.gif" alt="{vb:raw post.field9}" border="" /></div> </vb:if>  <center/></div> <div class="post_field"><center> <vb:if condition="$show['reputation']"> <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> </vb:if> <center/></div> <vb:if condition="$post['joindate']"><div class="post_field"><dt>{vb:rawphrase join_date}</dt> <dd>{vb:raw post.joindate}</dd></div></vb:if> <div class="post_field"><div class="postbit_div2"><dt>شماره عضويت</dt><dd>{vb:raw post.userid}</dd></div></div> <vb:if condition="$post['field2']"><div class="post_field"><dt>{vb:rawphrase location_perm}</dt> <dd>{vb:raw post.field2}</dd></div></vb:if> <vb:if condition="$post['age']"><div class="post_field"><dt>{vb:rawphrase age}</dt> <dd>{vb:raw post.age}</dd></div></vb:if> <div class="post_field"><div class="postbit_div2"><dt>پسند شده هاي دريافتي</dt><dd>{vb:raw post.vbseo_likes_in}</dd> <dt>پسند شده هاي ارسالي</dt><dd>{vb:raw post.vbseo_likes_out}</dd></div> </div> <div class="post_field"><dt>{vb:rawphrase 'posts'}</dt> <dd>{vb:raw post.posts}</dd></div> <div class="post_field"><div class="postbit_div2"><dt>ميانگين پست در روز</dt> <dd>{vb:raw post.postsperday}</dd></div> </div> {vb:raw template_hook.postbit_userinfo_right_after_posts}{vb:raw template_hook.postbit_userinfo_right} <br/> <center> {vb:raw post.icqicon} {vb:raw post.aimicon} {vb:raw post.msnicon} {vb:raw post.yahooicon} {vb:raw post.skypeicon} <center/> </dl> <vb:if condition="$show['infraction'] OR $show['reppower']"> <dl class="user_rep"> <vb:if condition="$show['infraction']"> <div class="post_field"><dt>{vb:rawphrase infractions}</dt> <dd>{vb:raw post.warnings}/{vb:raw post.infractions} ({vb:raw post.ipoints})</dd></div> </vb:if> <vb:if condition="$show['reputation']"> <vb:if condition="$show['reppower']"> <div class="post_field"><dt>{vb:rawphrase reppower}</dt> <dd>{vb:raw post.reppower}</dd></div> </vb:if> </vb:if> <vb:if condition="$show['reputation']"> <span class="postbit_reputation" id="repdisplay_{vb:raw post.postid}_{vb:raw post.userid}">{vb:raw post.reputationdisplay}</span> </vb:if> </dl> </vb:if> </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} <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" /> {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" /> {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" /> {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" /> {vb:rawphrase attachments_pending_approval}</legend> <ul> {vb:raw post.moderatedattachments} </ul> </fieldset> </vb:if> </div>  </vb:if> </div> </div> <vb:if condition="$show['postedited'] || $post['signature']"> <div class="after_content"> <vb:if condition="$show['postedited']">  <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>  </vb:if> {vb:raw template_hook.postbit_signature_start} {vb:raw ad_location.ad_showthread_firstpost_sig} <vb:if condition="$post['signature']"> <blockquote class="signature restore"><div class="signaturecontainer">{vb:raw post.signature}</div></blockquote> </vb:if> {vb:raw template_hook.postbit_signature_end} </div> </vb:if> <div class="cleardiv"></div> </div> </div> <div class="postfoot">  <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}"><img src="{vb:raw vboptions.cleargifurl}" id="editimg_{vb:raw post.postid}" alt="{vb:rawphrase edit_delete_message}" /> {vb:rawphrase edit_post}</a> <span class="seperator"> </span> </vb:if> <vb:if condition="$show['quickreply'] AND !$show['threadedmode']"> <a id="qr_{vb:raw post.postid}" class='quickreply' href="{vb:raw post.replylink}" rel="nofollow"><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"> </span> </vb:if> <vb:if condition="$post['replylink']"> <a id="qrwq_{vb:raw post.postid}" class="newreply" href="{vb:raw post.replylink}" rel="nofollow"><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"> </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}"><img id="mq_image_{vb:raw post.postid}" src="{vb:raw vboptions.cleargifurl}" alt="{vb:rawphrase multi_quote_this_message}" /> </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"> </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"> </span></vb:if> </vb:if> <vb:if condition="$show['reputationlink']"> <span class="reputationpopupmenu popupmenu popupcustom" title="{vb:raw post.postid}"><a class="popupctrl reputation" title="{vb:rawphrase reputation}" href="reputation.php?{vb:raw session.sessionurl}do=addreputation&p={vb:raw post.postid}" rel="nofollow" id="reputation_{vb:raw post.postid}"> </a></span> </vb:if> <vb:if condition="$show['infractionlink']"> <a class="infraction" href="infraction.php?{vb:raw session.sessionurl}do=report&p={vb:raw post.postid}" rel="nofollow" title="{vb:rawphrase add_infraction_for_x, {vb:raw post.username}}">  </a>   </vb:if> <vb:if condition="$show['reportlink']"> <a class="report" href="{vb:raw post.reportlink}" rel="nofollow" title="{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&p={vb:raw post.postid}" title="{vb:rawphrase manage}"> </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&p={vb:raw post.postid}" rel="nofollow" title="{vb:rawphrase received_infraction}">  </a> <vb:elseif condition="$show['yellowcard']" /> <a class="yellowcard" href="infraction.php?{vb:raw session.sessionurl}do=view&p={vb:raw post.postid}" rel="nofollow" title="{vb:rawphrase received_warning}">  </a> </vb:if> </span>  </div> </div> <hr /> </li> {vb:raw template_hook.postbit_end}