Nasıl yapılır ? CSS değişken tanımlama

EfendiBey · 24 Eyl 2019

Arkadaşlar merhaba, Xenforo 2.1.X kullanıyorum.

Temamda bazı düzenlemeler yapıyorum. Bu kapsamda css de değişkenler tanımlamak istiyorum. Bir nevi özel renk paleti gibi düşünülebilir.

Örnek verecek olursak

renk1:FF0000
renk2:000000
renk3:CC0000

daha sonra bu tanımlamayı @renk1 ile çağırarak css düzenlemelerinde kullanmak istiyorum. Fakat bunun nasıl yapılacağını bir türlü bulamadım. Epeyce uğraştım ama nafile maalesef.

Bu konuda yardımlarınızı rica ediyorum.

MusaPekel · 24 Eyl 2019

Merhaba,

Görünüm ve diller > Tema özellikleri > Renk paleti > Grup Ekle kısmına girip aşağıda verilen örneklerin üzerinden veri değişikliği yapabilirsiniz.

Ekran görüsünü dikkatli bir şekilde kontrol edildikten sonra bizim için şuanlık önemli olan " ÖZELLİK ADI " verilen özellik adı bizim id değerimizi belirmektedir. Css olarak değiştirmeniz gereken veriyi direk olarak verilen parametrenin yanına " @xf-özellikadı "

Örnek olarak

color: @xf-renk1 ;
background: @xf-renk1 ;

İyi Forumlar

EfendiBey · 24 Eyl 2019

MusaPekel çok teşekkür ederim. İşe yaradı.

hover: @xf-renk1;

buna opacity nasıl atarız, hover yapacaksam eğer.

MusaPekel · 24 Eyl 2019

EfendiBey' Alıntı:
MusaPekel çok teşekkür ederim. İşe yaradı.

hover: @xf-renk1;

buna opacity nasıl atarız, hover yapacaksam eğer.

Değer türünü string yapmanız yeticektir içerisinde css kodu ekliyebilirsiniz.

EfendiBey · 24 Eyl 2019

CSS:

/* forum hover */
    .node-body:hover {
        background-color: @xf-renk1 opacity: 0.1;
    }

Bu kodda hatam nerede acaba? string olarak ayarladım renk1 ama çözüm yok.

MusaPekel · 24 Eyl 2019

EfendiBey' Alıntı:
CSS:

/* forum hover */ .node-body:hover { background-color: @xf-renk1 opacity: 0.1; }

Bu kodda hatam nerede acaba? string olarak ayarladım renk1 ama çözüm yok.

Kod:

 .node-body:hover {
 background-color: @xf-renk1;
 opacity: 0.1;
 }

EfendiBey · 24 Eyl 2019

Bunu denedim daha önce de ama bu kodu uyguladığımda hover altta ki fotoda ki gibi tüm forumu opacity yapıyor. Bunu çözemedim.

EfendiBey · 24 Eyl 2019

CSS:

.node-body:hover {
background-color: #FF000010;
}

Kodu bu şekilde çalıştırdım daha önce. İstediğim gibi oldu. Ama renk paleti oluşturunca yapamadım.

netr0n · 24 Eyl 2019

Gösterdiğiniz şekilde eklerseniz tüm foruma uygular. Yani işlem hover olduğunda tüm foruma opacity uygulanır. Size lazım olan kodlar aşağıdaki kodlar.

CSS:

.block-body {
    .node {
        .node-body:hover { background-color: @xf-renk1;
        opacity: 0.1;
    }
}

EfendiBey · 25 Eyl 2019

netr0n nazik cevabınız için teşekkür ederim ama sorunum çözülmedi maalesef.

Bu şekilde denedim, dediğiniz gibi denedim olmadı. Kategori bazlı değişkenler atıyorum.

CSS:

.block--categoryX {
/* forum hover */
    .node-body:hover {
        background-color: @xf-renk1 opacity:0.1;
    }
}

Sitemde bir başka siteden aldığım çift sütun kodunu kullanıyorum ayrıca.

CSS:

@media (min-width: @xf-responsiveWide) {
    [data-template="forum_list"] .block.block--category .block-body,
    [data-template="forum_view"] .block .block-body.node,
    [data-template="category_view"] .block .block-body.node {
        display: grid;
        grid-template-rows: auto;
        grid-template-columns: 50% auto;
        grid-gap: 3px;
    }
    [data-template="forum_list"] .node .node-body .node-main,
    [data-template="forum_view"] .node .node-body .node-main,
    [data-template="category_view"] .node .node-body .node-main {
        max-width: 47%;
    }
    .node.node--id8 {
        grid-column: span 2;
    }
    .node .node-extra {
        width: 340px;
        margin: 0;
    }
    .node .node-extra .node-extra-row {
        white-space: nowrap !important;
    }
    .node .node-body {
        flex-wrap: nowrap !important;
    }
    .node .node-body .node-main {
        max-width: 85% !important;
    }
    .node.node--depth2 {
        color: @xf-textColor;
        background: @xf-contentBg;
        border-width: 1px;
        border-style: solid;
        border-top-color: @xf-borderColorFaint;
        border-right-color: @xf-borderColor;
        border-bottom-color: @xf-borderColorFaint;
        border-left-color: @xf-borderColor;
        border-radius: 4px;
        -webkit-transition: all .25s ease;
        transition: all .25s ease;
        -webkit-transition-property: border margin;
        transition-property: border margin;
    }
    [data-template="forum_list"] .block.block--category .block-container,
    [data-template="forum_view"] .block .block-container.node,
    [data-template="category_view"] .block .block-container.node {
        background: none;
        border-style: none;
    }
    .node .node-body {
        display: flex;
        flex-grow: 1;
        flex-wrap: wrap;
    }
    [data-template="forum_list"] .node .node-body .node-main,
    [data-template="forum_view"] .node .node-body .node-main,
    [data-template="category_view"] .node .node-body .node-main {
        flex-grow: 1;
        max-width: 85%;
    }
    .node-extra {
        width: 90%;
        margin: -5px -46px 10px 46px;
    }
    .node-extra .node-extra-row {
        white-space: normal !important;
    }
    .node-statsMeta {
        display: inline;
    }
    .node-stats {
        display: none;
    }
    [data-template="forum_list"] .node-extra,
    [data-template="forum_view"] .node-extra,
    [data-template="category_view"] .node-extra {
        display: none;
    }
}

@media (max-width: @xf-responsiveWide) {
    .node-statsMeta {
        display: inline;
    }
    .node-stats {
        display: none;
    }
    [data-template="forum_list"] .node-extra,
    [data-template="forum_view"] .node-extra,
    [data-template="category_view"] .node-extra {
        display: none !important;
    }
}

Ara

Ara

Foruma hoş geldin 👋, Ziyaretçi

Nasıl yapılır ? CSS değişken tanımlama

EfendiBey

Sabit kullanıcı