İlk kurulumda işinize yarayabilecek CSS kodlarını tek bir yere toparladım

bymizah

İlk kurulumda işinize yarayacak bütün kodları tek bir yere toparladım.

Ana sayfadaki konu listesi
Ana sayfa teması V2
Mobil Tema
Okunmamış başlıklarına simge (ikon) ekleme
Kullanıcı listesi sayfası
Cevap yaz butonu
Adsense reklamları
Beğen ve Yanıtla butonları
Footer bölümü
Scroll bar
Anasayfadaki konuların üzerine gelince sallansın

// KONU SAYFASI TEMASI

.Post.CommentPost {-webkit-box-shadow: 0px 8px 24px 3px rgba(84,102,134,0.08) !important;
box-shadow: 0px 8px 24px 3px rgba(84,102,134,0.08) !important; border: 1px solid #dbdfe6!important; border-radius: 8px;margin-top: 20px;}

// KONU SAYFASI TEMASI

// ANASAYFA TEMA V2
// https://flarumtr.com/d/1272-flarumtr-anasayfa-tasarimi-v2

@media (min-width: 768px){.item-recipients{ margin-left: 10px;}}

@media (min-width: 768px){
.IndexPage .DiscussionListItem-info>.item-tags, .UserPage .DiscussionListItem-info>.item-tags {
margin-right: 0;
position: absolute;
left: 90px;
top: unset !important;
max-width: 500px !important;
white-space: nowrap;
overflow: hidden;
transition: max-width .2s ease-in-out,-webkit-mask-image .2s;
font-size: 13px !important;
bottom: 16px;
-webkit-mask-image: initial !important;

}}

@media (min-width: 768px){.item-terminalPost{ margin-left: 10px;}}

@media (min-width: 768px){
.sideNav, .sideNav>ul {
width: 205px;
}}

@media (min-width: 992px){.DiscussionListItem-count:before {
-moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased;
display: inline-block;
font-style: normal;
font-variant: normal;
text-rendering: auto;
line-height: 1;
font-family: ‘Font Awesome 5 Free’;
font-weight: 400;
content: “\f27a”;
float: left;
margin-left: -21px;
margin-top: 4px;
}}

@media (min-width: 768px) {
.DiscussionListItem-badges {
margin-left: 0px;
position: absolute;
right: 40px;
}}

@media (min-width: 768px){
.DiscussionListItem-author .Avatar {
width: 50px;
height: 50px;
border-radius: 6px;
font-size: 25px;
line-height: 50px;
}}

@media (min-width: 768px){
.IndexPage .DiscussionListItem-title, .UserPage .DiscussionListItem-title {
margin-right: 0 !important; margin-left: 10px;
}}

@media (min-width: 767px) {
.DiscussionListItem-info .item-excerpt {
margin-left: 10px;
padding-bottom: 8px;
border-bottom: 1px solid #d7dfea;
margin-bottom: 15px;
margin-right: -40px !important;
}}

@media (min-width: 768px){
.item-discussion-views {
margin-right: -50px !important;
float: left;
margin-top: 68px;
position: absolute;
right: 100px;
bottom: 13px;
color: #667c99
}}

@media (min-width: 768px){
.DiscussionListItem-count {
float: right;
margin-top: 12px;
text-decoration: none;
position: absolute;
right: 130px;
bottom: 15px;
padding-left: 0px !important;
line-height: normal;
}}

.Pages-container{background: #fff;webkit-box-shadow:0 1px 10px 0 rgba(151, 158, 181, 0.28) !important;
box-shadow: 0 1px 10px 0 rgba(151, 158, 181, 0.28) !important; max-width: 1100px !important;}

@media (min-width: 767px) {.sideNav .Dropdown–select {
background: #fff;
padding-left: 15px;
padding-right: 15px;
padding-top: 5px;
padding-bottom: 5px;
box-shadow: 0 1px 10px 0 rgba(151, 158, 181, 0.28) !important;
border-radius: 6px;
}}

@media (min-width: 768px){.DiscussionListItem-content {
padding-left: 80px;
padding-right: 80px;
padding-top: 10px;
border-radius: 8px;
padding-bottom: 20px;
background-color: #fff !important;
-webkit-box-shadow: 0 1px 10px 0 rgba(151, 158, 181, 0.28) !important;
box-shadow: 0 1px 10px 0 rgba(151, 158, 181, 0.28) !important;
}

.DiscussionListItem {
position: relative;
margin-right: 0;
padding-right: 0;
padding-left: 0;
margin-left: 0;
border-radius: 8px;
margin-top:15px;}}

.Post.CommentPost {background-color: #fff !important; border-radius: 8px; margin-top: 20px; -webkit-box-shadow:0 1px 10px 0 rgba(151, 158, 181, 0.28) !important;
box-shadow: 0 1px 10px 0 rgba(151, 158, 181, 0.28) !important;
}

@media (min-width: 768px){.DiscussionListItem:hover { background-color: transparent !important;
-webkit-box-shadow: 0 1px 15px 0 rgba(0,0,0,.18) !important;
box-shadow: 0 1px 15px 0 rgba(0,0,0,.18) !important;}}

.badges>li {
padding-right: 15px;
}

.Badge–bestAnswer {
margin-bottom: -2px;
}

.item-onlineUsers{
background: #fff;
padding-left: 15px;
padding-right: 15px;
padding-top: 5px;
padding-bottom: 5px;
box-shadow: 0 1px 10px 0 rgba(151,158,181,0.28) !important;
border-radius: 6px;
}

// ANASAYFA TEMA V2

// MOBIL TEMA
// https://flarumtr.com/d/1198-flarumtr-mobil-tema

@media (max-width: 767px) {
.DiscussionListItem-badges {
margin-left: 0px;
position: absolute;
right: 10px;
}
.DiscussionListItem-info .item-excerpt {
margin-right: -30px !important;
white-space: normal !important;
font-size: 14px !important;
margin-left: -40px !important;
line-height: 1.5em !important;
margin-bottom: 25px !important;
color: #3a3a3a !important;
display: block !important;
border-bottom: 1px solid rgba(0,0,0,0.1);
padding-bottom: 5px;
}

.DiscussionListItem-content {
padding-left: 60px;
padding-right: 50px;
margin: 10px;
margin-bottom:15px;
border-radius: 6px;
box-shadow: 0 1px 10px 0 rgba(151, 158, 181, 0.28) !important;
background: #fff !important;
}
.DiscussionListItem-info>.item-tags {
margin-right: 4px;
opacity: 1;
position: absolute;
left: 20px;
bottom: 12px;
-webkit-mask-image: linear-gradient(to right, #000 140px, rgba(0,0,0,0) 150px);
}
.DiscussionListItem-title {
margin-right: 0;
font-weight: 600;

}
.DiscussionListItem-info {
overflow: unset !important;

}
.DiscussionListItem-count {
background: transparent !important;
font-size: 14px;
position: absolute;
bottom: 6px;
right: 45px;

}
.DiscussionListItem-count:before {
font-family: ‘Font Awesome 5 Free’;
display: inline-block;
line-height: 1;
content: “\f27a”;
float: left;
margin-left: -21px;
margin-top: 4px;

}

.DiscussionListItem-info> .item-recipients {
margin-right: 40%;
opacity: 1;
position: absolute;
right: 10px;
bottom: 10px;
}

.item-discussion-views {
font-size: 14px !important;
bottom: 6px;
left: 70%;
position: absolute;
color: #667c99;
top: unset !important;
background: transparent !important;
}

.item-discussion-views:before {
display: inline-block;
font-family: ‘Font Awesome 5 Free’;
font-size: inherit;
text-rendering: auto;
content: “\f06e”;
float: left;
margin-left: -21px;
margin-top: 0;

}

.unread .DiscussionListItem-count {
background: transparent !important;
color: #E7672E;
}}

@media (max-width: 767px) {
li.item-forumStatisticsWidget {
display: none;
}
}
@media (max-width: 600px) {
.OnlineUsers {
display:none;
}
}
@media (max-width: 768px){.IndexPage .WhoRead-list {
display: none;
}}
@media (max-width: 768px){.UserPage .WhoRead-list {
display: none;
}}

@media (max-width: 767px) {
.ComposerBody-header li:nth-child(n+2):nth-child(-n+4) {
display: inline-block;
border-bottom: 0;
margin-right: -15px;
}
}
@media (max-width: 767px) {body.dark .DiscussionListItem-content{

border: 1px solid rgb(56, 68, 77) !important;
background-color: transparent !important;
box-shadow: 0 1px 10px 0 #15202b! important;

}}

// MOBIL TEMA

// OKUNMAMIŞ KONULARIN BAŞLIKLARINA İKON KOYMA
// https://flarumtr.com/d/892-okunmamis-konu-basliklarina-simge-ekleme

.unread .DiscussionListItem-title:after {
font-family: ‘Font Awesome 5 Free’;
font-weight: 600;
font-size: 16px;
content: ‘\f06d’;
color: #cc3737;
margin-left: 6px ;}

// OKUNMAMIŞ KONULARIN BAŞLIKLARINA İKON KOYMA

// KULLANICI LİSTESİ SAYFASI
// https://flarumtr.com/d/896-flarumtr-kullanici-listesi-sayfasi-temasi

.UserDirectoryList .UserCard–directory {
background-color: transparent !important;
box-shadow: 0px 8px 24px 3px rgba(84,102,134,0.08) !important;
margin-bottom: 15px !important;
border:1px solid #dbdfe6!important;
border-radius: 10px !important;
}
.UserCard, .UserCard a {
color: #000;
}
.darkenBackground {
background: #fff;
border-radius: 10px !important;
}

.darkenBackground:hover { box-shadow: 0px 8px 24px 3px rgba(84,102,134,0.1) !important;}
.social-settings>.fa-cog { border-left: 1px solid #1b2028 !important;}
.Badge–social { color:#f36322 !important;}

// KULLANICI LİSTESİ SAYFASI

// CEVAP YAZ BUTONU

.ReplyPlaceholder {
border: 2px dashed #c5c3c3 !important;
border-radius: 10px;
}

// CEVAP YAZ BUTONU

// ADSENSE REKLAMLARI

.Flagrow-Ads-under-header{
margin-top: 10px;
margin-bottom: 5px;
padding-top: 3px;
text-align: center;
background-color: #f6eae4;
border-top: 1px solid #f6eae4;
}

// ADSENSE REKLAMLARI

// BEĞEN VE YANITLA BUTONLARI
// https://flarumtr.com/d/803-begen-ve-cevapla-butonlarina-ikon-ekleme

.item-like .Button:before {
font-family: ‘Font Awesome 5 Free’;
font-weight: 600;
font-size: 15px;
content: ‘\f164’;
margin-right: 8px;
vertical-align: -1px;
}
.item-reply .Button–link:before {
font-family: ‘Font Awesome 5 Free’;
font-weight: 600;
font-size: 15px;
content: ‘\f3e5’;
margin-right: 8px;
vertical-align: -1px;
}
.item-bestAnswer .Button–link:before {
font-family: ‘Font Awesome 5 Free’;
font-weight: 600;
font-size: 15px;
content: ‘\f005’;
margin-right: 8px;
vertical-align: -1px;
}

// BEĞEN VE YANITLA BUTONLARI

// FOOTER BÖLÜMÜ
// https://flarumtr.com/d/544-flarumtr-com-footer-kodlari

.flarumfooter {
background-position-y: 0px !important;
background-position: center;
background-repeat: no-repeat;
position: relative;
padding: 15px;
background-color: #002747;
text-align: center;
background-image: url(“/assets/effect.png”);

}
.flarumfooter a {
font-family : inherit;
font-weight: 600;
text-decoration: none;
color: #fff;
}
.logo-holder { padding: 20px;}

.logo-holder img {
max-width: 210px;
}
.text-holder ul li {
display: inline-block;
padding: 0 16px;
position: relative;
font-size: 14px;
}
.text-holder ul li:after {
content: '';
display: block;
width: 1px;
height: 12px;
background-color: #fff;
position: absolute;
right: 0;
top: 4px;
}
.text-holder ul li:last-child:after {
display: none;
}
.social ul li {
display: inline-block;
padding: 0 5px;
}
.social ul li img {
max-width: 140px;
}
.social ul li a {
display: block;
}
.social ul li i {
position: relative;
font-size: 20px;
bottom: 14px;
color: #4b749b;
}
.foot {
font-size: 12px;
color: #4b749b;
background-color: #002747;
padding: 10px;
line-height: 14px;
text-align: center;
font-weight: 600;
}
@media only screen and (max-width: 600px) {.flarumfooter, .foot {display: none;}}

.flarumfooter .social{
margin-top:25px;
}

// FOOTER BÖLÜMÜ

// SCROLL BAR
// https://flarumtr.com/d/1547-flarum-kaydirma-cubugu-ozellestirme

::-webkit-scrollbar {
width: 7px;
}
::-webkit-scrollbar-track {
-webkit-border-radius: 10px;
background: fade(#000, 10%);
border-radius: 10px;
}
::-webkit-scrollbar-thumb {
-webkit-border-radius: 10px;
border-radius: 10px;
background: fade(@primary-color, 80%);

}
::-webkit-scrollbar-thumb:window-inactive {
background: fade(@primary-color, 40%);
}

// SCROLL BAR

// KONULARI SALLA
// https://flarumtr.com/d/1702-anasayfadaki-konularin-uzerine-gelince-konu-sallansin

.DiscussionListItem:hover {
animation: shake 1.5s;
animation-iteration-count: infinite;
}

@keyframes shake {
0% { transform: translate(1px, 1px) rotate(0deg); }
10% { transform: translate(-1px, -2px) rotate(-1deg); }
20% { transform: translate(-3px, 0px) rotate(1deg); }
30% { transform: translate(3px, 2px) rotate(0deg); }
40% { transform: translate(1px, -1px) rotate(1deg); }
50% { transform: translate(-1px, 2px) rotate(-1deg); }
60% { transform: translate(-3px, 1px) rotate(0deg); }
70% { transform: translate(3px, 1px) rotate(-1deg); }
80% { transform: translate(-1px, -1px) rotate(1deg); }
90% { transform: translate(1px, 2px) rotate(0deg); }
100% { transform: translate(1px, -2px) rotate(-1deg); }
}

// KONULARI SALLA

tolgaaaltas

bymizah v2 teması içeriği için @mekici’nin onay vermesi lazım. O zamana kadar tartışmayı yanıtlamaya kapatıyorum.

durpoy

bymizah teşekkürler

bymizah

tolgaaaltas bymizah v2 teması içeriği için @mekici’nin onay vermesi lazım. O zamana kadar tartışmayı yanıtlamaya kapatıyorum.

Bu gibi konu kilitlemelerinde konuyu kilitleyen kişiye direk ulaşabileceğimiz bir yer yok mu?
Dün bir izahta bulunacaktım ama iletişime geçemedim. 🙂
CSS kodlarının içerisine her kod için ilgili konuların linklerini koydum zaten diyecektim.

mekici

Bakalım hocam 😀

Mark73

teşekkür ederim

tolgaaaltas

bymizah Özel Tartışma mevcut ancak kullanıcılar sürekli oradan özel soru sormak istediği için yalnızca belirli kullanıcı grupları için aktif.

bymizah

tolgaaaltas bizide o gruba alsanız 🙂
lazım olmadıkça kullanmayız.

Sezzny

Teşekkürler

RdvaNArslaN

teşeürler 😃

RiosenBeq

konu açılmışken bir bakalım

ardacankurt

teşekkürler

TahirMutlu

Teşekkürler.

ahmed26

tesekkurler

volkan

bakalım

Almina

bakalım

fbdogmus

Teşekkürler

rob

Elinize sağlık

Sonraki Sayfa »