Chuyển thông tin thành viên từ bên trái lên đầu

Thảo luận trong 'Style & Template Questions' bắt đầu bởi sukoro, 18/3/15.

Trạng thái chủ đề:
Không mở trả lời sau này.
  1. sukoro

    sukoro Member

    Bài viết:
    57
    Likes :
    23
    Cho mình hỏi chút là làm cách nào chuyển thông tin thành viên trong bài viết từ bên trái lên trên đầu bài viết hoặc trả lời như vbulletin vậy các bạn?
     
    sukoro, 18/3/15
    #1
    Bài viết cũ hơn
    Bài viết mới hơn
    Đang tải...
    Recommended:X
  2. sukoro

    sukoro Member

    Bài viết:
    57
    Likes :
    23
    Bạn nào viết giúp mình với ........... demo
     

    Các file đính kèm:

    • demo.jpg
      demo.jpg
      Kích thước:
      92.2 KB
      Đọc:
      0
    sukoro, 18/3/15
    #2
  3. chansudoi

    chansudoi Member

    Bài viết:
    103
    Likes :
    25
    Đầu tiên bạn vào Appearance -> Template và tìm template message_user_info.css
    Thay toàn bộ template message_user_info.css bằng code sau :

    Mã:
    .messageUserInfo
{
@property "messageUserInfo";
margin-bottom: 20px;
@property "/messageUserInfo";
}

.messageUserBlock
{
@property "messageUserBlock";
background: @primaryLighterStill url('@imagePath/xenforo/gradients/tab-selected-light.png') repeat-x bottom;
border: 1px solid @primaryLighterStill;
border-radius: 5px;
height: 122px;
@property "/messageUserBlock";

position: relative;
}

.messageUserBlock div.avatarHolder
{
@property "messageAvatarHolder";
background-color: @primaryLightest;
padding: 10px;
margin-right: 15px;
border-radius: 4px;
float: left;
@property "/messageAvatarHolder";

position: relative;
}

.messageUserBlock div.avatarHolder .avatar
{
display: block;
font-size: 0;
}

.messageUserBlock div.avatarHolder .onlineMarker
{
position: absolute;
top: {xen:calc '@messageAvatarHolder.padding-top - 1'}px;
left: {xen:calc '@messageAvatarHolder.padding-right - 1'}px;

@property "messageOnlineMarker";
border: 7px solid transparent;
border-top-color: rgb(127, 185, 0);
border-left-color: rgb(127, 185, 0);
border-top-left-radius: 5px;
border-top-right-radius: 3px;
border-bottom-left-radius: 3px;
@property "/messageOnlineMarker";
}

.messageUserBlock h3.userText
{
@property "messageUserText";
padding: 6px;
@property "/messageUserText";
}

.messageUserBlock .userBanner:last-child
{
margin-bottom: 0;
}

.messageUserBlock a.username
{
@property "messageUsername";
font-weight: bold;
display: inline;
overflow: hidden;
line-height: 16px;
@property "/messageUsername";

}

.messageUserBlock .userTitle
{
@property "messageUserTitle";
font-size: 11px;
display: block;
@property "/messageUserTitle";
}

.messageUserBlock .extraUserInfo
{
@property "messageExtraUserInfo";
font-size: 10px;
background-color: @primaryLightest;
padding: 10px 10px 7px;
margin: -58px 0;
border-radius: 4px;
float: right;
height: 105px;
@property "/messageExtraUserInfo";
}

.messageUserBlock .extraUserInfo img
{
max-width: 100%;
}

.messageUserBlock .arrow
{
position: absolute;
top: 123px;
left: 10px;

display: block;
width: 0px;
height: 0px;
line-height: 0px;

border: 10px solid transparent;
border-top-color: @messageUserBlock.border-color;
-moz-border-top-colors: @messageUserBlock.border-color;

/* Hide from IE6 */
_display: none;
}

.messageUserBlock .arrow span
{
position: absolute;
top: -11px;
left: -10px;

display: block;
width: 0px;
height: 0px;
line-height: 0px;

border: 10px solid transparent;
border-top-color: @messageAvatarHolder.background-color;
-moz-border-top-colors: @messageAvatarHolder.background-color;
}

