[TUTs] UserAction nhóm gọn công cụ người dùng

  Bài viết hay nhất1

UserAction nhóm gọn công cụ người dùng


Giới thiệu

Các công cụ người dùng, mặc định được trình bày dàn trải, hướng dẫn này sẽ làm cho nó một giao diện gọn và đẹp hơn.


Demo


Công cụ người dùng mặc định


Công cụ người dùng đã chỉnh sửa


Công cụ trong bài viết


Công cụ trong bài viết với Action


Hướng dẫn


Thêm vào CSS của diễn đàn:
ACP >> Display >> Pictures and Colors >> Colors >> CSS Stylesheet

Code:
/* User action */
#pun-visit ul,.main-box ul{position:relative;width:16px;height:16px;background:url(http://i56.servimg.com/u/f56/18/59/49/93/align_10.png) no-repeat center transparent;z-index:20}
#pun-visit ul:hover{margin-top:-.7em;margin-right:-1.1em}
.main-box ul:hover{margin-top:-.65em;margin-left:-1.05em}
#pun-visit li,.main-box li{display:none;width:230px;background:#FFF;border-color:transparent #888 #999;border-style:solid;border-width:0 2px;margin:0}
#pun-visit li:first-child,.main-box li:first-child{border-top:2px solid #999}
#pun-visit li:last-child,.main-box li:last-child{border-bottom:2px solid #999}
.main-box li{margin-left:0;float:left;text-align:left;width:170px}
#pun-visit ul:hover li,.main-box ul:hover li{display:block}
#pun-visit li:hover,.main-box li:hover{background:#F2F2F2}
#plus_menu{left:auto!important;right:60px!important;top:-8px;border:2px solid #999;width:260px!important;background:#FFF}
#plus_menu .title-overview{display:none}
#plus_menu .left-overview{padding:0}
#pun-visit ul a,.main-box ul a{display:block;height:30px;line-height:30px;padding:0 10px}
#pun-visit ul a:hover,.main-box ul a:hover{background:#f2f2f2}
.dashed{border-top:1px dashed silver;margin:5px 0}
#pun-visit br{display:none}


Phiên bản áp dụng

PunBB


Nguồn

Zzbaivong (devs.forumvi.com)
  Bài viết hay nhất2
trong view của mình có cái action đó, nhưng lại ko xuất hiện
link: http://roseila.forumvi.com/
nick test: motsach
pass: motsach2k
  Bài viết hay nhất3
View của bạn đã bị thay đổi rồi thì sao mà chạy?
  Bài viết hay nhất4
vậy làm sao để chạy hử bạn
  Bài viết hay nhất5
vào xem cái template mặc định rồi kiếm <div id="pun-visit"></div> (đoạn sau bạn tự tìm dựa trên CSS nhé) rồi copy, paste vào nơi nào bạn muốn trong view
  Bài viết hay nhất6
phần code của mình trong view nè, nó có sẵn trong đó lun r á, mà vẫn ko hiện
Code:
<!-- BEGIN switch_user_logged_in -->
<div id="pun-visit" class="clearfix">
   <ul>
      <!-- BEGIN switch_plus_menu -->
      <li>
         <script type="text/javascript">//<![CDATA[
            var url_favourite = '{switch_user_logged_in.U_FAVOURITE_JS_PLUS_MENU}';
            var url_newposts = '{U_NEWPOSTS_JS_PLUS_MENU}';
            var url_egosearch = '{U_EGOSEARCH_JS_PLUS_MENU}';
            var url_unanswered = '{U_UNANSWERED_JS_PLUS_MENU}';
            var url_watchsearch = '{U_WATCHSEARCH_JS_PLUS_MENU}';
            var url_tellfriend = '{U_TELLFRIEND_JS_PLUS_MENU}';
            insert_plus_menu_new('f{FORUM_ID}&amp;t={TOPIC_ID}','{JS_SESSION_ID}', {JS_AUTH_FAVOURITES});
         //]]>
         </script>
      </li>
      <!-- END switch_plus_menu -->
      <li><a class="addthis_button" href="http://www.addthis.com/bookmark.php?v=250&amp;pub=forumotion">{L_SHARE}</a></li>
      <li><a href="{U_SEARCH_NEW}">{L_SEARCH_NEW}</a></li>
      <li><a href="{U_SEARCH_SELF}">{L_SEARCH_SELF}</a></li>
      <!-- BEGIN watchtopic -->
      <li>{S_WATCH_TOPIC}</li>
      <!-- END watchtopic -->
   </ul>
   <p>{LOGGED_AS}. {LAST_VISIT_DATE}</p>
</div>
<!-- END switch_user_logged_in -->
  Bài viết hay nhất7
có sẵn nhưng bài viết của anh Vóng là dành cho view mặc định nhé bạn
  Bài viết hay nhất8
trong css của bạn, dòng 117, tìm :
Code:
#pun-visit, .main-box {
    display: none;
}
thay chữ none thành block (hoặc xoá nó luôn cũng đc)
rồi add css của baivong vào
  Bài viết hay nhất9
bác @anhoang_qn kiếm ra luôn, em kiếm không ra cái đoạn đó mà bác kiếm ra được, bái sư
You cannot reply to topics in this forum