Kurulumu.Net'te kullandığım Özel CSS'ler

NodeBB
  • Kurulumu.Net’te NodeBB için kullandığım tüm harici CSS’leri aşağıya bırakıyorum. CSS’ler farklı zamanlarda ihtiyaçlara göre eklendiğinden karman çorman olabilir.

    NodeBB gece modu bayağı bir değişime uğradı. Tüm siteyi gece modu ile uyumşu olacak şekilde değiştirdim.

    @import url('https://fonts.googleapis.com/css2?family=Jost:wght@300;400;500;600;700;800;900&display=swap');
    body {font-family: 'Jost', sans-serif;}
    
    @media (max-width: 767px){.btn {padding: 8px 12px;}}
    
    .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, .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
    }
    
    .fa-chevron-up:before {
        content: "\f164";
    }
    
    .input-group-addon {
        
        border-top-right-radius: 4px;
        border-bottom-right-radius: 4px;
    }
    
    .announcements-widget {
        padding: 0;
        list-style-type: none;
    }
    
    .topic .content {
        font-size: 16px
    }
    .header .forum-logo {
        height: 35px;
        margin-top: 8px;
        margin-right: 12px;
    }
    
    .categories>li .category-children .category-children-item {
        min-width: 100px;
    }
    
    pre {
        padding: 0
    }
    
    code {
        color: #333;
        background-color: #e8ecf3;
    }
    
    .hljs{
        background: #f7f7f7;
        color: #666;
        padding: 9.5px;
    }
    
    .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;
    }
    
    
    @media (max-width: 767px){
    .topic .posts [component=post] {border-bottom: 1px solid #eee}}
    
    .well {
    background-color: #f5f5f5;
    border-radius: 4px;
    border: 1px solid #e3e3e3;
    }
    
    .btn-default {
        color: #56646f;
        background-color: #e8ecf3;
        border-color: #e8ecf3;
    }
    
    .form-control {
        border-radius:4px;
        border: 1px solid #c4d1dc;
    }
    
    .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: #e8ecf3;
    }
    
    
    .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;
       
    }
    
    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 {
        
        
        border: 1px solid #252a30;
        background-color: #36393e;
        
    }
    
    body.lights-out .topic [component="post/downvote"], .topic [component="post/upvote"] {color: #d9d9d9;}
    
    body.lights-out .topic .topic-info {
        border-bottom: 1px solid #252525;
    }
    
    
    body.lights-out .topic .posts>[component=post] .avatar {
        box-shadow: 0 0 0 0.5rem #36393e;
    }
    
    @media (max-width: 767px){
    body.lights-out .topic .posts [component=post] {
        border-bottom: 1px solid #252a30;
    }}
    
    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 {
        border: 1px solid #252a30;
        background-color: #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;
    }
    
    
    
    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;
    }
    
    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: #3d4147;
        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 pre {
        
        color: #d9d9d9;
        background-color: #36393e;
        border: 1px solid #252a30;
        border-radius: 4px;
        
    }
    
    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: #36393e;
    }
    
    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 a {
        
        color: #fff
    }
    
    
    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);
    }}
    
    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;
    }
    
  • Hello. Your theme is different from the original. Posts and categories are separated and there is a background. It’s better than the default theme. How did you do that?

  • @volanar I made it with the following CSS code.

    @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: 12px
    }
    .recent-replies ul li {
        width: 100%;
        height: 70px;
        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;
    }
    
    
    .fa-chevron-up:before {
        font-family: 'Font Awesome 5 Free';
    	font-weight: 600;
    	font-size: 17px;
    	content: '\f164';
    	margin-right: 4px;
    	vertical-align: -1px;
    }
    
    .fa-chevron-down:before  {
        font-family: 'Font Awesome 5 Free';
    	font-weight: 600;
    	font-size: 17px;
    	content: '\f165';
    	margin-right: 4px;
    	vertical-align: -1px;
    	
    }
    .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;
    }
    
    .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 {
    	border: 1px solid #ffffff;
        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;
    border: 1px solid #252a30;
    }
    
    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: #f5f5f5;
        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){
    .slideout-panel {padding-top: 50px !important;}
        .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"] { border: 1px solid #eee !important;
        margin-bottom: 20px;
        
        padding-right: 30px;
    }
    li.topic-owner-post {
        padding-top: 20px;
    }
    
    .posts-list .posts-list-item {
        margin-bottom: 20px;
        padding: 20px;
    }
    
    body.lights-out li[component="post"] { border: 1px solid #252a30 !important;}
    
    .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: 110px;
    }
    
    
    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: none;
    
    }
    
    
    .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 {
        
        
        border: 1px solid #252a30;
        background-color: #36393e;
        
    }
    
    body.lights-out .topic [component="post/downvote"], .topic [component="post/upvote"] {color: #d9d9d9;}
    
    body.lights-out .topic .topic-info {
        border-bottom: 1px solid #252525;
    }
    
    
    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;
        
    }
    
    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;
    }
    
    
    
    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;
    }
    
    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: #3d4147;
        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 pre {
        
        color: #d9d9d9;
        background-color: #36393e;
        border: 1px solid #252a30;
        border-radius: 4px;
        
    }
    
    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: #36393e;
    }
    
    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;
    }
    
  • @mekici Thanks a lot, it works!👏 Don’t know how to add a search icon to a sticky mobile menu to make the menu more user-friendly?

  • @volanar You have to do this with the plugin. It will disappear with updates as it is not in the core. Unfortunately, I don’t have time to write a plugin right now.

  • @mekici, içinde söyledi: Kurulumu.Net'te kullandığım Özel CSS'ler

    @volanar You have to do this with the plugin. It will disappear with updates as it is not in the core. Unfortunately, I don’t have time to write a plugin right now.

    Thanks for the reply. I don’t understand why the developers hide the search. The search functionality is very critical for the community. This should be in the core, not a separate plugin.

    Is it possible to replace the mobile block with a block of buttons from the desktop menu without writing a plugin?
    Screenshot_20220109_211510.png
    I think it will be faster and better for usability

  • @volanar I don’t think this is possible with CSS, but I’ll try.

  • Is it possible to use CSS to change the images of the likes counter to emoticons?
    smile.png

  • @volanar The codes below should do that.

    .fa-chevron-up:before {
        font-family: 'Font Awesome 5 Free';
        font-weight: 600;
        font-size: 17px;
        content: '\f118';
        margin-right: 4px;
        vertical-align: -1px;
        color: #91C483;
    }
    
    .fa-chevron-down:before {
        font-family: 'Font Awesome 5 Free';
        font-weight: 600;
        font-size: 17px;
        content: '\f119';
        margin-right: 4px;
        vertical-align: -1px;
        color: #D22779;
    }
    
  • @mekici, içinde söyledi: Kurulumu.Net'te kullandığım Özel CSS'ler

    @volanar The codes below should do that.

    .fa-chevron-up:before {
        font-family: 'Font Awesome 5 Free';
        font-weight: 600;
        font-size: 17px;
        content: '\f118';
        margin-right: 4px;
        vertical-align: -1px;
        color: #91C483;
    }
    
    .fa-chevron-down:before {
        font-family: 'Font Awesome 5 Free';
        font-weight: 600;
        font-size: 17px;
        content: '\f119';
        margin-right: 4px;
        vertical-align: -1px;
        color: #D22779;
    }
    

    Thanks😌 . It looks fun) But something is missing. Is it possible to make the color change when hovering, and the size increase by about 15-20%?

  • It would also be great if, with 1 or more votes, the hover color remained, as it would be brighter. And for the red smiley, on the contrary, it is brighter with voices -1 and lower😯

  • @volanar It gives green color for +1 vote and red for -1 vote.

    .topic [component="post/upvote"].upvoted {
        color: #009688;
    }
    
    .topic [component="post/downvote"].downvoted {
        color: #e91e63;
    }
    
  • @mekici thx for the code 👍 you are missing just a { after “downvoted”

  • @crazycells Aslında } var. Kaydırınca gözüküyor.

  • @admin hocam güncel css kodları var mı? Bir de bu recent cards eklentsinde tüm içeriği getiriyor str length gibi bir ayar var mı karakter sınırı koyma gibi. Çok uzun oluyor görüntü kötü oluyor bu şekilde.

  • @fakruzaruret, içinde söyledi: Kurulumu.Net'te kullandığım Özel CSS'ler

    @admin hocam güncel css kodları var mı? Bir de bu recent cards eklentsinde tüm içeriği getiriyor str length gibi bir ayar var mı karakter sınırı koyma gibi. Çok uzun oluyor görüntü kötü oluyor bu şekilde.

    hangi nodebb surumunu ve hangi recent cards’i kullaniyorsunuz?

    Eger bu sekilde gorunuyorsa, kullandiginiz surumler birbiriyle uyumsuz gibi… son ayda cok hizli guncellemeler yapildi o nedenle eger son surumunu yuklemeye calisirsaniz problem alma ihtimaliniz yuksek.

    recent cards’i silip 2.0.22’yi yukleyin isterseniz…

    npm install [email protected]

  • @fakruzaruret simdi gordum, zaten issue acmissiniz surada ve baris ayni seyi sormus…

    kendisine surumleri yazarsaniz size net bir cevap verebilir.

  • @crazycells evet son sürümü kurdum ama hiç mi hata yaşayan olmamış merak ettim baya da kullanan var yani. Resmi forumda da mı versiyon 2 kurulu acaba?


