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

  • Admin

    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:[email protected];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?

  • Admin

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

  • Admin


  • Admin

    @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

  • Admin

    @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

  • Admin

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

  • Admin

    @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;
    }
    



Benzer Konular