Styles Share giao diện VBB3 voz từ Anh em Đông Lào | XF2

[Firewallwiki]

Đơn giản là ae vào Template-> Extra.less rồi dán cái này vào thôi. Chỉnh lại đường dẫn mấy cái icon đính kèm cho đúng là enjoy. XF 2 nha ae
Demo: https://eastlaos.com | Anh em Đông Lào

* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-size: 14px!important;
border-radius: 0px!important
}
html {
background: #201F25;
width: 100%;
}
a, p, span, h1, h2, h3, h4, h5, h6 {
font-family: verdana, geneva, lucida, 'lucida grande', arial, helvetica, sans-serif!important;
}
.bbCodeCode, .message-body, .message-signature {
font-family: verdana, geneva, lucida, 'lucida grande', arial, helvetica, sans-serif!important;
font-size: 14px;
}
body {
background: #201F25;
color: #FFFFFF;
margin: 0 auto!important;
min-width: 360px;
max-width: 1120px;
}
a:hover, a:active {
color: #FF6600;
text-decoration: underline;
}
.p-body-inner {
padding: 0;
background: #f2f2f2;
}
.p-body-pageContent div[data-type="thread"] .block-container, .p-body-pageContent div[data-widget-definition="new_posts"] .block-container {
background: #f5f5ff;
}
div[data-type="thread"] .structItemContainer {
margin-top: 0;
}
.labelLink, .labelLink:hover {
text-decoration: none;
vertical-align: middle;
}
.structItem-cell.structItem-cell--latest {
vertical-align: middle;
}
.block-header {
background: #869BBF url(/styles/classic/images/gradients/gradient_tcat.gif) repeat-x top left;
height: 30px;
font-weight: bold!important;
padding: inherit;
display: flex;
align-items: center;
padding-left: 10px;
}
.block-header a {
color: #FFFFFF;
}
.node+.node {
border: none;
}
.node-body {
background: #F5F5FF;
height: 50px;
}
.node-body .node-main {
padding: 0;
padding-left: 10px;
border: 1px solid #fff;
}
.node-body .node-icon {
background: #E1E4F2 url(/styles/classic/images/statusicon/forum_new.gif) no-repeat center;
text-indent: -9999px;
padding: 0;
border-left: 1px solid #fff;
border-bottom: 1px solid #fff;
}
.node-body .node-title {
font-weight: bold;
}
.node-body .node-stats>dl.pairs.pairs--rows:first-child {
border-right: 2px solid #fff;
}
.node-body .node-stats>dl.pairs.pairs--rows {
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
.node-body .node-stats {
padding: 0;
border: 1px solid #fff;
}
.node-body .node-stats dt {
display: none;
}
.node-body .node-extra {
padding: 0;
padding-left: 10px;
background: #E1E4F2;
border: 1px solid #fff;
}
.node-body .node-extra span, .node-body .node-extra a {
font-weight: bold;
font-size: 12px!important;
}
.node-body .node-extra span {
font-weight: normal;
border: none;
}
.node-body .node-extra .node-extra-icon {
display: none;
}
.p-breadcrumbs, .p-body-header, body[data-template="forum_list"] .p-body-main {
display: flex;
flex-direction: column;
margin: 0 auto;
background: transparent;
padding: 8px;
width: 100%;
table-layout: unset;
}
.p-body-main {
margin: 0 auto;
background: transparent;
padding: 8px;
}
.p-breadcrumbs, .p-body-header {
background: transparent;
padding: 12px 0;
margin: 0;
display: flex;
}
.p-breadcrumbs {
display: flex;
flex-direction: initial;
padding: 12px;
}
.p-breadcrumbs li {
float: inherit;
}
.p-breadcrumbs li a span {
color: #23497C;
}
.p-body-main--withSidebar .p-body-content {
padding: 0;
width: 100%;
}
.p-body-sidebar {
width: 100%;
}
.block-container {
background: transparent;
border: 1px solid #B0BDC6;
margin: initial;
}
nav.pageNavWrapper.pageNavWrapper--mixed {
border: 1px solid #728fbf;
border-right: none;
}
.pageNav-page {
border-right: 1px solid #718fbf!important;
background: #F5F5FF;
}
li.pageNav-page.pageNav-page--current {
background: #E1E4F2;
border: none;
color: #000;
font-weight: bold;
}
a.pageNav-jump.pageNav-jump--next {
background: #F5F5FF;
}
.block--messages .message {
padding-top: 30px;
position: relative;
background: transparent;
border: 1px solid #B0BDC6;
}
.message-cell.message-cell--user {
flex: 1;
width: 100%;
border: none;
background: #E1E4F2;
border-bottom: 1px solid #fff;
}
.message-inner {
flex-direction: column;
align-items: flex-start;
}
.message-cell.message-cell--user section {
display: flex;
align-items: center;
}
.message-cell.message-cell--user section .message-userArrow {
display: none;
}
.message-cell.message-cell--user section .message-userDetails {
display: flex;
flex-direction: column;
align-items: flex-start;
}
.message-cell.message-cell--user section .message-avatar {
margin-right: 8px;
}
.message-cell.message-cell--user section .message-avatar a span {
font-size: 35px!important;
font-weight: bold;
}
body[data-template="thread_view"] .block--messages .message .avatar.avatar--default.avatar--default--dynamic {
width: 120px;
height: 120px;

}
aside.message-signature {
border-top: 1px solid #e2e4f2;
padding-top: 15px;
color: #000;
margin-top: 15px;
}
.avatar img {
background: transparent;
}
.bbCodeBlock {
border-left: 1px solid #B0BDC6!important;
border-top: 1px solid #B0BDC6!important;
}
.bbCodeBlock-title {
color: #000;
font-weight: bold;
background: transparent;
padding-bottom: 6px;
}
.bbCodeBlock--expandable {
border-left: none;
border: 1px solid #d4d4d4;
background: #e1e4f2;
}
.bbCodeBlock-title:after {
font-weight: normal;
}
.bbCodeBlock-title a.bbCodeBlock-sourceJump:after {
font-weight: normal;
}
a.bbCodeBlock-sourceJump {
font-size: 12px!important;
}
.bbCodeBlock-content {
padding-top: 6px;
}
form.block.js-quickReply .message-inner {
display: flex;
flex-direction: row;
align-items: center;
}
form.block.js-quickReply .message-inner .message-cell.message-cell--user {
display: none;
}
.message-userArrow {
display: none;
}
.bbCodeBlock-expandContent {
color: #000;
font-style: italic;
}
.bbCodeBlock {
border: 1px solid #eee;
color: #000;
font-style: italic;
margin-top: 0;
}
header.message-attribution.message-attribution--split {
position: absolute;
top: 0;
background: #5C7099 url(/styles/classic/images/gradients/gradient_thead.gif) repeat-x top left;
width: 100%;
left: 0;
padding: 5px;
height: 30px;
color: #fff;
padding-right: 25px;
}
a.actionBar-action.actionBar-action--report {
position: absolute;
top: 0;
right: 0;
}
.pageNavSimple-el.pageNavSimple-el--first {
border-right: 1px solid #728fbf;
}
.pageNavSimple-el.pageNavSimple-el--prev, .pageNavSimple-el.pageNavSimple-el--next {
color: #728fbf;
background: transparent;
border-right: 1px solid #728fbf;
margin-right: 0;
}
.pageNavSimple-el.pageNavSimple-el--current {
color: #738FBF;
margin: 0;
background: transparent;
border-color: #728fbf;
border-right: 1px solid #728fbf;
}
.pageNav-jump {
background: #F5F5FF;
border-right: 1px solid #728fbf;
}
.pageNavSimple-el {
width: 100%;
}
.p-title-value {
font-weight: bold;
font-size: 20px!important;
color: #000;
display: block;
}
a.button.button--icon.button--icon--bolt, a.button--cta.button.button--icon.button--icon--write:before, a.button--cta.button.button--icon.button--icon--write .button-text, .node-body .node-extra span.label, .node-body .node-extra span.label-append, .block[data-widget-key="forum_overview_new_profile_posts"], .block[data-widget-key="forum_overview_new_posts"] {
display: none;
}
a.button--cta.button.button--icon.button--icon--write {
background: url(/styles/classic/images/buttons/newthread.gif) center no-repeat;
border: none;
width: 110px;
height: 26px;
}
.p-title-pageAction {
margin: 0;
}
body[data-template="thread_view"] .p-body-header {
padding-top: 0;
}
.p-body-header {
align-items: flex-start;
padding: 12px 12px 0 10px;
}
.p-navSticky.p-navSticky--primary {
position: unset!important;
}
nav.p-nav {
margin: 0 auto;
}
.p-sectionLinks {
margin: 0 auto;
width: 100%;
padding-top: 5px;
}
a.p-navgroup-link {
background: transparent;
}
.p-navgroup {
margin-left: 0!important;
}
.p-nav-opposite {
margin-right: 0;
}
header#header {
background: transparent;
padding: 15px 0;
}
.p-pageWrapper {
background: transparent;
}
.pairs.pairs--justified>dd {
text-align: left;
float: left;
}
h3.block-minorHeader a {
font-weight: bold;
}
h3.block-minorHeader {
font-weight: bold;
}
a.actionBar-action.actionBar-action--reply {
background: url(/styles/classic/images/buttons/quote.gif) no-repeat center;
width: 75px;
height: 30px;
display: block;
font-size: 0px!important;
}
a.actionBar-action.actionBar-action--report {
background: url(/styles/classic/images/buttons/report.png) no-repeat center;
font-size: 0px!important;
width: 22px;
height: 25px;
}
span.label-append {
display:none;
}
span.label {
display: inline-block;
padding: 0;
border: 1px solid transparent;
border-radius: 4px;
font-size: 80%;
line-height: 1.35;
text-decoration: none;
color: #23497b!important;
border: none;
background: transparent!important;
text-transform: capitalize;
margin-right: 2px;
}
.is-unread span.label {
font-weight: bold!important;
}
span.label:after {
content:" - ";
}
body[data-template="thread_view"] span.label {
color: #000000!important;
font-weight: bold!important;
font-size: 18px!important;
margin-right: 5px;
}
.structItemContainer-group--sticky span.label {
color: #ff6601!important
}
body[data-template="thread_view"] span.label-append, span.label {
vertical-align: text-bottom;
}
.label.label--green {
background: #5a6f98;
}
.label.label--red {
background: #97485b;
}
.label.label--primary {
background: #7790b9;
}
.label.label--orange {
background: #a2673d;
}
.message-cell.message-cell--main {
background: #f5f5ff;
}
.p-breadcrumbs>li:before {
color: #23497b;
content:"\f105";
padding-right: 6px;
}
.p-breadcrumbs>li:after, .p-breadcrumbs>li:first-child:before {
display: none
}
h4.menu-header {
color: #5c7099;
font-weight: bold;
}
a[data-xf-click="overlay"]:before {
display: none;
}
a[data-xf-click="overlay"] span {
padding: 0 12px;
color: #fff;
background: #23497b;
}
a.actionBar-action.actionBar-action--edit {
background: url(/styles/classic/images/buttons/edit.gif) center no-repeat;
font-size: 0px!important;
height: 25px;
width: 75px;
}
.message-actionBar.actionBar {
margin-top: 0;
padding-top: 6px;
}
.actionBar-set.actionBar-set--internal {
float: none;
padding: 0;
margin: 0;
display: flex;
align-items: center;
}
a.actionBar-action.actionBar-action--delete {
margin-top: 1px;
background: url(/styles/classic/images/buttons/delete.png) center no-repeat;
font-size: 0!important;
width: 70px;
height: 30px;
background-size: 70px;
}
.actionBar-set.actionBar-set--external {
float: right;
margin: 0;
display: flex;
}
.shareButtons.shareButtons--iconic {
padding: 0 12px;
}
.structItem-cell.structItem-cell--meta, .structItem-cell.structItem-cell--icon {
vertical-align: middle;
padding-top: 16px;
}
.pageNavWrapper--mixed .pageNav {
display: flex;
}
.pageNavSimple {
display: none!important;
}
.pageNav-page {
display: block!important;
}
.block-outer.block-outer--after {
}
ul.pageNav-main {
display: flex;
}
.block-outer-main {
float: right;
}
.block-outer {
background: transparent;
display: flex;
align-items: center;
flex-direction: row-reverse;
}
.block-outer-opposite {
margin-top: 0!important;
display: flex;
flex: 1;
justify-content: flex-start;
}
.button.button--link, a.button.button--link {
background: #f5f5ff;
border-color: #718fbf!important
}
div.block[data-type="thread"] .block-outer:first-child {
display: none;
}
.block-filterBar {
background: #5C7099 url(/styles/classic/images/gradients/gradient_thead.gif) repeat-x top left;
height: 30px;
display: flex;
align-items: center;
justify-content: flex-end;
}
.block-filterBar a {
color: #fff;
}
ul.message-attribution-opposite.message-attribution-opposite--list .message-newIndicator {
display: none;
}
h3.menu-header {
color: #5c7099;
font-weight: bold;
}
.message-cell.message-cell--user {
}
.message-attribution-user .avatar {
display: flex;
margin-right: 5px;
}
li.message-attribution-user {
display: flex;
justify-content: center;
align-items: center;
}
.message-attribution.message-attribution--plain ul.listInline.listInline--bullet {
display: flex;
align-items: center;
}
.message-cell.message-cell--main .message-actionBar.actionBar {
}
#profile-posts .message--simple .message-cell.message-cell--user {
display: none;
}
#profile-posts .block--messages .message {
padding-top: 0;
}
span.avatar.avatar--l.avatar--default.avatar--default--dynamic span {
font-size: 50px!important;
}
.p-title {
width: 100%;
display: flex;
}
a.p-navgroup-link.p-navgroup-link--textual.p-navgroup-link--logIn span {
background: transparent;
}
.overlay {
background: #e2e4f2;
}
.overlay .overlay-content .message-inner {
flex-direction: row;
align-items: unset;
}
.overlay .overlay-content .message--multiQuoteList .message-content {
max-height: unset;
}
.overlay .overlay-content .message-gradient {
display:none;
}
.overlay .overlay-content .message-attribution {
color: #23497c;
border-bottom: none;
}
footer#footer {
background: #103a58;
color: lightblue;
height: 100px;
}
.p-footer-linkList>li a {
color: lightblue;
}
.p-footer-copyright {
display: flex;
justify-content: center;
align-items: flex-end;
}
.fr-wrapper.show-placeholder {
background: #ffffff!important;
}
.fr-toolbar.fr-ltr.fr-desktop.fr-top.fr-basic {
background: #E1E1E2!important;
font-weight: bold!important;
}
article.message-body.js-selectToQuote {
margin-top: 0;
}
div[data-type="profile_post"] .message-cell.message-cell--user, div[data-widget-key="whats_new_new_profile_posts"] .message-cell.message-cell--user {
display: none;
}
div[data-widget-definition="new_profile_posts"] .message-main.js-quickEditTarget {
position: relative;
}
a.actionBar-action.actionBar-action--mq.u-jsOnly.js-multiQuote {
background: url(/styles/classic/images/buttons/multiquote_off.gif) no-repeat center;
font-size: 0!important;
width: 25px;
height: 28px;
border: none;
}
a.actionBar-action.actionBar-action--mq.u-jsOnly.js-multiQuote.is-selected {
background: url(/styles/classic/images/buttons/multiquote_on.gif) no-repeat center;
}
.tooltip.tooltip--selectToQuote .tooltip-content span {
display: flex;
align-items: center;
}
.tooltip--selectToQuote a.actionBar-action.actionBar-action--reply, .tooltip--selectToQuote a.actionBar-action.actionBar-action--mq.u-jsOnly.js-multiQuote {
background: none!important;
font-size: 14px!important;
width: unset;
}
.structItem-iconContainer .structItem-secondaryIcon {
border:none;
}
body[data-template="forum_view"] .structItem-cell.structItem-cell--icon {
background: url(/styles/classic/images/statusicon/thread_hot.gif) center no-repeat;
width: 32px;
}
body[data-template="forum_view"] .is-unread .structItem-cell.structItem-cell--icon {
background: url(/styles/classic/images/statusicon/thread_hot_new.gif) center no-repeat;
}
body[data-template="forum_view"] .structItemContainer-group.structItemContainer-group--sticky .structItem-cell.structItem-cell--icon {
background: url(/styles/classic/images/statusicon/announcement_old.gif) center no-repeat;
}
body[data-template="forum_view"] .structItem-cell.structItem-cell--icon.structItem-cell--iconEnd {
display: none;
}
body[data-template="forum_view"] .structItem-cell.structItem-cell--icon .avatar {
display: none;
}
body[data-template="forum_view"] .structItem-cell {
border: 1px solid #fff;
padding: 5px;
vertical-align: middle;
}
body[data-template="forum_view"] form.structItem {
display: none;
}
body[data-template="thread_view"] .block--messages time.u-dt {
background: url(/styles/classic/images/statusicon/post_old.gif) left no-repeat;
padding-left: 15px;
}
body[data-template="forum_view"] .structItem-title a:first-child {
background: url(/styles/classic/images/buttons/firstnew.gif) left 2px no-repeat;
padding-left: 17px;
}
body[data-template="thread_view"] .reaction.reaction--small.actionBar-action.actionBar-action--reaction.reaction--imageHidden.reaction--1 {
background: url(/styles/classic/images/buttons/ung.png) center no-repeat;
width: 75px;
height: 27px;
margin-right: 5px;
background-size: 75px auto;
}
body[data-template="thread_view"] .reaction.reaction--small.actionBar-action.actionBar-action--reaction.reaction--imageHidden.reaction--1 * {
display:none;
}
.block-outer:not(.block-outer--after) .pageNavWrapper:not(.pageNavWrapper--forceShow) {
display: block!important;
position: static !important;
}
.block-outer.js-threadStatusField {
display: none!important;
}
.lg-icon {
font-family:'Font Awesome 5 Pro'!important;
}
@media(max-width: 768px) {
.structItem-minor {
float: left;
padding: 4px;
height: 30px;
}
.p-breadcrumbs>li {
display: inherit;
}
.p-body-main {
padding: 0;
margin: 0;
}
.node-body .node-extra {
display: none
}
.node-body .node-main {
border-bottom: none;
padding-top: 5px;
}
.pageNavWrapper--mixed .pageNavSimple {
display: inline-flex;
width: 100%;
}
.p-body-header {
margin-bottom: 12px;
padding-top: 12px;
}
.structItem-cell.structItem-cell--meta {
display: none;
}
.structItem-cell.structItem-cell--latest {
padding: 0!important;
margin: 0;
}
.block-outer {
flex-direction: column-reverse;
align-items: flex-end;
}
.block-outer-main {
padding-top: 12px
}
body[data-template="forum_view"] .structItem-cell.structItem-cell--icon {
border-right: 1px solid #d4d5d7;
}
body[data-template="forum_view"] .structItem-cell {
border:none;
padding: 6px 12px;
}
body[data-template="forum_view"] .structItem-cell .structItem-minor {
padding: 0
}
body[data-template="forum_view"] .structItem-parts .structItem-startDate {
display:none;
color: #8f9193!important;
}
body[data-template="forum_view"] .structItem-cell.structItem-cell--main {
padding-bottom: 0!important;
}
}
@media(max-width: 992px) {
.p-body-sidebar {
display: flex;
flex-direction: column;
margin: unset;
margin-top: 15px;
}
.p-body-sidebar .block {
width: 100%;
margin: 0;
margin-bottom: 15px;
flex: unset;
}
.p-body-sidebar .block .block-container {
border-left: none;
border-right: none;
}
.p-body-sidebar:after {
display: none;
}
}
.block {
margin-bottom:0px;
}
.block .message-avatar-wrapper .message-avatar-online {
top: 2px;
left: 2px;
}
.avatar {

border: solid 2px;
border-radius: 50px;
border-color: #ffffff;
}

 

[donquaca]

thanks