آموزش کادربندی پست بیت V3 قبلی وی بی ایران ( + css hover ) ( + چرخش لوگو )
امتیاز:

دومین پست بیت به مناسبت سال جدید ،
پست بیت استایل قبلی وی بی ایران می باشد. با عمومی شدن استایل توسط مدیریت کل سایت ، پس مشکلی برای این آموزش وجود ندارد.
به خاطر درخواست های زیاد این مدت دوستان ، آموزشش رو میذارم.
ابتدا به Additional.css بروید و کد های زیر را آخرش اضافه کنید.
حال به Postbit.css بروید و کد های زیر را آخرش اضافه کنید.کد:.post_field {background: #ffffff; /* Old browsers */ /* IE9 SVG, needs conditional override of '' to 'none' */ ; background: -moz-linear-gradient(top, #ffffff 0%, #f6f6f6 47%, #ededed 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(47%,#f6f6f6), color-stop(100%,#ededed)); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, #ffffff 0%,#f6f6f6 47%,#ededed 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, #ffffff 0%,#f6f6f6 47%,#ededed 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(top, #ffffff 0%,#f6f6f6 47%,#ededed 100%); /* IE10+ */ background: linear-gradient(top, #ffffff 0%,#f6f6f6 47%,#ededed 100%); /* W3C */ : progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#ededed',GradientType=0 ); /* IE6-8 */ border-top: 2px solid #42bc25; border-bottom: 2px solid #bc2525; border-left: 0px solid #dbe1e6; border-right: 0px solid #731a8b; margin: 0 0 2px 0; padding: 3px 5px 5px 1px; border-radius:6px; -moz-border-radius:6px; -webkit-border-radius:6px; text-shadow:#b2b2b2 0 0 7px; } .post_field strong { color:#3e3e3e; } .post_field dt { color:#3e3e3e; font-weight:400; } .postbit, .postbitlegacy, .eventbit { margin-bottom:0; }
برای تغییر لوگوی کنار پست بیت ، میتوانید آدرس زیر را عوض کنید.کد:.logo1 { position:relative; background: url(http://up.vbiran.ir/images/avfvrfx0x3lvv7xgxn13.png) no-repeat; -webkit-transition: all 0.8s linear; -moz-transition: all 2s linear; transition: all 2s linear; float:left; left:5px; width:20px; height:21px; top:-1.5px; opacity:0.1; -webkit-transform: rotate(20deg); -moz-transform: rotate(20deg); } .logo1:hover { position:relative; background: url(http://up.vbiran.ir/images/avfvrfx0x3lvv7xgxn13.png) no-repeat; -webkit-transform: rotate(360deg); -moz-transform: rotate(360deg); -webkit-transition: all 0.8s linear; -moz-transition: all 2s linear; transition: all 2s linear; float:left; left:5px; width:20px; height:21px; top:-1.5px; opacity:1; }
http://up.vbiran.ir/images/avfvrfx0x3lvv7xgxn13.png
در ادامه به 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']">, <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="logo1"></div><dt>{vb:rawphrase join_date}</dt> <dd>{vb:raw post.joindate}</dd></div></vb:if> <div class="post_field"><div class="logo1"></div><dt>شماره عضویت</dt><dd>{vb:raw post.userid}</dd></div> <div class="post_field"><div class="logo1"></div><dt>عنوان کاربر</dt> <dd>{vb:raw post.usertitle}</dd></div> <div class="post_field"><div class="logo1"></div><dt>میانگین پست در روز</dt> <dd>{vb:raw post.postsperday}</dd></div> <vb:if condition="$post['field2']"><div class="post_field"><div class="logo1"></div><dt>{vb:rawphrase location_perm}</dt> <dd>{vb:raw post.field2}</dd></div></vb:if> <vb:if condition="$post['age']"><div class="post_field"><div class="logo1"></div><dt>{vb:rawphrase age}</dt> <dd>{vb:raw post.age}</dd></div></vb:if> <div class="post_field"><div class="logo1"></div><dt>{vb:rawphrase posts}</dt> <dd>{vb:raw post.posts}</dd></div> {vb:raw template_hook.postbit_userinfo_right_after_posts} </dl> {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> </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" 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']"> <blockquote class="signature restore"><div class="signaturecontainer">{vb:raw post.signature}</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"> </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}&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"> </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"> </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}" /> </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" href="reputation.php?{vb:raw session.sessionurl}do=addreputation&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}" /> --> </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}}"><!-- <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']"> <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&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}"><!-- <img src="{vb:stylevar imgdir_button}/red-card_sm.png" alt="{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}"><!--<img src="{vb:stylevar imgdir_button}/yellow-card_sm.png" alt="{vb:rawphrase received_warning}" /> --> </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}
برای کادر بندی تعداد نوشته های وبلاگ به جستجوی قالب بروید و blog_postbit_entries_link را جستجو کنید و درون آن را با کد :
عوض کنید.کد:<div class="post_field"><div class="logo1"></div><dt>{vb:rawphrase blog_entries}</dt><dd><a href="{vb:link blog, {vb:raw post}, null, 'userid', 'blog_title'}">{vb:raw post.entries}</a></dd></div>
برای کادر بندی تشکر به جستجوی قالب بروید و post_thanks_postbit_info را جستجو کنید حالا محتویات آن را با :
کد:<vb:if condition="$post['userid']"> <div class="post_field"><div class="logo1"></div><dt>{vb:rawphrase post_thanks_thanks}</dt> <dd>{vb:raw post.post_thanks_user_amount_formatted}</dd></div> <vb:if condition="$post['post_thanks_thanked_times'] == 1"> <div class="post_field"><div class="logo1"></div><dd>{vb:rawphrase post_thanks_time_post}</dd></div> <vb:elseif condition="$post['post_thanks_thanked_posts'] == 1" /> <div class="post_field"><div class="logo1"></div><dd>{vb:rawphrase post_thanks_times_post, {vb:raw post.post_thanks_thanked_times_formatted}}</dd></div> <vb:else /> <div class="post_field"><div class="logo1"></div><dd>{vb:rawphrase post_thanks_times_posts, {vb:raw post.post_thanks_thanked_times_formatted}, {vb:raw post.post_thanks_thanked_posts_formatted}}</dd></div> </vb:if> </vb:if>
نکته : تنها تفاوت این پست بیت با پست بیت های دیگه در کادربندی اضافه شدن کلاس لوگو هست.
یعنی هر چیزی را خواستید کادر بندی کنید درون
قرار بدید..کد:<div class="post_field"><div class="logo1"></div><dt>هر متغیری </dd>
نکته 2 : این پست بیت به شکل وی بی ایران کادر بندی شده و فیلد های " میانگین پست در روز " " شماره عضویت " و "عنوان کاربر" به پست بیت اضافه شده اند.
اگر نیاز به تغییر داشتید در همین تاپیک مطرح کنید.
Dast-Yar
علاقه مندی ها (Bookmarks)