<xen:if is="@enableResponsive">
@media (max-width:@maxResponsiveNarrowWidth)
{
.Responsive .messageUserInfo
{
float: none;
width: auto;
}

.Responsive .messageUserBlock
{
margin-bottom: 5px;
position: relative;
height: 64px;
}

.Responsive .messageUserBlock div.avatarHolder
{
float: left;
padding: 5px;
}

.Responsive .messageUserBlock div.avatarHolder .avatar img
{
width: 48px;
height: 48px;
}

.Responsive .messageUserBlock div.avatarHolder .onlineMarker
{
top: 4px;
left: 4px;
border-width: 6px;
}

.Responsive .messageUserBlock h3.userText
{
margin-left: 64px;
}

.Responsive .messageUserBlock .userBanner
{
max-width: 150px;
margin-left: 0;
margin-right: 0;
border-top-left-radius: 3px;
border-top-right-radius: 3px;
position: static;
display: inline-block;
}

.Responsive .messageUserBlock .userBanner span
{
display: none;
}

.Responsive .messageUserBlock .extraUserInfo
{
display: none;
}

.Responsive .messageUserBlock .arrow
{
top: 65px;
}
}
</xen:if>
    Sau đó vào template EXTRA.css và thêm vào cuối đoạn css sau :

    Mã:
    .messageUserBlock .pairsJustified
{
line-height: inherit;
margin-top: -5px;
padding-bottom: 7px;
}

.message .messageInfo
{
margin: 0 !important;
}

.quickReply .messageUserBlock .arrow
{
top: 10px;
left: 123px;
border: 10px solid transparent;
border-left-color: @messageUserBlock.border-color;
-moz-border-left-colors: @messageUserBlock.border-color;
border-right: none;
}

.quickReply .messageUserBlock .arrow span
{
top: -10px;
left: -11px;
border: 10px solid transparent;
border-left-color: @messageAvatarHolder.background-color;
-moz-border-left-colors: @messageAvatarHolder.background-color;
border-right: none;
}

.quickReply .messageUserInfo
{
float: left !important;
}

.quickReply .messageUserBlock div.avatarHolder
{
margin-right: 0 !important;
}

.userBanner.wrapped span
{
display: none;
}

.userBanner.wrapped
{
border-radius: 3px !important;
}
    Tùy chỉnh css theo ý mình nha bạn.

    Chúc bạn thành công
     
    chansudoi, 18/3/15
    #3
    sukoro thích bài này.
  4. tinhbk

    tinhbk Moderator Staff Member

    Bài viết:
    148
    Likes :
    65
    Cái này hôm trước trên Diễn đàn có bài nhưng mà tìm mãi chả thấy.
    Mình tìm được bài của bác Dư này.

    1. Đầu tiên, các bạn add đoạn code sau đây vào template EXTRA.css nhé

    Mã:
    /*Display Postbit in first post*/
.firstPost .messageUserInfo {
float: none;
}
.firstPost .messageUserInfo .messageUserBlock .arrow {
display: none;
}
.firstPost .messageInfo {
margin-left: 5px !important;
margin-top: 10px;
}
.newIndicator {
display: none !important;
}
.firstPost .messageUserInfo {
width: 100% !important;
}
.firstPost .messageUserInfo .messageUserBlock .arrow {
display: none;
}
.firstPost .messageUserBlock {
-moz-border-bottom-colors: none !important;
-moz-border-image: none !important;
-moz-border-left-colors: none !important;
-moz-border-right-colors: none !important;
-moz-border-top-colors: none !important;
background: none repeat scroll 0 0 transparent !important;
border-color: -moz-use-text-color -moz-use-text-color #CDE5F0 !important;
border-style: none none dashed !important;
border-width: 0 0 1px !important;
height: 64px;
}
.firstPost .avatar .img {
margin-left: 0 !important;
}
.firstPost .avatarHolder {
padding: 0 !important;
position: absolute !important;
}
.firstPost .userText {
margin-left: 58px;
position: absolute !important;
top: 18px;
}
.firstPost .tt_share_page {
margin-left: 220px;
position: absolute;
top: 34px;
width: 420px;
}
.firstPost .shareControl {
float: right;
}
.firstPost .addthis {
padding-left: 20px;
}
.titleBar h1 {
font-size: 20pt !important;
}


    2.     Sau đó bạn tạo 1 template mới và đặt tên nó là message_user_info_firstpost

    Sau khi tạo xong template mới, các bạn add đoạn code này vào template này nhé!

    Mã:
    <xen:require css="message_user_info.css" />

<div class="messageUserInfo" itemscope="itemscope" itemtype="http://data-vocabulary.org/Person">
<div class="messageUserBlock">
<xen:hook name="message_user_info_avatar" params="{xen:array 'user={$user}', 'isQuickReply={$isQuickReply}'}">
<div class="avatarHolder">
<span class="helper"></span>
<xen:avatar user="$user" size="s"/>
<!-- slot: message_user_info_avatar -->
</div>
</xen:hook>

<xen:if is="!{$isQuickReply}">
<xen:hook name="message_user_info_text" params="{xen:array 'user={$user}', 'isQuickReply={$isQuickReply}'}">
<h3 class="userText">
<xen:username user="$user" itemprop="name" rich="true" />
<xen:if hascontent="true"><em class="userTitle" itemprop="title"><xen:contentcheck>{xen:helper userTitle, $user}</xen:contentcheck></em></xen:if>
<!-- slot: message_user_info_text -->
</h3>
</xen:hook>

