İçeriğe atla
kurulumu-net

Kurulumu.Net
  1. Ana Sayfa
  2. Uygulamalar
  3. NodeBB
  4. Kurulumu.Net'te kullandığım Özel CSS'ler

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

NodeBB
  • adminA

    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;
}
    1
  • volanarV

    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?

    1
  • adminA

    @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;
}
    2
  • volanarV

    @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?

    1
  • adminA

    @volanar Is here?

    https://imgyukle.com/f/2022/01/09/oLiphj.png

    2
  • volanarV

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

    @volanar Is here?

    https://imgyukle.com/f/2022/01/09/oLiphj.png

    Yes

    1
  • adminA

    @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.

    0
  • volanarV

    @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

    0
  • adminA

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

    1
  • volanarV

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

    0
  • adminA

    @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;
}
    1
  • volanarV

    @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%?

    0
  • volanarV

    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😯

    1
  • adminA

    @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;
}
    0
  • crazycellsC

    @mekici thx for the code 👍 you are missing just a { after “downvoted”

    0
  • adminA

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

    1
  • fakruzaruretF

    @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.

    crazycellsC 2 Cevap
    0
  • crazycellsC

    @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]

    1
  • crazycellsC

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

    kendisine surumleri yazarsaniz size net bir cevap verebilir.

    1
  • fakruzaruretF

    @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?

    0

Benzer konular