Benzer konular


  • NodeBB Email Problemi

    NodeBB
    5
    0 Oy
    5 İleti
    222 Bakış

    @phi, içinde söyledi: NodeBB Email Problemi

    @admin emaildeki logo nerde ki?

    ACP > Settings > General > Site Logo

    olmasi lazim…

  • NodeBB eklenti kurulumu

    NodeBB
    2
    0 Oy
    2 İleti
    212 Bakış

    Sitenizin kurulu olduğu dizinde kurulum komutunu çalıştırın. Örneğin:

    npm install nodebb-plugin-user-level
  • NodeBB Imgur Eklentisi

    NodeBB
    2
    0 Oy
    2 İleti
    199 Bakış

    @phi İmgur bir kaç ay önce telefonla doğrulama mevzusunu getirdi ve TR telefonları ile doğrulama yapılamıyor. Bunun için geçici ABD numarası satan siteler var. Onlardan bir tane temin edip kullanabilirsiniz.

    NodeBB’de İmgur eklentisi kurmak için Eklenti arama bölümüne imgur yazıp bu eklentiyi kurmanız yeterlidir.

  • 0 Oy
    2 İleti
    240 Bakış

    @gandalf diğer kategorilerde sadece e-postasını onaylayan kullanıcılar konu açabiliyor. E postanızı doğruladınız mı?

    EDİT: Farkettim hocam. 2 gün önce NodeBB v1.18 sürüme güncellendi. Sanırım bir hata var. NodeBB’nin kendi forumunda da bu hata var ve rapor ettim. Yakında düzelir diye umuyorum.

    Yeni bir konuyu okumaya başladığınızda sonraki girişinizde sizi okuduğunuz en son iletiye yönlendiriyor her zaman ve bunun ayarı yok malesef.

  • NodeBB nedir? Nodebb forum nasıl kurulur?

    Sabitlendi NodeBB
    37
    +0
    6 Oy
    37 İleti
    4k Bakış

    Nodebb 3.6.0 sürüm güncellemesiyle minimum nodejs 18’e ihtiyaç duymaktadır.

    Nodejs son sürüm yükleme

    1- Nodesource GPG anahtarını indirme ve içeri aktarma

    sudo apt-get update sudo apt-get install -y ca-certificates curl gnupg sudo mkdir -p /etc/apt/keyrings curl -fsSL https://deb.nodesource.com/gpgkey/nodesource-repo.gpg.key | sudo gpg --dearmor -o /etc/apt/keyrings/nodesource.gpg echo "deb [signed-by=/etc/apt/keyrings/nodesource.gpg] https://deb.nodesource.com/node_20.x nodistro main" | sudo tee /etc/apt/sources.list.d/nodesource.list

    nodejs çalıştırma ve yükleme

    sudo apt-get update sudo apt-get install nodejs -y

    Mongodb’nin ise 7.0 Sürümü Gelmiştir.
    Yükleme Komutları;

    sudo apt-get install gnupg curl curl -fsSL https://pgp.mongodb.com/server-7.0.asc | \ sudo gpg -o /usr/share/keyrings/mongodb-server-7.0.gpg \ --dearmor echo "deb [ arch=amd64,arm64 signed-by=/usr/share/keyrings/mongodb-server-7.0.gpg ] https://repo.mongodb.org/apt/ubuntu jammy/mongodb-org/7.0 multiverse" | sudo tee /etc/apt/sources.list.d/mongodb-org-7.0.list sudo apt-get update sudo apt-get install -y mongodb-org

    Mongodb Başlatma ve doğrulama

    sudo systemctl start mongod sudo systemctl status mongod

    Önceki Mongodb sürümlerinde mongo yazarak Mongodb giriş yaparak veritabanı oluşturuyorduk şimdi ise Mongosh olarak giriş yapıp yukarıdaki use admin use nodebb adımlarından devam edebilirsiniz.

    mongosh