My NodeBB Theme
-
Hi. I made some changes in my theme with the custom CSSs I use in my own forum. site: https://kurulumu.net
Codes: (Add Custom LESS/CSS)
@media (max-width: 767px) { .account .cover { top: calc(var(--panel-offset) - 20px); }} .navbar-default .btn-link { color: #667c99; } .recent-cards .recent-card-container .recent-card { border:0 } .nav-pills>li.active>a, .nav-pills>li.active>a:focus, .nav-pills>li.active>a:hover { color: #fff; background-color: #1c74e9; } .topic .posts.timeline .timeline-event, .topic .posts.timeline>[component=post] { border-left: 0 } .topic .post-tools a { color: #6e6e6e; } body.lights-out .topic .post-tools a { color: #d9d9d9; } body.lights-out .categories>li .card p, .category>ul>li .card p { color: #aaa; } .topic .moderator-tools>a { color:#6e6e6e } @media (max-width: 767px) { .slideout-menu .chat-list li .main-avatar .avatar { border-radius: 50%; }} body.lights-out .recent-replies ul li { background: #36393e; } .recent-replies ul li p { font-size: 13px; color: #737b83; } .recent-replies ul li { width: 100%; height: 75px; line-height: 16px; margin-left: 0; padding: 10px 10px 10px 10px; list-style-type: none; border-radius: 8px; margin-bottom: 10px; background: #ffffff; } .recent-replies ul { width: 100%; height: 100%; line-height: 16px; margin-left: 0; padding: 5px 5px 5px 0; list-style-type: none; } .recent-replies ul li span { font-size: 12px; overflow: hidden; height: 16px; float: left !important; margin-left: 15px; margin-right: 3px; } .recent-replies ul li .avatar { border-radius: 50%; } .recent-replies ul li>div { max-height: 35px; } span.tag:before { content: "\f02c"; font-family: "Font Awesome 5 Free"; margin-right: 3px; margin-left: 2px; font-weight: 600; font-size: 9px; vertical-align: 0; } .topic [component="post/downvote"], .topic [component="post/upvote"] { color: #d9d9d9; } .answered i, .unanswered i { vertical-align: 0; margin-right: 2px; } .answered, .unanswered { border-radius: 4px } .posts-list .posts-list-item .topic-title { text-decoration: none; } .category>ul>li:not(.unread) .card { border-color: #e7672e!important; } .topic [component="topic/labels"] { color: #e7672e; } .topic .pagination-block .progress-bar { background-color: #e7672e; border-radius: 4px 4px 0 0; } .input-group-addon { background-color: #e7672e; border: 1px solid #e7672e; color: #fff; } .tag-topic-count { color: #e7672e; } .pagination>.active>a, .pagination>.active>a:focus, .pagination>.active>a:hover, .pagination>.active>span, .pagination>.active>span:focus, .pagination>.active>span:hover { background-color: #e7672e; border-color: #e7672e; } .breadcrumb .fa { color: #E7672E; } .fab { background-color: #E7672E; } .badge { background-color: #E7672E; border-radius: 4px; } pre { padding: 9.5px; margin: 0 0 10px; font-size: 13px; background-color: #e8ecf3; border: 1px solid #e8ecf3; border-radius: 4px; } .posts-list .posts-list-item .post-body { border-right: 2px solid #236ee7; } .topic .posts .content blockquote { font-size: 14px; font-style: italic; } blockquote { border-left: 5px solid #1c74e9; background-color: #e8ecf3; border-radius: 0 4px 4px 0; } body.lights-out blockquote { background-color: #3d4147; } .navbar-default .navbar-nav>.active>a, .navbar-default .navbar-nav>.active>a:focus, .navbar-default .navbar-nav>.active>a:hover { color: #667c99; background-color: #e8ecf3; } .navbar-default .navbar-nav>li>a { color: #667c99; } .composer .tags-container [component="composer/tag/dropdown"]>button { padding: 6px 12px; margin-top: 10px; } .categories>li, .category>ul>li { margin-left: 0; margin-right: 0; padding-bottom:0 } .avatar.avatar-rounded { background-color: #e8ecf3; } .users-container .users-box { width: 138px; border: 1px solid #f2f6fc; border-radius: 8px; background-color: #fff; padding-top: 15px; margin-left: 0; } body.lights-out .users-container .users-box { border: 1px solid #252a30; border-radius: 8px; background-color: #36393e; } .categories>li, .category>ul>li { border-radius: 8px; margin-bottom: 10px; background-color: #fff; } body { background-color: #e8ecf3; } .topic-list-header { background-color: #e8ecf3; border-top: none; border-bottom: none; } .btn-default { color: #56646f; background-color: #ffffff; border-color: #e8ecf3; } .recent-cards .recent-card-container .recent-card { background-color: #ffffff; } .topic .topic-header { background-color: #e8ecf3; } li[component="post"] { background-color: #fff; border-radius: 8px; } body.lights-out .categories>li, body.lights-out .category>ul>li { background-color: #36393e; } body.lights-out li[component="post"] { background-color: #36393e; } .categories>li .content h2 a, .category>ul>li .content h2 a, .recent-cards .recent-card-container .recent-card h4 a { color: #272c32; } .composer .mobile-navbar { background: #1c74e9 } .btn-group>.btn:not(:first-child):not(:last-child):not(.dropdown-toggle) { border-radius: 0 4px 4px 0; } .composer .resizer .trigger i { background-color: #1c74e9; border-color: #1c74e9; } body.lights-out .btn-primary { background-color: #1c74e9; border-color: #1c74e9; font-weight: 600; } .btn-default { font-weight: 600 } a { color: #1c74e9; } .btn-primary { background-color: #1c74e9; border-color: #1c74e9; font-weight: 600; } body.lights-out .btn-primary.active, body.lights-out .btn-primary.focus, body.lights-out .btn-primary:active, body.lights-out .btn-primary:focus, body.lights-out .btn-primary:hover, body.lights-out .open>.dropdown-toggle.btn-primary { background-color: #0e79cf; border-color: #0e79cf; font-weight: 600; } .btn-primary.active, .btn-primary.focus, .btn-primary:active, .btn-primary:focus, .btn-primary:hover, .open>.dropdown-toggle.btn-primary { background-color: #0e79cf; border-color: #0e79cf; font-weight: 600; } .selection-tooltip-container { border: none; background: none; } .tag-list .tag { background: #e8ecf3; padding: 3px 5px; color: #667c99; } .modal-content { border-radius: 8px } .topic .posts.timeline [component="topic/event"].timeline-event .timeline-text, .topic .posts.timeline [component="topic/necro-post"].timeline-event .timeline-text { line-height: 16px } .posts [component=post][data-index="-1"].isSolved { border-left: 4px solid #5cb85c !important; border-top: 1px solid #5cb85c !important; border-bottom: 1px solid #5cb85c !important; border-right: 1px solid #5cb85c !important; padding: 20px 20px 15px 0px !important; } body.lights-out .categories>li .content h2 a, body.lights-out .category>ul>li .content h2 a { color: #fff } body.lights-out .recent-cards .recent-card-container .recent-card h4 a { color: #fff } @media (max-width: 767px){ .topic .topic-header {background: #e8ecf3} .btn-default { background-color: #fff !important; } } .chat-modal [component="chat/header"], .chats-full [component="chat/header"] { background-color: #a46afd } @media (max-width: 767px){ .recent-cards.carousel-mode { margin-top: 10px }} a.permalink {text-decoration: none; } #nprogress .bar { display: none } @media (max-width: 767px){ body.lights-out .topic .topic-header {background: #36393e} body.lights-out .btn-default { background-color: #252a30 !important; color: #ffffff; } } .topic .posts.timeline .timeline-event:not(:first-child), .topic .posts.timeline>[component=post]:not(:first-child) {margin-bottom: 20px;} .topic-owner-post [itemprop="author"]:after { content: "\f303"; font-family: 'font awesome 5 free'; background-image: linear-gradient(to right, #f75, #feaa4a); border-radius: 50%; color: #fff; margin-left: 10px; margin-right: 0px; vertical-align: middle; font-size: 9px; padding: 5px; } .topic .posts.timeline .timeline-event:not(:first-child), .topic .posts.timeline>[component=post]:not(:first-child) { padding-top: 20px; } li[component="post"] { margin-bottom: 20px; padding-right: 30px; } li.topic-owner-post { padding-top: 20px; } .posts-list .posts-list-item { margin-bottom: 20px; padding: 20px; } .topic .posts.timeline [component=post]:last-child:after { border-bottom: none !important } @media only screen and (max-width: 991px){ .topic .content { padding: 0px 20px 0px 20px !important; }} @media only screen and (max-width: 991px){ .topic .posts.timeline [component=post]>div:not(.content) { padding: 0px 20px 0px 20px !important; }} .topic .content {font-size: 16px} @media (max-width: 991px){ .topic .posts.timeline [component=post] { border-bottom: 1px solid #eee; }} @keyframes pulsate{0%{opacity:0}100%{opacity:1}} .unread-count:after { animation: pulsate 2s infinite; height: 16px; min-height: 16px; } body.lights-out .fa.fa-lightbulb-o:before { content: "\f186"; } .unread-count:after { position: absolute; left: 23px; top: 10px; font-size: 10px; text-align: center; border: 1px solid #890405; color: #fff; font-weight: 700; min-width: 16px; border-radius: 3px; background: #c91106; padding: 1px 2px; } @media (max-width: 767px){.btn {padding: 8px 12px;}} .navbar-fixed-top { background: #fff; } #content { padding-bottom: 20px; transition: opacity 0ms linear; } @media (max-width: 991px){ .topic h1 .topic-title { margin-top: 15px; }} .chat-modal .chat-content li.chat-message .chat-user a, .expanded-chat .chat-content li.chat-message .chat-user a { color: #d9d9d9; } .nav-pills>li>a { border-radius: 4px; } .form-control:focus {box-shadow:none} .btn, .group-label, .topic .posts .content pre code, .hljs, code, .tag-list .tag .btn-info:hover, .btn-info:focus, .btn-info.focus, .btn-info:active, .btn-info.active, .open>.dropdown-toggle.btn-info, .btn-primary, .btn-primary:hover, .btn-primary:focus, .btn-primary.focus, .btn-primary:active, .btn-primary.active, .open>.dropdown-toggle.btn-primary, .tag-list .tag, .alert-warning { border-radius: 4px } .input-group-addon { border-top-right-radius: 4px; border-bottom-right-radius: 4px; } .announcements-widget { padding: 0; list-style-type: none; } .header .forum-logo { height: 35px; margin-top: 8px; margin-right: 12px; } .categories>li .category-children .category-children-item { min-width: 85px; } code { color: #333; background-color: #e8ecf3; } .hljs{ background: #e8ecf3; color: #33343d; padding: 10px; } .nav-pills>li.active>a, .nav-pills>li.active>a:focus, .nav-pills>li.active>a:hover {border-radius: 4px} @media (max-width: 767px){ .header .forum-logo { margin-left: 1px; }} .popular-tags > .inline-block { width: 100%; margin-top: -8px; &:first-child { margin-top: 0; } &:last-child { margin-bottom: -5px; } } .popular-tags .tag-topic-count { float: left; width: 20%; margin-top: 0px; background-color: #cbebf7; color: #777; padding: 4px 4px 5px 4px; border: 0; text-align: center; } .popular-tags .tag-item { float: left; width: 80%; background-color: #4fc3f7; color: white; font-weight: 500; padding-left: 10px; position: relative; padding: 5px 5px 4px 10px; } .popular-tags-bar { background-color: rgba(0,0,0,0.07); width: 0px; height: 32px; position: absolute; top: 0px; left: 0px; -webkit-transition: width 750ms ease-out; -moz-transition: width 750ms ease-out; -ms-transition: width 750ms ease-out; -o-transition: width 750ms ease-out; transition: width 750ms ease-out; } .topic .posts .content .img-responsive { padding: 6px; border: 1px solid #c3c3c3; background-color: #eee; border-radius: 3px; margin: 10px; } .well { background-color: #ffffff; border-radius: 8px; box-shadow: none; border: 1px solid #e8ecf3; } .btn-default { color: #56646f; background-color: #fff; border-color: #e8ecf3; } .form-control { border-radius:4px; } .btn-default.active, .btn-default.focus, .btn-default:active, .btn-default:focus, .btn-default:hover, .open>.dropdown-toggle.btn-default { color: #fff; background-color: #667c99; border-color: #667c99; } .open>.dropdown-menu { border-radius: 4px; } .panel-default { border-radius: 4px; border-color: #e8ecf3; } .topic .pagination-block { background-color: #fff; border-radius: 8px 8px 0 0; } .dropdown-menu>li>form>.btn-link, .dropdown-menu>li>form>button { color: #f23d37; } .alert-warning { background-color: #d9534f; color: #fff; border-color: #d9534f; } body.lights-out .pagination a { background-color: #36393e; } @media (max-width: 991px){ body.lights-out .topic .posts.timeline [component=post] { border-bottom: 1px solid #252a30; }} body.lights-out .bg-info { background-color: #36393e; } body.lights-out .alert-info { background-color: #36393e; border-color: #252a30; color: #ddd; border-radius: 4px; } body.lights-out .page-register-complete .tos { background: #36393e;} body.lights-out .chat-list .unread { background-color: #252a30; } body.lights-out .header .notification-list li.unread, .slideout-menu .notification-list li.unread {background-color: #252a30;} body.lights-out .alert-danger { background-color: #36393e; border-color: #252a30; color: #999; border-radius: 4px } body.lights-out .recent-cards .recent-card-container .recent-card { background-color: #36393e; } body.lights-out .topic [component="post/downvote"], .topic [component="post/upvote"] {color: #d9d9d9;} body.lights-out .topic .posts>[component=post] .avatar { box-shadow: 0 0 0 0.5rem #36393e; } body.lights-out .form-control { background-color:#36393e; border: 1px solid #252a30; color: #d9d9d9; } body.lights-out .input-group-addon { background-color: #36393e; border: 1px solid #252a30; } body.lights-out .well { background-color: #36393e; border: 1px solid #36393e; } body.lights-out .topic .pagination-block .pagination-text { color: #d9d9d9 } body.lights-out .navbar-default .navbar-nav>li>a {color: #fff} body.lights-out .topic .pagination-block { background-color: #36393e; } body.lights-out .tag-list .tag { background: #36393e; color: #6c757d; } body.lights-out .composer .write { background: #36393e; } body.lights-out .composer { background: #36393e; } body.lights-out .composer .formatting-bar .formatting-group li { color: #b3b3b3; } body.lights-out .modal-content{ background-color: #3d4147; color: #d9d9d9 } body.lights-out .account .profile .profile-meta strong {color: #337ab7} body.lights-out .modal-footer { border-top: 1px solid #252a30; } body.lights-out code { color: #898685; background-color: #36393e; } body.lights-out { background: none repeat scroll 0 0 #3d4147; color: #d9d9d9 } body.lights-out .navbar-default { background-color: #36393e; border-color: #d9d9d9 } body.lights-out .topic-header { background-color: #3d4147; } .topic .topic-info { border-bottom: 1px solid #d3d8df; } body.lights-out .topic .topic-info { border-bottom: 1px solid #252a30; } body.lights-out .dropdown-menu { background-color: #36393e; } body.lights-out .topic-list-header { background-color: #3d4147; border-top: 1px solid #252a30; border-bottom: 1px solid #252a30; } body.lights-out .btn-default { color:#d9d9d9; background-color: #36393e; border-color: #252a30; } body.lights-out .dropdown-menu>li>a { color: #fff; } body.lights-out .chat-modal .modal-header { background-color: #337ab7; color: #eee; border-bottom: 0 solid #252a30; } body.lights-out .chat-modal .modal-body { background-color: #3d4147; } .chat-modal [component="chat/composer"] [component="chat/input"], .chats-full [component="chat/composer"] [component="chat/input"] { border: 1px solid #252a30; } body.lights-out .panel-body { background-color: #36393e; color: #d9d9d9; } body.lights-out .panel-default .panel-heading { background-color: #36393e; color: #d9d9d9; border-color: #252a30; } body.lights-out .chats-list>li .room-name {color: #fff} body.lights-out code { color: #898685; background-color: #3d4147; border: 1px solid #3d4147; } body.lights-out .posts-list .posts-list-item .topic-title { color: #d9d9d9 } body.lights-out .navbar { border:0 } body.lights-out .category>ul>li .tag-list .tag { background-color: #3d4147; color: #6c757d; } body.lights-out .list-group-item { background-color: #36393e; border: 1px solid #252a30; } body.lights-out .panel { background-color: #36393e; } body.lights-out .panel-default { border-color: #252a30; } body.lights-out hr { border-top: 1px solid #252a30; } body.lights-out .bootstrap-tagsinput { background-color: #3d4147; } body.lights-out .navbar-default .navbar-nav>.open>a, body.lights-out .navbar-default .navbar-nav>.open>a:focus, body.lights-out .navbar-default .navbar-nav>.open>a:hover { background-color: #333; color: #555; } body.lights-out .category>ul>li:not(.unread) h2 a {color: #d9d9d9 !important} body.lights-out .chat-modal .chat-content li.chat-message .message-body-wrapper .message-body, .expanded-chat .chat-content li.chat-message .message-body-wrapper .message-body:hover {background: transparent} body.lights-out .chats-list>li .teaser-content { color: #6c757d; } body.lights-out .chats-list>li:hover {background: #3d4147} body.lights-out .header .chat-list, .slideout-menu .chat-list {color: #ccc} body.lights-out .nav-pills>li>a:hover {background: #36393e} @media (max-width: 767px){ .menu-profile { background: #3d4147; }} @media (max-width: 767px){ .slideout-menu { z-index: 10000!important; background-color: #36393e; background-image: linear-gradient( 145deg ,#36393e,#36393e); }} @media (max-width: 767px){ .topic-list-header { border-top: none; border-bottom: none; } } body.lights-out .page-register-complete .tos { background: #252a30; } body.lights-out .table-striped>tbody>tr:nth-of-type(odd) { background-color: #252a30; } body.lights-out .table-bordered>tbody>tr>td, body.lights-out .table-bordered>tbody>tr>th, body.lights-out .table-bordered>tfoot>tr>td, body.lights-out .table-bordered>tfoot>tr>th, body.lights-out .table-bordered>thead>tr>td, body.lights-out .table-bordered>thead>tr>th { border: 1px solid #252a30; } body.lights-out .table-bordered { border: 1px solid #252a30; }
The topic pages design is inspired by https://sudonix.com. @phenomlab
-
@kurulumu-net thanks for sharing... thanks for the inspiration @phenomlab
Actually, we are also planning to switch to this appearance... I have got the codes from @kurulumu-Net last week. The boxes and overall design make everything easier to read and make whole sections separate. We are currently working on the codes since our color preferences will be a little bit different. Additionally, I am planning to make more changes to dark mode. I will also share our version of the codes...
Copyright © 2024 NodeBB | Contributors