Buton group css problemi

Comments

1 comment

  • Avatar
    Xpoda Support
    Commented by Furkan Camcı originally at 5/15/2023 1:29:29 PM


    Merhaba,

    Buton grup 3 farklı elementten oluşuyor. Buton grup isminin yazılı olduğu alan, buton listesinin açılır kutu imleci ve buton listesinin bulunduğu alan olarak ayrı cssleri bulunuyor. Bu yüzden studio üzerinde css verildiğinde normal buton gibi uygulanamıyor. Bu form aracına özel css vermek için kurulum dosyalarında bulunan customcss dosyasına özel css'lerinizi ekleyebilirsiniz. Bir css örneğini aşağıya ekliyorum. Bu eklediğiniz css dosyasını güncellemelerde koruyarak versiyon geçişlerinizde kaybetmeden kullanmaya devam edebilirsiniz. 

    Örnek css bilgileri aşağıdaki gibidir. Bu klasörün dosya yolu da şu şekildedir: C:\inetpub\wwwroot\Xpoda Client\Content\custom

    /* Tüm Button Groupların stillerini değiştirir */
    .octopusitem[data-octopus-type="51"] > div > a {
          border-radius: 20px !important;
    }
    /* Button Group açılır düğme stilleri */
    .octopusitem[data-octopus-type="51"] > div > a.dropdown-toggle {    
        border:none !important;
        left: -30px;
        z-index: 999;
    }

    /*----------------------------------------------------------------------------------------------------------------------------------------*/


    /* Eğer sadece tek bir formdaki Button Group değiştirmek istiyorsanız  ID si Form_2_BtnGroup_1 ise aşağıdaki şekilde seçebilirsiniz. */
    .octopusitem[data-id="Form_2_BtnGroup_1"] > div > a {
        border-radius: 20px !important;
    }
    /* Button Group açılır düğme stilleri */
    .octopusitem[data-id="Form_2_BtnGroup_1"] > div > a.dropdown-toggle {    
      border:none !important;
      left: -30px;
      z-index: 999;
    }

    /* Button menüsü */
    .octopusitem[data-id="Form_2_BtnGroup_1"] > div >  ul.dropdown-menu {    
        background-color: red;
    }
    /* Button menüsü linkleri */
    .octopusitem[data-id="Form_2_BtnGroup_1"] > div >  ul.dropdown-menu > li > a {    
        color: white !important;
        text-align: center;
    }

    Client ekranından görsel düzenleme yapmak istediğiniz her alan için bu özelleştirme klasörünü kullanabilirsiniz.

    İyi çalışmalar dileriz.

        
    0
    Comment actions Permalink

Please sign in to leave a comment.