Özel Görünüm Ayaları

takomlii

Öncelikle eğer bu soruların cevabı forumda var ise gözümden kaçtı özür dilerim. Sormak istediğim birkaç soru var. Yukarıdaki panele iletişim yanına vs. logo nasıl ekleyebilirim. Ve konu başlıklarındaki çerçeveyi nasıl yapabilriim. (flarum sitesindeki gibi)CSS Ayarlarım şu şekilde;

@media (max-width: 767px){
.App-content {
background: #eff3f7;}}

@media (min-width: 767px) {.sideNav .Dropdown–select {
background: #fff;
padding-left: 15px;
padding-right: 15px;
padding-top: 5px;
padding-bottom: 5px;
border:1px solid #f4f4f4;
border-radius: 6px;
}}

@media (min-width: 767px) {body.dark .sideNav .Dropdown–select {background: transparent!important; border:1px solid rgb(56, 68, 77) !important;}}

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

body.dark .Post.CommentPost {background-color: transparent !important;}

.Post.CommentPost {background-color: #fff !important; border-radius: 8px; margin-top: 20px; border: 1px solid #f4f4f4;}

@media (max-width: 767px){
.DiscussionPage-nav {

border-bottom: none;

}}

@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: 80px;
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: 14px;

-webkit-mask-image: initial !important;

}}

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

@media (min-width: 768px) {.DiscussionListItem-title {
font-size: 17px;
font-weight: 600;
}}

@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: 767px) {
.DiscussionListItem-info .item-excerpt {
padding-bottom: 8px;
margin-bottom: 15px;
margin-right: -40px !important;
display: block !important;
border-bottom: 1px solid #f4f4f4;}}

@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: 145px;
bottom: 15px;
padding-left: 0px !important;
line-height: normal;
}}

@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 #f4f4f4;
padding-bottom: 5px;
}

.DiscussionListItem-content {
padding-left: 60px;
padding-right: 50px;
margin: 10px;
margin-bottom:15px;
border-radius: 6px;

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;

}}

.DiscussionList-update {
color: #fff !important;
background: #e7672e !important;

}

@media (min-width: 768px){body.dark .DiscussionListItem-content { background-color: transparent !important;}}

