Adding new menu items (like a button) - Support | Kriesi.at

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)

December 17, 2015 at 3:38 pm #554428

Merhabalar adas :)

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

Cheers!
Yigit

December 17, 2015 at 3:46 pm #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>

December 17, 2015 at 3:51 pm #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

December 17, 2015 at 3:59 pm #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;
}

December 17, 2015 at 4:07 pm #554458

Hey!

Tamamdir. Gelismelerden haberdar edicem

Best regards,
Yigit

December 20, 2015 at 7:13 pm #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

December 21, 2015 at 12:09 am #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?

December 21, 2015 at 1:40 pm #555888

Hey adas!

Malesef, noel ve yilbasi oncesi malum :)

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

Regards,
Yigit

December 21, 2015 at 1:49 pm #555898

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

December 21, 2015 at 2:08 pm #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

December 21, 2015 at 4:08 pm #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?

December 21, 2015 at 4:15 pm #556000