hardcore
Sergeant
- Tham gia
- 02/04/2015
- Bài viết
- 431
- Được Like
- 374
Chào các bác, lâu rồi em mới viết bài mong các bác ủng hộ. Hôm nay, em xin share cái portal 2 của DesignerVN.Net như nhiều bác yêu cầu. Không dài dòng nữa, vào vấn đề luôn.
- Yêu cầu
- Addon [8WR] XenPorta 2 (Portal) Pro
- Thay toàn bộ template EWRporta2.css bằng code sau:
Mã:.xenForm .textHeading .selectAll { float: right } .xenForm .categoryUnit li { display: inline-block; width: 185px } .xenForm .categoryUnit dd { padding-right: 0px } .authorUnit {} .authorUnit .authorImage .img { display: block; float: left; width: 150px; height: 200px } .authorUnit .secondaryContent { margin-left: 160px } .authorUnit .secondaryContent .name { font-size: 28px } .authorUnit .secondaryContent .muted { margin-bottom: 15px } .authorUnit .secondaryContent .controls { float: right; margin-right: 10px } .authorUnit .secondaryContent .avatar { float: right } .authorUnit { zoom: 1 } .authorUnit:after { content: '.'; display: block; height: 0; clear: both; visibility: hidden } .keyIcon { background-image: url('styles/default/xenforo/xenforo-ui-sprite.png'); background-repeat: no-repeat; margin: 0 4px 0 0; float: left; width: 16px; height: 16px } .keyIcon.category { background-position: 0px 1px; margin-top: 3px; width: 14px } .keyIcon.comments { background-position: -65px -16px; width: 14px } .keyIcon.redirect { background-position: -48px -16px; margin-top: 3px } .keyIcon.sticky { background-position: 0px -16px } .keyIcon.views { background-position: -144px -17px; width: 18px } .xenForm .date { background-image: url("styles/8wayrun/calendar.png"); background-position: right center; background-repeat: no-repeat } .copyright { text-align: center; font-size: 11px; margin: 10px; clear: both } - Thay toàn bộ template EWRporta2_ArticleList.css bằng code sau:
Mã:.articleItem {} .articleItem .subHeading { font-size: 18px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis } .articleItem .metaData { padding-bottom: 5px; margin-bottom: 10px; border-bottom: 1px dashed rgb(236, 236, 236); white-space: nowrap; overflow: hidden; text-overflow: ellipsis } .articleItem .metaData .statData { margin-left: 10px; float: right } .articleItem .excerptContent {} .articleItem .sectionFooter {} .articleItem .sectionFooter .continue { float: right } .articleItem .sectionFooter .categories { overflow: hidden } .articleItem .sectionFooter .categories li { display: inline-block } .articleItem .primaryContent { zoom: 1; background-color: white } .articleItem .primaryContent:after { content: '.'; display: block; height: 0; clear: both; visibility: hidden } .articleItem .sectionFooter { zoom: 1 } .articleItem .sectionFooter:after { content: '.'; display: block; height: 0; clear: both; visibility: hidden } .articleItem .dateBlock { margin: 10px 10px 0px -20px; text-align: center; float: left; position: relative; z-index: 100 } .articleItem .dateBlock .heading { padding-bottom: 5px; margin: 0; text-transform: uppercase } .articleItem .dateBlock .secondaryContent { font-weight: bold; font-size: 24px; padding: 5px } .articleItem .excerptOffset { margin-left: 32px } .articleItem .headerBlock a { display: block; background-size: 100%; line-height: 0 } @media screen and (max-width:900px) { .articleItem .headerBlock a img { max-width: 100%; -webkit-transform: none; -ms-transform: none; transform: none } } .articleItem img { min-height: 120px } .articleItem .headerBlock a img del { max-width: 100%; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); -webkit-transform: translate(0%, -25%); -ms-transform: translate(0%, -25%); -webkit-transform: translate(0%, -25%); -ms-transform: translate(0%, -25%); transform: translate(0%, -25%) } } .articleItem .messageUserBlock { margin-left: 10px; float: right } .articleItem .messageUserBlock a { background-size: 100%; display: block; line-height: 0 } .articleItem .messageUserBlock a img { max-width: 200px; height: auto } .ArticlesMason.articlesGrid { margin: 5px -5px -5px } .ArticlesMason.articlesGrid .articleItem { display: inline-block; vertical-align: top; width: 50% } .ArticlesMason.articlesGrid .articleItem .sectionMain { margin: 5px } @media (max-width:800px) { .Responsive .ArticlesMason.articlesGrid .articleItem {} } @media (max-width:610px) { .Responsive .ArticlesMason.articlesGrid .articleItem { width: 100% } } @media (max-width:480px) { .Responsive .ArticlesMason.articlesGrid .articleItem {} } .articleControl { display: none; font-size: 10px; text-align: center; position: fixed; right: 10px; bottom: 0; z-index: 1000 } .articleControl .resume { display: none } .articleControl .resume .muted { margin-bottom: 5px } #infscr-loading { background-color: rgb(255, 255, 255); padding: 10px; margin: 10px auto; border: 1px solid rgb(3, 124, 83); border-radius: 10px; position: fixed; right: 10px; bottom: 0; z-index: 1001; text-align: center } @media (max-width:480px) { .Responsive .articlesGrid .articleItem .messageUserBlock { display: inline-block; float: none; margin-bottom: 10px; white-space: nowrap } } .articleItem .textEWR { padding: 10px; } .articleItem h6 { font-size: .75rem; line-height: 18px; margin: 0 0 3px; text-transform: uppercase; } @media (max-width: 800px) { .articleItem .headerBlock a img { width: 100% !important; height: auto !important; } } @media (max-width: 610px) { .articleItem .headerBlock a img { width: 100% !important; height: auto !important; } .articleItem .textEWR { display: none; } .articleItem h3 { margin-bottom: 10px !important; } .articleItem .prefix { display: none; } } .articleItem .headerBlock a img { width: 100% !important; height: auto !important; } @media (min-width: 768px) { .articleItem img { min-height: 250px; } } .articleItem h3 { font-family: 'Roboto', sans-serif; font-size: 20px; font-size: 1.25rem; overflow: hidden; line-height: 1.3; font-weight: 300; margin-bottom: 10px; } .articleItem h3 a { color: #454545; } .articleItem .primaryContent { padding: 10px 15px 10px 15px; height: auto; border-bottom: none !important; } .articleItem .sectionFooter { padding: 0; } .articleItem .sectionFooter .button { font-size: 11px; line-height: 23px; padding: 0px 6px; height: 23px; display: block; border-radius: 0px; } @media screen and (max-width: 900px) { .headerBlock { position: relative; color: #fff; overflow: hidden; position: relative; } } .headerBlock { position: relative; color: #fff; overflow: hidden; position: relative; } .headerBlock .post-meta-info { position: absolute; width: 100%; left: 0px; bottom: 0px; background: linear-gradient( 0deg, rgba(0, 0, 0, 0.55) 10%, rgba(0, 0, 0, 0) 90% ); font-size: 20px; color: #fff; } .headerBlock .post-meta-date { padding: 5px 20px; } .headerBlock .post-meta-date .counter { margin-left: 10px; line-height: 1 !important; } .articleItem .keyIcon { display: none; } .articleItem .sectionFooter { background: none; border: none } .articleItem .textEWR { padding: 5px } .categories li { display: inline-block } .categories > li > a { line-height: 2!important } - Thay toàn bộ template EWRporta2_ArticleList_Bit bằng code sau:
Mã:<xen:require css="EWRporta2_ArticleList.css" /> <div class="articleItem" id="article_{$article.thread_id}"> <xen:if hascontent="true"> <div class="headerBlock"> <xen:contentcheck> <xen:if is="{$article.article_icon.type} == 'attach'"> <a class="attachHolder" href="{xen:link threads, $article}"><img src="//imagizer.imageshack.us/a/img924/3151/lXCkG6.png" style="background: transparent url('{xen:link attachments, $article.article_icon.data}'); background-position: center center; background-size: cover" alt="{$article.article_icon.data.filename}'')"/></a> <xen:elseif is="{$article.article_icon.type} == 'image'" /> <a class="attachHolder" href="{xen:link threads, $article}"><img src="//imagizer.imageshack.us/a/img924/3151/lXCkG6.png" alt="{$article.article_icon.data.file}" style="background: transparent url('{$article.article_icon.data.url}'); background-position: center center; background-size: cover"/></a> <xen:elseif is="{$article.article_icon.type} == 'medio'" /> <a class="medioHolder OverlayTrigger"style="background-image: url('{xen:helper medio, $article.article_icon.data}');" href="{xen:link 'full:media/media', $article.article_icon.data}" data-href="{xen:link 'full:media/media/popout', $article.article_icon.data}" data-cacheOverlay="false" data-overlayoptions="{"fixed":false}"> <img src="styles/8wayrun/EWRmedio_play.png" /> </a> </xen:if> </xen:contentcheck> <div style="margin-left:20px;top:10px;position: absolute;"> <xen:include template="EWRporta2_Article_Categories"> <xen:map from="$article.categories.cats" to="$categories" /> </xen:include> </div> <div class="post-meta-info"> <div class="post-meta-date"> <i class="fa fa-clock-o" aria-hidden="true"></i> {xen:time $article.article_date} - {xen:date $article.article_date} <span class="counter" style=""><i class="fa fa-user" aria-hidden="true"></i> {$article.username}</span> <span class="counter"><i class="fa fa-eye" aria-hidden="true"></i> {xen:number $article.view_count}</span> <span class="counter"><i class="fa fa-comments-o" aria-hidden="true"></i> {xen:number $article.reply_count}</span> <div class="textEWR"><i class="fa fa-info" aria-hidden="true"></i> "{xen:raw $article.messageHtml}"</div> </div> </div> </div> </xen:if> <div class="primaryContent"> <h3>{xen:helper threadPrefix, $article} <a href="{xen:link threads, $article}">{$article.article_title}</a> </h3> <div class="sectionFooter"> <xen:include template="EWRporta2_Article_Categories"> <xen:map from="$article.categories.cats" to="$categories" /> </xen:include> </div> </div> </div> - Chúc các bác thành công