</xen:if>
<span class="tt_share_page">
<div class="facebookLike shareControl">
<fb:like href="{$url}" layout="button_count" action="{$xenOptions.facebookLikeAction}" font="trebuchet ms" colorscheme="@fbColorScheme"></fb:like>
</div>
<div class="plusone shareControl">
<div class="g-plusone" data-size="medium" data-count="true" data-href="{$url}">
</div>
</span>
<span class="arrow"><span></span></span>
</div>
</div>


    3.     Cuối cùng là các bạn vào template message và tìm đúng đoạn code sau:

    Mã:
    <li id="{$messageId}" class="message {xen:if $message.isDeleted, 'deleted'} {xen:if '{$message.is_admin} OR {$message.is_moderator}', 'staff'} {xen:if $message.isIgnored, ignored}" data-author="{$message.username}">
<xen:include template="message_user_info">
<xen:map from="$message" to="$user" />
</xen:include>
    và thay nó bằng đoạn code này:

    Mã:
    <xen:if is="{$post.position} == 0 AND !{$message.conversation_id}">
<li id="{$messageId}" class="message firstPost {xen:if $message.isDeleted, 'deleted'} {xen:if '{$message.is_admin} OR {$message.is_moderator}', 'staff'} {xen:if $message.isIgnored, ignored}" data-author="{$message.username}">
<xen:include template="message_user_info_firstpost">
<xen:map from="$message" to="$user" />
</xen:include>
<xen:else />
<li id="{$messageId}" class="message {xen:if $message.isDeleted, 'deleted'} {xen:if '{$message.is_admin} OR {$message.is_moderator}', 'staff'} {xen:if $message.isIgnored, ignored}" data-author="{$message.username}">
<xen:include template="message_user_info">
<xen:map from="$message" to="$user" />
</xen:include>
</xen:if>
    Thế là xong rồi!

    Read more: http://forum.vietdesigner.net/threa...n-tren-xenforo-nam-ngang.40439/#ixzz3UjDebVjR
     
    tinhbk, 18/3/15
    #4
    sukoro thích bài này.
  5. sukoro

    sukoro Member

    Bài viết:
    57
    Likes :
    23
    Cảm ơn cậu nhưng cái thông tin nó ra vỡ tùm lum, làm sao để các thông tin nó đi theo sau avatar, vì khi chèn cái này vào avatar nó nằm ở trên 1 mình ngắm trăng còn mọi thông tin lại nằm ở dưới!
    demo nó nằm ở đây : thông tin của thành viên nó nằm hợp lý như vậy, nhờ cậu giúp mình với!
     

    Các file đính kèm:

    • demo.jpg
      demo.jpg
      Kích thước:
      24.8 KB
      Đọc:
      0
    sukoro, 18/3/15
    #5
  6. chansudoi

    chansudoi Member

    Bài viết:
    103
    Likes :
    25
    bạn đã làm theo đúng hướng dẫn chưa, làm xong demo mình xem nhé
     
    chansudoi, 18/3/15
    #6
  7. dung3d

    dung3d Moderator Staff Member

    Bài viết:
    141
    Likes :
    41
    Cái bạn đưa demo là giao diên nó hỗ trợ sẵn rồi. Mình đang sử dụng giao diện của bên đó :D. Vote bạn mua dùng cho phê :D hoặc là đợi các cao nhân khác. Vọc sâu quá vào giao diện thì mình chịu :-s
     
    dung3d, 18/3/15
    #7
  8. chansudoi

    chansudoi Member

    Bài viết:
    103
    Likes :
    25
    vâng, cái này tinh chỉnh trên giao diện mặc định nhé :D sẽ đúng 100%, vì mình áp dụng trên các style vẫn ok như thường. Còn giao diện này áp dụng không được thì cao thủ các giúp thôi. Em đầu hàng :D
     
    chansudoi, 18/3/15
    #8
  9. tinhbk

    tinhbk Moderator Staff Member

    Bài viết:
    148
    Likes :
    65
    Nói chung là các bạn dựa vào đó để tùy chỉnh phù hợp với template mình đang dùng thôi. Mỗi bạn 1 template mà bạn nào cũng nhờ thế này thì BQT không thể giúp đỡ được hết.

    Rất mong các bạn thông cảm.

    P/S: Mình sẽ đóng chủ đề này nhé, bạn gửi thông tin template thread_view và Demo của bạn qua tin nhắn cho mình mình sẽ giúp bạn.
     
    tinhbk, 19/3/15
    #9
    chansudoi thích bài này.
comments powered by Disqus
Trạng thái chủ đề:
Không mở trả lời sau này.

Chia sẻ trang này

Đang tải...