@media (min-width: 768px){.DiscussionListItem-content {
padding-left: 80px;
padding-right: 80px;
padding-top: 10px;
border-radius: 6px;
padding-bottom: 20px;
border: 1px solid #f4f4f4;
background-color: #fff !important;

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

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

.Hero h2 { font-size: 25px; font-weight: 700;}
.DiscussionHero-title {color: #282828 !important;}
.Hero { background-color: #fff !important; margin-bottom: 15px;}
.DiscussionHero .TagsLabel .TagLabel { color: #4D698E; font-size: 18px !important; }
.DiscussionHero .RecipientsLabel .RecipientLabel {color: #000;}
.Hero h2 {color: #282828;}
.Hero-subtitle {color: #000;}

.Scrubber-handle { background-color: transparent !important}
.Search-input input { border-radius: 30px; }
.Post-body { font-size: 16px; }
.DiscussionList-loadMore button { width: 75%; border-radius: 30px;margin-top: 30px;}
.sideNav .Dropdown–select .Dropdown-menu>.Dropdown-separator { border-bottom: 1px solid rgba(0, 0, 0, 0.1);}

.DiscussionListItem-info .item-excerpt {color: #696969 !important; font-size: 14px !important;}
.PostStream-item:not(:last-child) {
border-bottom: none;
}

.UserCard .Button, {
color: #667c99;
background: rgba(0, 0, 0, 0.1);
}

.UserDirectoryList .UserCard–directory {

background-color: transparent !important;
border: 1px solid  #f4f4f4;
margin-bottom: 15px !important;
box-shadow: 0 2px 6px #f7f9f9 !important;

-webkit-box-shadow: 0 2px 6px #f7f9f9 !important;
border-radius: 6px !important;
}

.darkenBackground {
background: #fff;
border-radius: 6px !important;
}
.UserCard, .UserCard a {
color: #40444a;
}

@media (min-width: 767px) {

.TagTiles>li {
width: 18% !important;
margin-right: 20px !important;
border-radius: 6px !important;
margin-bottom: 20px !important;
height: 280px !important;

}

.TagTile, .TagTile a {
color: #323f50 !important;
}

.TagsPage-content .TagTiles>li.TagTile {

background-color: #fff !important;
color: #000;

}
.TagTile.colored .TagTile-description {
color: #667c99 !important;
}
.TagTile-name {
color: #e7672e;
}
}
.IndexPage .DiscussionListItem-title, .UserPage .DiscussionListItem-title {margin-right: 10px !important;}

.DiscussionList:not(.DiscussionList–searchResults) .read .DiscussionListItem-title { font-weight: 600;}
.DiscussionList:not(.DiscussionList–searchResults) .unread .DiscussionListItem-title {font-weight: 600; color: #E7672E;}

// Unlogged users alert message
body.dark .CantSeePastFirstPost {
background: #1b2028;
color: #6c7d93;
}
body.dark .Hero {
background: #15202B!important;
}

body.dark .Hero-title {
color: rgb(255, 255, 255);
}

body.dark .App-content {
background: #15202B !important;
}

body.dark .App:before {
background-color: #15202B !important;
}

body.dark .Search .FormControl {
background-color: #15202B !important;
}

body.dark .FormControl {
color: #15202B !important;
}

body.dark .Search .FormControl {
background-color: #253341 !important;
}

/* Dim Button Group */
body.dark .IndexPage-toolbar .Button {
background: #21303D !important;
color: rgb(136, 153, 166) !important;
}

body.dark .item-subscription .Button {
background: #21303D !important;
color: rgb(136, 153, 166) !important;
}

body.dark .item-share-social .Button {
background: #21303D !important;
color: rgb(136, 153, 166) !important;
}

body.dark .Navigation .Button {
background: #21303D !important;
color: rgb(136, 153, 166) !important;
}

body.dark .Post-controls .Button {
background: #21303D !important;
color: rgb(136, 153, 166) !important;
}

body.dark .Post-actions .Dropdown-menu {
background: #21303D !important;
}

body.dark .item-controls .Dropdown-menu {
background: #21303D !important;
}

body.dark .item-subscription .Dropdown-menu {
background: #21303D !important;
}

body.dark .item-session .Dropdown-menu {
background: #21303D !important;
}

body.dark .item-sort .Dropdown-menu {
background: #21303D !important;
}

body.dark .item-fof-upload .Button {
background: #21303D !important;
}

body.dark .item-preview .Button {
background: #21303D !important;
}

body.dark .item-changePassword .Button {
background: #21303D !important;
}

body.dark .item-changeEmail .Button {
background: #21303D !important;
}

body.dark .DiscussionListItem-controls .Button {
background: #21303D !important;
}

body.dark .item-notifications .Dropdown-menu {
background: #21303D !important;
}

body.dark .item-flags .Dropdown-menu {
background: #21303D !important;
}

body.dark .DiscussionListItem-controls .Dropdown-menu {
background: #21303D !important;
}

body.dark .App-primaryControl .Dropdown-menu {
background: #21303D !important;
}

body.dark .Modal-header {
background: #21303D !important;
}

body.dark .Modal-body {
background-color: #15202B !important;
}

body.dark .Modal-footer {
background-color: #21303D !important;
}

body.dark .containerNarrow {
color: rgb(136, 153, 166) !important;
}

body.dark .sideNav .Dropdown–select .Dropdown-menu>.Dropdown-separator {
box-shadow: 0 1px 0px 0 rgb(56, 68, 77) !important;
}

body.dark .DiscussionListItem-content {
border: 1px solid rgb(56, 68, 77) !important;
}

body.dark .DiscussionListItem-info .item-excerpt {
color: #aaa !important;
}

body.dark .DiscussionListItem-info .item-excerpt {
border-bottom: 1px solid rgb(56, 68, 77) !important;
}

body.dark .DiscussionList:not(.DiscussionList–searchResults) .read .DiscussionListItem-title {
color: #ffff !important;
}

body.dark .Dropdown-menu {
background: transparent !important;
}

body.dark .Scrubber-handle {
background: transparent !important;
}

body.dark .Post.CommentPost {
border: 1px solid rgb(56, 68, 77) !important;
}

body.dark .ReplyPlaceholder {
border: 1px dashed #aaa !important;
}

body.dark {
background: #15202B !important;
}

body.dark .DiscussionHero-title {
color: #fff !important;
}

body.dark .Header-secondary .Button {
color: rgb(136, 153, 166) !important;
}

body.dark .Button-label .username {
color: #fff !important;
}

body.dark .Hero {
box-shadow: 0 1px 0px 0 rgb(56, 68, 77) !important;
}

body.dark .darkenBackground {
background: #15202B !important;
}

body.dark .UserBio {
color: #aaa;
}

body.dark .username {
color: #aaa;
}

body.dark .Button–primary {
color: #fff !important;
}

body.dark .Composer {
background: #21303D !important;
}

body.dark .FormControl {
background-color: #21303D !important;
color: #aaa !important;
}

body.dark .FormControl:focus, body.dark .FormControl.focus {
background-color: #21303D !important;
}

body.dark .DiscussionListItem:hover {
background: #21303D !important;
}

body.dark .UserCard-lastSeen {
color: #aaa !important;
}

body.dark .item-joined {
color: #aaa !important;
}

body.dark .NotificationGrid {
background: #21303D !important;
color: #aaa !important;
}

body.dark .App-backControl .Button:hover, body.dark .Button:focus, body.dark .Button.focus {
background-color: transparent !important;
}

body.dark .App-navigation .Navigation .Button {
background-color: transparent !important;
}

body.dark .App-titleControl .Button {
color: #aaa!important;
}

body.dark .Slidable .Slidable-underneath {
background: #21303D !important;
}

body.dark .DiscussionList-loadMore .Button {
background: #21303D !important;
}

body.dark .DiscussionListItem {
background: #15202B !important;
}

body.dark .DiscussionListItem.active {
backgorund: #21303D !important;
}

body.dark .DiscussionPage-list {
border: 1px solid rgb(56, 68, 77) !important;
background: #15202B !important;
}

body.dark .App-drawer {
background: #21303D !important;
}

body.dark #header-secondary>ul>li.item-signUp>button[title=Kaydol] {
color: #fff !important;
}

body.dark #header-secondary > ul > li.item-logIn > button[title=“Giriş Yap”] {
color: rgb(255, 255, 255) !important;
}

body.dark .TagLabel.colored .TagLabel-text {
color: none !important;
}

body.dark .DiscussionHero .TagsLabel .TagLabel.colored {
background: #21303D !important;
}

body.dark .Search-results {
background: #21303D !important;
}

body.dark .TagCategory.SubCategory .TagCategory-content {
background-color: #21303D !important;
}

body.dark .Hero-subtitle {color: #8899a6;}

body.dark .TagsPage-content .TagTiles>li.TagTile {

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

body.dark .TagTile, .TagTile a {
color: #939fae !important;
}

body.dark .UserDirectoryList .UserCard–directory {
box-shadow: 0 1px 10px 0 #15202b! important;
border: 1px solid rgb(56, 68, 77) !important;}

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

}}

.social-settings>.fa-cog { border-left: 1px solid #1b2028 !important;}
.Badge–social { color:#4d698e !important;}

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

@media (min-width: 768px){
.item-terminalPost {
bottom: 16px !important;
right: 190px !important;
position: absolute !important;
}}
@media (max-width: 768px){ .Post–BestAnswer .BestAnswer–User{display: none !important}}

body {background: #f7f9f9}
.Scrubber-handle{background: transparent !important;}

#header-secondary > ul > li.item-logIn > button[title=“Giriş Yap”]:before {
font-family: ‘Font Awesome 5 Free’;
font-weight: 600;
font-size: 16px;
content: ‘\f2f6’;
margin-right: 4px;
vertical-align: -1px;

}

#header-secondary > ul > li.item-signUp > button[title=“Kaydol”]:before {
font-family: ‘Font Awesome 5 Free’;
font-weight: 600;
font-size: 12px;
content: ‘\f234’;
margin-right: 4px;
vertical-align: 1px;

}

@media (max-width: 767px) { #header-secondary > ul > li.item-logIn > button[title=“Giriş Yap”] {margin-top:10px;}}

#header-secondary > ul > li.item-logIn > button[title=“Giriş Yap”]:hover {
background: #1C9963 !important;
margin-left: 10px;
padding-top: 5px;
padding-bottom: 5px;
padding-left: 10px;
padding-right: 10px;
transition-duration: 1s;
color: #fff;
border-radius: 30px;
width: 100px;
text-align: center;
transition: margin-right .1s;}

#header-secondary > ul > li.item-signUp > button[title=“Kaydol”]:hover {
background: #1f57a0 !important;
margin-left: 10px;
padding-top: 5px;
padding-bottom: 5px;
padding-left: 10px;
padding-right: 10px;
transition-duration: 1s;
color: #fff;
border-radius: 30px;
width: 100px;
text-align: center;
transition: margin-right .1s;}

#header-secondary > ul > li.item-logIn > button[title=“Giriş Yap”] {
border: 2px solid #1C9963;
margin-left: 10px;
padding-top: 5px;
padding-bottom: 5px;
padding-left: 10px;
padding-right: 10px;
transition-duration: 1s;
color: #1C9963;
border-radius: 30px;
width: 100px;
text-align: center;
font-weight: 700;}

#header-secondary > ul > li.item-signUp > button[title=“Kaydol”] {
border: 2px solid #1f57a0;
margin-left: 10px;
padding-top: 5px;
padding-bottom: 5px;
padding-left: 10px;
padding-right: 10px;
transition-duration: 1s;
color: #1f57a0;
border-radius: 30px;
width: 100px;
text-align: center;
font-weight: 700;}

/* KONULARA RESİM EKLEME */

@media (min-width: 1100px) {li[data-id=“XXX”] .DiscussionListItem {
background-image: linear-gradient(to right, #fff, rgba(255,255,255,0)),url(https://sosyal.tiligor.com/assets/files/2020-11-01/1604219986-774921-unnamed.jpeg) !important;
background-repeat: no-repeat;
background-size: initial;
background-attachment: scroll;
background-position: center top;
}}

/* MOBİL EDİTÖR TEMASINI KULLANIŞLI HALE GETİRME */

@media (max-width: 767px) {
li.item-polls {
clear: right;
}
li.item-tags,
li.item-recipients,
li.item-save-draft {
float: left;
}
li.item-save-draft {
padding: 3px 0px 0px 15px;
}
}

/* KAYDIRMA ÇUBUĞUNU DÜZENLEME */
::-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%);
}
/* ScrollBar */

// CEVAP YAZ BUTONU

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

// CEVAP YAZ BUTONU

// 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

/* SİDEBAR YAZILARI SABİTLEME */

.yazi {padding-bottom:15px;}
.fott { background: #fff; border-radius: 6px; margin-top: 20px; box-shadow: 0 1px 10px 0 rgba(151, 158, 181, 0.28) !important;}
.app2 { width:190px; padding-top: 5px; padding-bottom: 10px; display: block; text-align: center; padding-left: 15px;}
.text-holder { width:190px; font-size: 12px; font-weight: 500; text-align: center; padding-left: 15px;}
.text-holder ul { width:190px; list-style:none; float: left; margin-bottom: 10px; padding:0; }
.text-holder ul li { display: block; text-align: center;}
.text-holder ul li a { font-size: 16px; font-weight: 600; color: #4d698e; }
.TagsPage .text-holder { display: none;}
.TagsPage .app { display: none;}
.TagsPage .app2 {display: none;}
.social ul li {display: inline-block;padding: 0 5px; margin-top:10px;}
.app { width:190px; padding-top: 15px; padding-bottom: 5px; display: block; text-align: center; padding-left: 15px;}

durpoy

Beta 14.1 de bu istedigin eklenti ayarlarindan yapiliyor. Ama beta 13 kullaniyor isen bu tartismayi inceleyebilirsin. https://flarumtr.com/d/141-flarum-sayfa-isimlerinin-yanina-icon-ekleme