Tagged: , , ,

Viewing 13 posts - 1 through 13 (of 13 total)
  • Author
    Posts
  • #554427

    Hello,

    I want to use swicth button end of my main menu.
    Where can i edit?

    Special Turkish note for Yigit;
    Adaş ingilizcem iyi değil. 2 farklı dil için switch buton yaptım. Butonu yerleştirirken sıkıntı yaşıyorum.
    Main menü’de menü bitimine eklemek istiyorum fakat kodlaması karışık geldi.
    Panel bilgilerini vericem. Şuan koymak istediğim yerde EN yazıyor. (menu’de)

    #554428

    Merhabalar adas :)

    Nasil bir buton eklemek istiyorsunuz? “Dolaşım etiketi ” alaninda HTML kullanabilirsiniz. Buton seklinde goruntulemek istiyorsanizda Menu Style altindan degistirebilirsiniz.

    Cheers!
    Yigit

    #554434

    http://prntscr.com/9f9i0u

    şurada ekran görüntüsündeki switchable butonu eklemek istiyorum.
    css kısmını entegre ettim.

    html kısım kodları şöyle;

    <div class="dil">
    
    				<label class="switch switch-left-right">
    						<input class="switch-input" type="checkbox" checked id="language_tr"/>
                        <span class="switch-label" data-on="" data-off=""></span> <span class="switch-handle"></span> </label>
    
    </div>
    
    <script>
    $(function() {
        $('#language_tr').change(function() {
            if($("#language_tr").is(':checked')) {
                window.location = "http://www.eksisozluk.com";
            }
            else {
                window.location = "http://www.amazon.com";
            }
        })
    })    
    </script>
    #554436

    Merhabalar,

    Normalde bu tarz degisiklikler destek kapsamina girmiyor fakat kendi listeme ekledim gonderinizi. Bu aksam goz aticam, eger cok acil degilse sizin icin :)

    Regards,
    Yigit

    #554452

    çok teşekkür ederim adaş. eklemek istediğim css dosyalarını da buraya ekliyeyim.
    Vaktin olunca bakarsın. Sonradan düzenlemesini ben yaparım. Teşekkürler.

    .switch {
    	position: relative;
    	display: block;
    	vertical-align: top;
    	width: 70px;
    	height: 30px;
    	padding: 3px;
    	margin:0;
    	background: linear-gradient(to bottom, #eeeeee, #FFFFFF 25px);
    	background-image: -webkit-linear-gradient(top, #eeeeee, #FFFFFF 25px);
    	border-radius: 18px;
    	box-shadow: inset 0 -1px white, inset 0 1px 1px rgba(0, 0, 0, 0.05);
    	cursor: pointer;
    }
    .switch-input {
    	position: absolute;
    	top: 0;
    	left: 0;
    	opacity: 0;
    }
    .switch-label {
    	position: relative;
    	display: block;
    	height: inherit;
    	font-size: 10px;
    	text-transform: uppercase;
        background-image: url("http://www.cagriteknoloji.com.tr/img/tr.png");
    	border-radius: inherit;
    	box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.12), inset 0 0 2px rgba(0, 0, 0, 0.15);
    }
    .switch-label:before, .switch-label:after {
    	position: absolute;
    	top: 50%;
    	margin-top: -.5em;
    	line-height: 1;
    	-webkit-transition: inherit;
    	-moz-transition: inherit;
    	-o-transition: inherit;
    	transition: inherit;
    }
    .switch-label:before {
    	content: attr(data-off);
    	right: 11px;
    	color: #aaaaaa;
    	text-shadow: 0 1px rgba(255, 255, 255, 0.5);
    }
    .switch-label:after {
    	content: attr(data-on);
    	left: 11px;
    	color: #FFFFFF;
    	text-shadow: 0 1px rgba(0, 0, 0, 0.2);
    	opacity: 0;
    }
    .switch-input:checked ~ .switch-label {
    	background-image: url("img/tr.png");
    	box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.15), inset 0 0 3px rgba(0, 0, 0, 0.2);
    }
    .switch-input:checked ~ .switch-label:before {
    	opacity: 0;
    }
    .switch-input:checked ~ .switch-label:after {
    	opacity: 1;
    }
    .switch-handle {
    	position: absolute;
    	top: 4px;
    	left: 4px;
    	width: 28px;
    	height: 28px;
    	background: linear-gradient(to bottom, #FFFFFF 40%, #f0f0f0);
    	background-image: -webkit-linear-gradient(top, #FFFFFF 40%, #f0f0f0);
    	border-radius: 100%;
    	box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.2);
    }
    .switch-handle:before {
    	content: "";
    	position: absolute;
    	top: 50%;
    	left: 50%;
    	margin: -6px 0 0 -6px;
    	width: 12px;
    	height: 12px;
    	background: linear-gradient(to bottom, #eeeeee, #FFFFFF);
    	background-image: -webkit-linear-gradient(top, #eeeeee, #FFFFFF);
    	border-radius: 6px;
    	box-shadow: inset 0 1px rgba(0, 0, 0, 0.02);
    }
    .switch-input:checked ~ .switch-handle {
    	left: 45px;
    	box-shadow: -1px 1px 5px rgba(0, 0, 0, 0.2);
    }
    /* Switch Left Right
    ==========================*/
    .switch-left-right .switch-label {
    	overflow: hidden;
    }
    .switch-left-right .switch-label:before, .switch-left-right .switch-label:after {
    	width: 20px;
    	height: 20px;
    	top: 4px;
    	left: 0;
    	right: 0;
    	bottom: 0;
    	padding: 11px 0 0 0;
    	text-indent: -12px;
    	border-radius: 20px;
    	box-shadow: inset 0 1px 4px rgba(0, 0, 0, 0.2), inset 0 0 3px rgba(0, 0, 0, 0.1);
    }
    .switch-left-right .switch-label:before {
    	background-image: url("http://www.cagriteknoloji.com.tr/img/en.png");
        background-repeat: no-repeat;
    	text-align: left;
        padding-left: 80px;
        width: 100%;
        left: 20px;
    	opacity: 1;
    }
    .switch-left-right .switch-label:after {
    	text-align: left;
    	text-indent: -9px;
    	background-image: url("http://www.cagriteknoloji.com.tr/img/tr.png");
    	left: -50px;
    	opacity: 1;
    	width: 100%;
    }
    
    .switch-left-right .switch-input:checked ~ .switch-label:before {
    	opacity: 1;
    	left: 50px;
    }
    .switch-left-right .switch-input:checked ~ .switch-label:after {
    	left: 0;
    }
    .switch-left-right .switch-input:checked ~ .switch-label {
    	background: inherit;
    }
    
    /* Switch Slide
    ==========================*/
    .switch-slide {
    	padding: 0;
    	background: #FFF;
    	border-radius: 0;
    	background-image: none;
    }
    .switch-slide .switch-label {
    	box-shadow: none;
    	background: none;
    	overflow: hidden;
    }
    .switch-slide .switch-label:after, .switch-slide .switch-label:before {
    	width: 100%;
    	height: 65%;
    	top: 5px;
    	left: 0;
    	text-align: center;
    	padding-top: 10%;
    	box-shadow: inset 0 1px 4px rgba(0, 0, 0, 0.2), inset 0 0 3px rgba(0, 0, 0, 0.1);
    }
    
    /* Transition
    ============================================================ */
    .switch-label, .switch-handle {
    	transition: All 0.2s ease;
    	-webkit-transition: All 0.2s ease;
    	-moz-transition: All 0.2s ease;
    	-o-transition: All 0.2s ease;
    }
    #554458

    Hey!

    Tamamdir. Gelismelerden haberdar edicem

    Best regards,
    Yigit

    #555623

    Merhabalar sevgili adas!

    Gec cevap icin uzgunum!
    Degisiklikleri functions.php dosyasina uyguladim (Appearance > Editor). Appearance > Menus bolumune giderek yeni Custom Link ekleyip URL icin # ve navigation label icin “[avia_dil_cevirici]” kullandiginiz zaman switcher goruntulenecek. Fakat bayraklarim resim linkleri kirik gozukuyor. Media Library’de bulamadim. Onlar ekledikten sonra CSS duzeltmeleri gerekicek. Eger o duzenlemelerdede yardim gerekirse, lutfen resimleri ekledikten sonra haberdar edin goz atayim tekrardan.

    Best regards,
    Yigit

    #555696

    Hey adaş,

    Tahminimce oldukça yoğunsun :)
    Ben kırık linki düzelttim ve menüye ekledim. Fakat normal menü boşluk oluşturmadı ve logo’nun önüne aldı.

    Responsive’i bozmayacak şekilde menü’ye eklemek ve mobil’de de gelen sayfada menü’nün üstüne yerleştirmek istiyorum.
    Gerekli ayarlamaları yapmak için nereleri düzenlemek lazım?

    #555888

    Hey adas!

    Malesef, noel ve yilbasi oncesi malum :)

    Mobildeyken mobil menu icerisine mi yerlestirmek istiyorsunuz yoksa headerda menu ikonunun yanina mi?

    Regards,
    Yigit

    #555898

    Mobildeyken mobil menü içerisinde en alt veya en üst olabilir. En üste logo da eklemek istiyorum (açılan mobil menü içine)

    #555906

    Merhabalar!

    1- Acelesi yoksa sonra baksam olur mu? En kisa zamanda goz atmaya calisicam :)
    2- Lutfen assagidaki kodu Enfold theme options > General Styling > Quick CSS bolumune ekleyin

    ul#mobile-advanced {
        padding-top: 0;
        margin-top: 80px;
    }

    Regards,
    Yigit

    #555994

    Adaş merhaba tekrardan,
    bi üstümdeki kod için konuşuyorum.
    margin ile göstermek istemiyorum.

    Mobil menü’ye meni üstüne ayrıyetten bi logo eklemek istiyorum. Bunu nasıl yapabilirim?

    #556000

    Merhabalar!

    Mobil menuye ozel CSS kullanarak arkaplan resmi uygulamissiniz o yuzden logoyu mobil menuye arkaplan resmi olarak uygulayamayiz. Su anki arkaplan resmini duzenleyip logo ekleyebilirsiniz. Ikinci bir secenekte jQuery kullanarak mobile menu altina logoyu eklemek olabilir

    Regards,
    Yigit

Viewing 13 posts - 1 through 13 (of 13 total)
  • You must be logged in to reply to this topic.