muabandalat
Private
- Tham gia
- 05/04/2020
- Bài viết
- 45
- Được Like
- 8
Demo : https://vatlieuxaydungso.com/forums/dang-tin-mua-ban-gach-lat-nen-va-op-tuong/
Chắc ai đó sẽ cần nên mình chia sẽ.
Bước 1:thay đổi: thread_list_item
HTML:
<xen:require css="discussion_list.css" />
<xen:if is="{$thread.isDeleted}"><xen:include template="thread_list_item_deleted" /><xen:else />
<li id="thread-{$thread.thread_id}" class="discussionListItem {$thread.discussion_state}{xen:if '!{$thread.discussion_open}', ' locked'}{xen:if {$thread.sticky}, ' sticky'}{xen:if {$thread.isNew}, ' unread'}{xen:if {$thread.prefix_id}, ' prefix{$thread.prefix_id}'}{xen:if {$thread.isIgnored}, ' ignored'} {xen:if $thread.thread_is_watched, threadWatched} {xen:if $thread.forum_is_watched, forumWatched}" data-author="{$thread.username}">
<div class="listBlock posterAvatar">
<span class="avatarContainer">
<xen:avatar user="$thread" size="s" img="true" />
<xen:if is="{$thread.user_post_count}"><xen:avatar user="$visitor" size="s" img="true" class="miniMe" title="{xen:phrase you_have_posted_x_messages_in_this_thread, 'count={xen:number $thread.user_post_count}'}" /></xen:if>
</span>
</div>
<div class="listBlock main">
<div class="titleText">
<h3 class="title">
<xen:if is="{$thread.canInlineMod}"><input type="checkbox" name="threads[]" value="{$thread.thread_id}" class="InlineModCheck" id="inlineModCheck-thread-{$thread.thread_id}" data-target="#thread-{$thread.thread_id}" title="{xen:phrase select_thread}: {$thread.title}" /></xen:if>
<xen:if is="{$showSubscribeOptions}"><input type="checkbox" name="thread_ids[]" value="{$thread.thread_id}" /></xen:if>
<xen:if is="{$thread.prefix_id}">
<xen:if is="{$linkPrefix}">
<a href="{xen:link forums, $forum, 'prefix_id={$thread.prefix_id}'}" class="prefixLink"
title="{xen:phrase show_only_threads_prefixed_by_x, 'prefix={xen:helper threadPrefix, $thread, plain, ""}'}">{xen:helper threadPrefix, $thread, html, ''}</a>
<xen:else />
{xen:helper threadPrefix, $thread}
</xen:if>
</xen:if>
<a href="{xen:link "threads{xen:if '{$thread.isNew} AND {$thread.haveReadData}', '/unread'}", $thread}"
title="{xen:if '{$thread.isNew} AND {$thread.haveReadData}', {xen:phrase go_to_first_unread_message}}"
class="{xen:if $thread.hasPreview, PreviewTooltip}"
data-previewUrl="{xen:if $thread.hasPreview, {xen:link threads/preview, $thread}}">{xen:helper wrap, $thread.title, 50}</a>
<xen:if is="{$thread.isNew}"><a href="{xen:link threads/unread, $thread}" class="unreadLink" title="{xen:phrase go_to_first_unread_message}"></a></xen:if>
</h3>
<div class="secondRow">
<div class="posterDate muted">
<div class="anh"><span class="avatarContainer"><a class="avatar Av1s miniMe" data-avatarhtml="true"><xen:avatar user="$thread" size="s" img="true" class="miniMe" />
</div></div>
<div id="xem1">
<xen:username user="$thread" style="color: #176093;font-weight: bold; " title="{xen:phrase thread_starter}" /></a>
<p>
<a{xen:if {$visitor.user_id}, ' href="{xen:link threads, $thread}"'} class="faint"><span style="color:x008000;"><xen:datetime time="$thread.post_date" title="{xen:if {$visitor.user_id}, '{xen:phrase go_to_first_message_in_thread}'}" /><span></a></span><xen:if is="{$showForumLink}"><span class="containerName">,
<a href="{xen:link forums, $thread.forum}" class="forumLink">{$thread.forum.title}</a></span></xen:if>
</p>
<xen:if is="{$showLastPageNumbers} AND {$thread.lastPageNumbers}">
<span class="itemPageNav">
<span>...</span>
<xen:foreach loop="$thread.lastPageNumbers" value="$pageNumber">
<a href="{xen:link threads, $thread, 'page={$pageNumber}'}">{$pageNumber}</a>
</xen:foreach>
</span>
</xen:if>
<xen:if hascontent="true">
<div class="iconKey">
<xen:contentcheck>
<xen:hook name="thread_list_item_icon_key" params="{xen:array 'thread={$thread}'}">
<xen:if is="{$thread.isModerated}"><span class="moderated" title="{xen:phrase moderated}">{xen:phrase moderated}</span></xen:if>
<xen:if is="!{$thread.discussion_open}"><span class="locked" title="{xen:phrase locked}">{xen:phrase locked}</span></xen:if>
<xen:if is="{$thread.sticky}"><span class="sticky" title="{xen:phrase sticky}">{xen:phrase sticky}</span></xen:if>
<xen:if is="{$thread.isRedirect}"><span class="redirect" title="{xen:phrase redirect}">{xen:phrase redirect}</span></xen:if>
<xen:if is="{$thread.thread_is_watched} OR {$thread.forum_is_watched}"><span class="watched" title="{xen:phrase watched}">{xen:phrase watched}</span></xen:if>
</xen:hook>
</xen:contentcheck>
</div>
</xen:if>
<div class="controls faint">
<xen:if is="{$thread.canEditThread}"><a href="javascript:" data-href="{xen:link 'threads/list-item-edit', $thread, 'showForumLink={$showForumLink}'}" class="EditControl JsOnly">{xen:phrase edit}</a></xen:if>
<xen:if is="{$showSubscribeOptions} AND {$thread.email_subscribe}">{xen:phrase email}</xen:if>
</div>
</div>
<div style="width: 100%;
background: #65a5d1;
padding: 5px;
text-align: center;color:xfff" >
Bình Luận: {xen:if $thread.isRedirect, '–', {xen:number $thread.reply_count}} -
Xem: {xen:if $thread.isRedirect, '–', {xen:number $thread.view_count}}
</div>
</div>
</div>
</div>
</li>
</xen:if>Bước 2:
CSS:
#xem1{ padding-top: 5px;;height:40px;overflow: hidden;}
.stickySeparator {
height: 10px;
background-color: #ccc;
border-style:solid;
border-color: #ededed;
border-top-style: none;
border-left-style: none;
border-right-style: none;
padding: 0px;
margin: 0px;
width:98%
}
.anh .miniMe img {
padding: 1px;
border: 1px none black;
border-radius: 2px;
box-shadow: 1px 1px 5px rgba(0,0,0, 0.5);
width: 20px;
height: 20px;border-radius:50%; margin-right: 10px;
}
.discussionListItem .main, .discussionListItem .lastPost {
float: left;
}
.discussionList
{
position: relative;
zoom: 1;
}
.discussionListItem {
background-color: #ffffff;
border: 1px solid #ccc;
width: 15.6%;
margin: 5px;margin-bottom: 20px;
float: left;
}
/** column style and width **/
.discussionList .sectionHeaders,
.discussionListItem
{
word-wrap: normal;
}
.discussionList .sectionHeaders dt,
.discussionList .sectionHeaders dd,
.discussionListItem .listBlock
{
margin: auto;
}
.discussionList .posterAvatar
{
width: @discussionListAvatarWidth;
}
.discussionList .main
{
width:100%
}
.discussionList .sectionHeaders .main .postDate
{
text-align: right;
}
.discussionList .stats
{
width: @discussionListStatsWidth;
}
.discussionList .sectionHeaders .stats .minor
{
text-align: right;
}
.discussionList .lastPost
{
width: @discussionListLastPostWidth;
text-align: right;
overflow: hidden;
}
.discussionList .statsLastPost /* combined last two columns */
{
width: {xen:calc '@discussionListStatsWidth + @discussionListLastPostWidth'}px;
}
/* column headers */
.discussionList .sectionHeaders
{
@property "subHeading";
font-size: 11px;
color: @secondaryDarker;
background: @secondaryLighter url('@imagePath/xenforo/gradients/category-23px-light.png') repeat-x top;
padding: 5px 10px;
margin: 3px auto 0;
border-top: 1px solid @secondaryLighter;
border-bottom: 1px solid @secondaryLight;
@property "/subHeading";
padding: 0;display:none
}
.discussionList .sectionHeaders dt span
{
display: none !important;
}
.discussionList .sectionHeaders a
{
display: block;
color: @subHeading.color;
outline: none;
}
.discussionList .sectionHeaders a:hover
{
text-decoration: none;
}
.discussionList .sectionHeaders dd a[href]:hover
{
@property "subHeadingHover";
text-decoration: none;
background-color: @secondaryLightest;
@property "/subHeadingHover";
}
.discussionList .sectionHeaders .main a,
.discussionList .sectionHeaders .stats a
{
float: left;
width: 50%;
white-space: nowrap;
}
.discussionList .sectionHeaders a span
{
@property "subHeading.padding";
padding: 5px 10px;
@property "/subHeading.padding";
display: block;
}
/** IE <8 **/
.discussionList .sectionHeaders,
.discussionListItem { *display: block; _vertical-align: bottom; }
.discussionList .sectionHeaders dt,
.discussionList .sectionHeaders dd,
.discussionListItem .listBlock { *display: block; *float: left; }
.discussionListItem .listBlock { _height: 52px; *min-height: 52px; } /* todo: should be calculation */
.discussionList .posterAvatar { *width: 6.98%; }
.discussionListItem .posterAvatar { *font-size: 0; }
.discussionList .main { *width: 56.98%; }
.discussionList .stats { *width: 15.97%; }
.discussionList .lastPost { *width: 19.97%; }
.discussionList .statsLastPost { *width: 35.97%; }
.discussionList .sectionHeaders dt,
.discussionList .sectionHeaders dd { *padding: 5px 0; }
.discussionList .sectionHeaders a,
.discussionList .sectionHeaders a span { *display: inline !important; *float: none !important; }
/* items in thread list */
.discussionListItems
{
}
/* individual thread list item */
/** main **/
.discussionListItem
{
@property "primaryContent.background";
background-color: @contentBackground;
@property "/primaryContent.background";
@property "primaryContent.border";
@property "/primaryContent.border";
}
/* sections, section widths */
.discussionListItem .posterAvatar,
.discussionListItem .stats
{
@property "secondaryContent.background";
background: @primaryLightest url('@imagePath/xenforo/gradients/category-23px-light.png') repeat-x top;
@property "/secondaryContent.background";
}
.discussionListItem .main,
.discussionListItem .lastPost
{
}
/* avatar section */
.discussionListItem .posterAvatar .avatarContainer
{
display: block;
position: relative;
}
.discussionListItem .posterAvatar .avatar
{
@property "discussionListAvatar";
padding: 5px;
display: block;
width: 36px;
height: 36px;
@property "/discussionListAvatar";
width: auto;
height: auto;
}
.discussionListItem .posterAvatar .avatar img
{
width: @discussionListAvatar.width;
height: @discussionListAvatar.height;
display: block;
}
.discussionListItem .posterAvatar .miniMe
{
@property "discussionListMiniMe";
padding: 0;
position: absolute;
bottom: 1px;
left: 29px;
z-index: 10;
@property "/discussionListMiniMe";
}
.discussionListItem .posterAvatar .miniMe img
{
@property "discussionListMiniMeImg";
padding: 1px;
border: 1px none black;
border-radius: 2px;
box-shadow: 1px 1px 5px rgba(0,0,0, 0.5);
width: 20px;
height: 20px;
@property "/discussionListMiniMeImg";
}
/* title, poster section */
.discussionListItem .titleText
{
overflow: hidden; zoom: 1;width:100%;
position: relative;
}
/* unread indicator */
.LoggedIn .discussionListItem .titleText
{
}
.LoggedIn .discussionListItem .unreadLink,
.LoggedIn .discussionListItem .ReadToggle
{
display: block;
width: 10px;
height: 10px;
position: absolute;
left: 5px;
top: 10px;
background: url('@imagePath/xenforo/xenforo-ui-sprite.png') no-repeat 10000px 0;
white-space: nowrap;
overflow: hidden;
text-indent: 9999px;
}
.LoggedIn .discussionListItem .unreadLink,
.LoggedIn .discussionListItem.unread .ReadToggle
{
background-position: -5px -42px;
}
.LoggedIn .discussionListItem .ReadToggle:hover
{
background-position: -25px -42px;
}
/* first row */
.discussionListItem .title {font-size: 13px;
line-height: 18px;
@property "/discussionListFirstRow";
width: 95%;
word-wrap: break-word;height: 35px; padding:5px;
overflow: hidden;
}
.discussionListItems .unread .title a
{
@property "discussionListTitleUnread";
font-weight: bold;
/*padding-right: 18px;
background: transparent url('@imagePath/xenforo/widgets/discussion-new.png') no-repeat right center;*/
@property "/discussionListTitleUnread";
}
.discussionListItem .iconKey span
{
@property "dicussionListIcon";
margin-left: 5px;
text-indent: -10000em;
float: right;
background: transparent url('@imagePath/xenforo/xenforo-ui-sprite.png') no-repeat 10000px 0;
width: 16px;
height: 16px;
@property "/dicussionListIcon";
}
.discussionListItem .iconKey .sticky { background-position: 0px -16px; }
.discussionListItem .iconKey .starred { background-position: -90px -32px; width: 18px; height: 18px; }
.discussionListItem .iconKey .watched { background-position: -144px -16px; width: 16px; height: 16px; }
.discussionListItem .iconKey .locked { background-position: -16px -16px; }
.discussionListItem .iconKey .moderated { background-position: -32px -16px; }
.discussionListItem .iconKey .redirect { background-position: -48px -16px; }
.discussionListItem .iconKey .new { background-position: -64px -16px; }
/* second row */
.discussionListItem .secondRow
{
@property "discussionListSecondRow";
font-size: 11px;
@property "/discussionListSecondRow";
clear: both;;background: #f0f7fc;
}
.discussionListItem .secondRow .controls
{
float: right;
padding-left: 20px;
}
.discussionListItem.AjaxProgress .controls
{
background: transparent url('@imagePath/xenforo/widgets/ajaxload.info_B4B4DC_facebook.gif') no-repeat left center;
}
.discussionListItem .posterDate
{
float: left;padding:5px
}
/* stats section */
.discussionListItem .stats dl
{
padding: 0 10px;
border-left: 1px solid @primaryLighterStill;
border-right: 1px solid @primaryLighterStill;
}
.discussionListItem .stats .major
{
@property "discussionListFirstRow";
font-size: 11pt;
line-height: 18px;
@property "/discussionListFirstRow";
margin-top: 5px;
}
.discussionListItem .stats .minor
{
@property "discussionListSecondRow";
font-size: 11px;
@property "/discussionListSecondRow";
margin-bottom: 5px;
}
/* last post section */
.discussionListItem .lastPostInfo
{
padding: 5px;
}
.discussionListItem .lastPostInfo .username
{
@property "discussionListFirstRow";
font-size: 11pt;
line-height: 18px;
@property "/discussionListFirstRow";
}
.discussionListItems .unread .lastPostInfo .username
{
@property "discussionListTitleUnread";
font-weight: bold;
/*padding-right: 18px;
background: transparent url('@imagePath/xenforo/widgets/discussion-new.png') no-repeat right center;*/
@property "/discussionListTitleUnread";
}
.discussionListItem .lastPostInfo .dateTime
{
@property "discussionListSecondRow";
font-size: 11px;
@property "/discussionListSecondRow";
}
/* extra note row */
.discussionListItem .noteRow
{
@property "primaryContent.background";
background-color: @contentBackground;
@property "/primaryContent.background";
padding: 5px;
text-align: center;
font-size: 11px;
color: @primaryMedium;
}
.discussionListItem .noteRow.secondary
{
@property "secondaryContent.background";
background: @primaryLightest url('@imagePath/xenforo/gradients/category-23px-light.png') repeat-x top;
@property "/secondaryContent.background";
}
/* deleted item */
.discussionList .discussionListItem.deleted
{
}
.discussionList .discussionListItem.deleted .avatar img
{
opacity: 0.5;
filter: alpha(opacity='50');
}
.discussionList .discussionListItem.deleted .deletionNote
{
float: left;
color: rgb(150,0,0);
}
/* moderated item */
.discussionList .discussionListItem.moderated .listBlock
{
@property "primaryContent.background";
background-color: @contentBackground;
@property "/primaryContent.background";
}
/* inline mod selected/checked classes */
.discussionListItem.InlineModChecked,
.discussionListItem.InlineModChecked .posterAvatar,
.discussionListItem.InlineModChecked .main,
.discussionListItem.InlineModChecked .stats,
.discussionListItem.InlineModChecked .lastPost,
.discussionListItem.deleted.InlineModChecked,
.discussionListItem.moderated.InlineModChecked
{
@property "inlineModChecked";
background: @inlineMod url('@imagePath/xenforo/gradients/category-23px-light.png') repeat-x top;
@property "/inlineModChecked";
}
/** bottom summary **/
.discussionList .sectionFooter
{
overflow: hidden; zoom: 1;width:98%
}
.discussionList .sectionFooter .contentSummary
{
float: left;
display: block;
}
/** thread list options **/
.DiscussionListOptions
{
@property "discussionListOptions";
margin: 10px auto;
border: 1px solid @primaryLighter;
border-radius: 5px;
line-height: 20px;
overflow: hidden;
zoom: 1;
@property "/discussionListOptions";
}
.hasJs .DiscussionListOptions
{
display: none;
}
.DiscussionListOptions dl,
.DiscussionListOptions .controlGroup
{
float: left;
margin-right: 10px;
overflow: hidden; zoom: 1;
}
.DiscussionListOptions dt
{
float: left;
}
.DiscussionListOptions dd
{
margin-left: 120px;
}
.DiscussionListOptions .buttonGroup
{
float: right;
}
.DiscussionListOptions .buttonGroup input
{
min-width: 75px;
}
#DiscussionListOptionsHandle
{
@property "discussionListOptionsHandle";
position: absolute;
bottom: -17px;
line-height: 16px;
text-align: center;
right: 50%;
white-space: nowrap;
@property "/discussionListOptionsHandle";
}
#DiscussionListOptionsHandle a
{
@property "discussionListOptionsHandleLink";
font-size: 11px;
color: @primaryLighter;
background-color: @sectionMain.background-color;
padding: 0 20px;
margin: 0 auto;
border: 1px solid @primaryLighter;
border-top: 1px none black;
border-bottom-right-radius: 10px;
border-bottom-left-radius: 10px;
display: inline-block;
outline: 0;
position: relative;
right: -50%;
@property "/discussionListOptionsHandleLink";
}
.afterDiscussionListHandle
{
margin-top: 20px;
}
/** item page nav **/
.discussionListItem .itemPageNav
{
{xen:if '@discussionListPageNavHidden', 'visibility: hidden;'}
}
.discussionListItem:hover .itemPageNav,
.Touch .discussionListItem .itemPageNav
{
visibility: visible;
}
.itemPageNav a,
.itemPageNav span
{
@property "discussionListItemPageNavItem";
font-size: 9px;
padding: 0 3px;
border-radius: 3px;
display: inline-block;
text-align: center;
@property "/discussionListItemPageNavItem";
}
body .itemPageNav a
{
@property "discussionListItemPageNavLink";
color: @secondaryDark;
background: @secondaryLightest url('@imagePath/xenforo/gradients/category-23px-light.png') repeat-x;
margin: -1px 0;
border: 1px solid @secondaryLighter;
@property "/discussionListItemPageNavLink";
}
body .itemPageNav a:hover
{
@property "discussionListItemPageNavLinkHover";
color: @secondaryDark;
text-decoration: none;
background-color: @secondaryLighter;
border-color: @secondaryLight;
@property "/discussionListItemPageNavLinkHover";
}
/** filters **/
.discussionListFilters
{
font-size: 11px;
overflow: hidden; zoom: 1;
}
.discussionListFilters .filtersHeading
{
float: left;
margin-right: 5px;
color: @primaryLight;
font-weight: bold;
}
.discussionListFilters .removeFilter,
.discussionListFilters .removeAllFilters
{
color: @primaryMedium;
background: @primaryLighterStill url('@imagePath/xenforo/gradients/form-button-white-25px.png') repeat-x top;
border: 1px solid @primaryLighterStill;
border-radius: 5px;
padding: 2px 10px;
}
.discussionListFilters .gadget
{
color: @primaryLight;
font-weight: bold;
margin-left: 3px;
}
.discussionListFilters .removeFilter:hover,
.discussionListFilters .removeAllFilters:hover
{
background-color: @primaryLightest;
text-decoration: none;
color: @mutedTextColor;
box-shadow: 1px 1px 5px rgba(0,0,0, 0.15);
}
.discussionListFilters .pairsInline dt
{
display: none;
}
.discussionListFilters .filterPairs
{
float: left;
}
.discussionListFilters .removeAll
{
float: right;
}
.discussionListFilters .removeAllFilters
{
padding: 2px 6px;
}
<xen:if is="@enableResponsive">
@media (max-width:@maxResponsiveMediumWidth)
{
.Responsive .discussionList .sectionHeaders .stats
{
display: none;
}
.Responsive .discussionList .sectionHeaders .main .title
{
float: none;
width: auto;
}
.Responsive .discussionList .sectionHeaders .main .postDate
{
display: none;
}
.Responsive .discussionList .statsLastPost
{
display: none;
}
.Responsive .discussionListItem .listBlock.main,
.Responsive .discussionListItem .listBlock.stats,
.Responsive .discussionListItem .listBlock.lastPost
{
display: block;
}
.Responsive .discussionListItem .listBlock.stats
{
float: left;
width: auto;
margin-top: -5px;
border: none;
background: none;
padding-left: 5px;
}
.Responsive.LoggedIn .discussionListItem .listBlock.stats
{
padding-left: 20px;
}
.Responsive .discussionListItem .listBlock.stats dl
{
border: none;
padding: 0;
}
.Responsive .discussionListItem .listBlock.stats dd,
.Responsive .discussionListItem .listBlock.stats dt
{
float: none;
display: inline;
}
.Responsive .discussionListItem .listBlock.stats .minor
{
display: none;
}
.Responsive .discussionListItem .listBlock.stats .major
{
font-size: 11px;
margin-top: 0;
}
.Responsive .discussionListItem .listBlock.lastPost
{
float: right;
width: auto;
margin-top: -5px;
}
.Responsive .discussionListItem .listBlock.lastPost .lastPostInfo
{
padding-top: 0;
padding-bottom: 0;
}
.Responsive .discussionListItem .listBlock.lastPost dt
{
display: none;
}
}
@media (max-width:@maxResponsiveWideWidth)
{
.Responsive .discussionList .sectionHeaders .lastPost,
.Responsive .discussionList .lastPost
{
width: 125px;
}
.discussionListItem{width:46%;float:left}
}
@media (max-width:@maxResponsiveNarrowWidth)
{
.Responsive .discussionListItem .secondRow .startDate,
.Responsive .discussionListItem .secondRow .EditControl
{
display: none;
}
.discussionListItem{width:46%; float:left}
}
</xen:if>
Sửa lần cuối bởi điều hành viên:
Bài viết liên quan
Được quan tâm
Bài viết mới
) để e thử
