Opencart Türkiye Destek Sitesi ,E-Ticaret Yazılımı Destek Paylaşım Forumu

e-ticaretdersleri Tüm Mesajlarını Bul · Konu Tarihi: **07-11-2012 07:09 AM**

Evet arkadaşlar bugünkü konumuz hedardaki linklerimize css menu olarak yapacağız. Farklı enuler oluşturmak isteyen varsa kullandığım program burdan indirin

Demo

1.Açınız: /httpdocs/catalog/view/theme/kenditeman/stylesheet/stylesheet.css

En altına Ekle

PHP Kod:

ul#css3menu1{
    margin:0;list-style:none;padding:6px 6px 6px 0;background-color:#1b1200;background-image:-o-linear-gradient(-90deg,rgba(255,255,255,0.38),rgba(255,255,255,0.16)); background-image:-moz-linear-gradient(-90deg,rgba(255,255,255,0.38),rgba(255,255,255,0.16));   background-image:-webkit-gradient(linear,50% 0%,50% 100%,from(rgba(255,255,255,0.38)),to(rgba(255,255,255,0.16)));  background-image:-webkit-linear-gradient(-90deg,rgba(255,255,255,0.38),rgba(255,255,255,0.16));background-repeat:repeat;border-width:1px;border-style:solid;border-color:#343434;-moz-border-radius:33px;-webkit-border-radius:33px;border-radius:33px;font-size:0;z-index:999;position:relative;display:inline-block;zoom:1;
    *display:inline;}
ul#css3menu1 li{
    display:block;white-space:nowrap;font-size:0;float:left;}
* html ul#css3menu1 li a{
    display:inline-block;}
ul#css3menu1>li{
    margin:0 0 0 6px;}
ul#css3menu1 a:active, ul#css3menu1 a:focus{
    outline-style:none;}
ul#css3menu1 a{
    display:block;vertical-align:middle;text-align:left;text-decoration:none;font:12px Impact,Charcoal,sans-serif;color:#E7E5E5;cursor:pointer;padding:8px 20px;background-color:;background-repeat:repeat;border-width:0;border-style:solid;border-color:transparent;}
ul#css3menu1 li:hover>a,ul#css3menu1 li a.pressed{
    background-color:#7ACF27;border-color:#F8F8F8;border-style:solid;color:#333;background-image:-o-linear-gradient(-90deg,rgba(255,255,255,0.38),rgba(85,170,0,0.7)); background-image:-moz-linear-gradient(-90deg,rgba(255,255,255,0.38),rgba(85,170,0,0.7));   background-image:-webkit-gradient(linear,50% 0%,50% 100%,from(rgba(255,255,255,0.38)),to(rgba(85,170,0,0.7)));  background-image:-webkit-linear-gradient(-90deg,rgba(255,255,255,0.38),rgba(85,170,0,0.7));text-decoration:none;filter:progid:DXImageTransform.Microsoft.gradient(gradientType=0​,startColorstr=#60FFFFFF,endColorstr=#B355AA00)}
ul#css3menu1 img{
    border:none;vertical-align:middle;margin-right:8px;}
ul#css3menu1 li.topmenu>a{
    background-color:;border-width:1px 0 0 0;border-style:solid;border-color:;border-radius:10px;-moz-border-radius:10px;-webkit-border-radius:10px;-moz-transition:all 0.5s;-webkit-transition:all 0.5s;-o-transition:all 0.5s;font:bold 13px "Arial Black",Gadget,sans-serif;color:#E7E5E5;text-decoration:none;text-shadow:0 1px 1px #000000;}
ul#css3menu1 li.topmenu:hover>a,ul#css3menu1 li.topmenu a.pressed{
    background-color:#7dfa00;background-image:-o-linear-gradient(-90deg,rgba(255,255,255,0.77),rgba(85,170,0,0.7)); background-image:-moz-linear-gradient(-90deg,rgba(255,255,255,0.77),rgba(85,170,0,0.7));   background-image:-webkit-gradient(linear,50% 0%,50% 100%,from(rgba(255,255,255,0.77)),to(rgba(85,170,0,0.7)));  background-image:-webkit-linear-gradient(-90deg,rgba(255,255,255,0.77),rgba(85,170,0,0.7));border-style:solid;border-color:#F8F8F8;color:#444444;text-decoration:none;text-shadow:0 1px 0 #C5EAA1;filter:progid:DXImageTransform.Microsoft.gradient(gradientType=0,st​artColorstr=#C6FFFFFF,endColorstr=#B355AA00)} 

1.Açınız: /httpdocs/catalog/view/theme/kenditeman/template/common/header.tpl

bul: eğer aşağıdaki aramada çıkmıyorsa <div class="links"> olarak aratın ve <div class="links"> ten başlayıp </div> 'e kadar olan kısmı seçiniz

PHP Kod:

<div class="links"><a href="<?php echo $home; ?>"><?php echo $text_home; ?></a><a href="<?php echo $wishlist; ?>" id="wishlist-total"><?php echo $text_wishlist; ?></a><a href="<?php echo $account; ?>"><?php echo $text_account; ?></a><a href="<?php echo $shopping_cart; ?>"><?php echo $text_shopping_cart; ?></a><a href="<?php echo $checkout; ?>"><?php echo $text_checkout; ?></a></div> 

bununla değiştir ... adefault benim kullandığım temadır ekteki dosyaları kendi temanızın image klasörüne atınız ve adefault olan kısımları kendi tema adınızı yazınız.

PHP Kod:

<div class="links"><ul id="css3menu1" class="topmenu"><li class="topmenu""><a href="<?php echo $home; ?>"><img src="catalog/view/theme/adefault/image/home.png" alt=""/><?php echo $text_home; ?></a></li><li class="topmenu"><a href="<?php echo $wishlist; ?>" id="wishlist-total"><img src="catalog/view/theme/adefault/image/infoo.png" alt=""/><?php echo $text_wishlist; ?></a></li><li class="topmenu"><a href="<?php echo $account; ?>"><img src="catalog/view/theme/adefault/image/service.png" alt=""/><?php echo $text_account; ?></a></li><li class="topmenu"><a href="<?php echo $shopping_cart; ?>"><img src="catalog/view/theme/adefault/image/buy.png" alt=""/><?php echo $text_shopping_cart; ?></a></li><li class="topmenu"><a href="<?php echo $checkout; ?>"><img src="catalog/view/theme/adefault/image/register.png" alt=""/><?php echo $text_checkout; ?></a></li></ul></div> 

Bu arada eğer farklı tema kullanan varsa ve header linkste farklı bir css uygulaması kullanıyorsa .
#header .links ten başlayıp /* menu */ olan kısma kadar seçip aşağıdaki kodla değiştiriniz. Aşağıdaki kod default temada header links normal olarak göstermesini sağlıyor.

PHP Kod:

#header .links {
    position: absolute;
    right: 0px;
    bottom: 3px;
    font-size: 10px;
    padding-right: 10px;
}
#header .links a {
    float: left;
    display: block;
    padding: 0px 0px 0px 7px;
    color: #38B0E3;
    text-decoration: none;
    font-size: 12px;
}
#header .links a + a {
    margin-left: 8px;
    border-left: 1px solid #CCC;
} 

Şimdi default temada kullananlar için sorun yok ama başka tema kullananlar için eğer search input text yani arama kutusunun üstüne çıkıyorsa stylesheet.css dosyasında gösterdiğim yerleri kendinize göre düzenleyin

PHP Kod:

#header #search {
    position: absolute;
    [b]top: 2px; /* arama kutusunun pozisyonu 
    right: 90px; /* arama kutusunun sağda bulunduğu pozisyonu
    width: 298px;[/b]  /* arama kutusunun uzunluğu
    z-index: 15;
} 

eğer header linste bir kayma oluyorsaki illa olacak diye düşünüyorum onuda gene aynı dosyadan aşağıdaki gösterdiğim yerlerden ayarlaya bilirsiniz. 4 tarayıcıda test ettim . Opera firefox safari bunlarda güzel çalıştı ama ie gene yaptı yapacağını Big Grin

PHP Kod:

#header .links {
    position: absolute;
    [b]right: 0px; /* sağdaki pozisyonu
    top: 83px; /* üstteki pozisyonu[/b]
    font-size: 10px;
    padding-right: 10px;
} 

nokta Tüm Mesajlarını Bul · Konu Tarihi: **07-11-2012 02:53 PM**

Emeklerine sağlık gerçekten çok güzel bir konu işlemişsin.
Bir çok kullanıcının derdine derman olacak çalışman.

kullanıcı2 Tüm Mesajlarını Bul · Konu Tarihi: **07-11-2012 03:49 PM**

Peki Kardeş Alttaki Bilgileri Hakkımızda Vb Gibi Bilileri alabirsek çok güzel olur Smile

e-ticaretdersleri Tüm Mesajlarını Bul · Konu Tarihi: **07-11-2012 04:02 PM**

(07-11-2012 03:49 PM)kullanıcı2 Yazılan: Peki Kardeş Alttaki Bilgileri Hakkımızda Vb Gibi Bilileri alabirsek çok güzel olur

fena fiki değil şuanda ürn sayfasında hemen al butonu üzerinde çalışma yapıyorum onuda eklerim zaman bulunca

nextwen Tüm Mesajlarını Bul · Konu Tarihi: **07-12-2012 04:51 PM**

ben üst menü modül istiyorum istediğim kategori veya sayfa ekleyip link verebilecek şekilde bir modül istiyorum.

unsound Tüm Mesajlarını Bul · Konu Tarihi: **07-13-2012 02:44 PM**

Sepete ürün atıldığı zaman , sepete bakmak istenildiğinde link kutusu üstte kalıp sepeti ezebiliyor. Bunuda çözümlerseniz süper olucak :o) Sanırım z index -100 veriyorduk :o)

e-ticaretdersleri Tüm Mesajlarını Bul · Konu Tarihi: **07-13-2012 03:40 PM**

(07-13-2012 02:44 PM)unsound Yazılan: Sepete ürün atıldığı zaman , sepete bakmak istenildiğinde link kutusu üstte kalıp sepeti ezebiliyor. Bunuda çözümlerseniz süper olucak :o) Sanırım z index -100 veriyorduk :o)

Uyarı İçin teşekkürler Eklediğiniz kodu aşağıdaki belirttiğim şekilde z-indexi düzeltme yapınız.

z-index:999; yerine z-index:100;

PHP Kod:

ul#css3menu1{
    margin:0;list-style:none;padding:6px 6px 6px 0;background-color:#1b1200;background-image:-o-linear-gradient(-90deg,rgba(255,255,255,0.38),rgba(255,255,255,0.16)); background-image:-moz-linear-gradient(-90deg,rgba(255,255,255,0.38),rgba(255,255,255,0.16));   background-image:-webkit-gradient(linear,50% 0%,50% 100%,from(rgba(255,255,255,0.38)),to(rgba(255,255,255,0.16)));  background-image:-webkit-linear-gradient(-90deg,rgba(255,255,255,0.38),rgba(255,255,255,0.16));background-repeat:repeat;border-width:1px;border-style:solid;border-color:#343434;-moz-border-radius:33px;-webkit-border-radius:33px;border-radius:33px;font-size:0;[b]z-index:100;[/b]position:relative;display:inline-block;zoom:1;
    *display:inline;}
ul#css3menu1 li{
    display:block;white-space:nowrap;font-size:0;float:left;}
* html ul#css3menu1 li a{
    display:inline-block;}
ul#css3menu1>li{
    margin:0 0 0 6px;}
ul#css3menu1 a:active, ul#css3menu1 a:focus{
    outline-style:none;}
ul#css3menu1 a{
    display:block;vertical-align:middle;text-align:left;text-decoration:none;font:12px Impact,Charcoal,sans-serif;color:#E7E5E5;cursor:pointer;padding:8px 20px;background-color:;background-repeat:repeat;border-width:0;border-style:solid;border-color:transparent;}
ul#css3menu1 li:hover>a,ul#css3menu1 li a.pressed{
    background-color:#7ACF27;border-color:#F8F8F8;border-style:solid;color:#333;background-image:-o-linear-gradient(-90deg,rgba(255,255,255,0.38),rgba(85,170,0,0.7)); background-image:-moz-linear-gradient(-90deg,rgba(255,255,255,0.38),rgba(85,170,0,0.7));   background-image:-webkit-gradient(linear,50% 0%,50% 100%,from(rgba(255,255,255,0.38)),to(rgba(85,170,0,0.7)));  background-image:-webkit-linear-gradient(-90deg,rgba(255,255,255,0.38),rgba(85,170,0,0.7));text-decoration:none;filter:progid:DXImageTransform.Microsoft.gradient(gradientType=0​,startColorstr=#60FFFFFF,endColorstr=#B355AA00)}
ul#css3menu1 img{
    border:none;vertical-align:middle;margin-right:8px;}
ul#css3menu1 li.topmenu>a{
    background-color:;border-width:1px 0 0 0;border-style:solid;border-color:;border-radius:10px;-moz-border-radius:10px;-webkit-border-radius:10px;-moz-transition:all 0.5s;-webkit-transition:all 0.5s;-o-transition:all 0.5s;font:bold 13px "Arial Black",Gadget,sans-serif;color:#E7E5E5;text-decoration:none;text-shadow:0 1px 1px #000000;}
ul#css3menu1 li.topmenu:hover>a,ul#css3menu1 li.topmenu a.pressed{
    background-color:#7dfa00;background-image:-o-linear-gradient(-90deg,rgba(255,255,255,0.77),rgba(85,170,0,0.7)); background-image:-moz-linear-gradient(-90deg,rgba(255,255,255,0.77),rgba(85,170,0,0.7));   background-image:-webkit-gradient(linear,50% 0%,50% 100%,from(rgba(255,255,255,0.77)),to(rgba(85,170,0,0.7)));  background-image:-webkit-linear-gradient(-90deg,rgba(255,255,255,0.77),rgba(85,170,0,0.7));border-style:solid;border-color:#F8F8F8;color:#444444;text-decoration:none;text-shadow:0 1px 0 #C5EAA1;filter:progid:DXImageTransform.Microsoft.gradient(gradientType=0,st​artColorstr=#C6FFFFFF,endColorstr=#B355AA00)} 

Gene aynı dosyada header cart ta z-index:101, yapınız.

#header #cart {
position: absolute;
top: 0px;
right: 0px;
z-index: 101;
min-width: 300px;


Direk Link
HTML Link
BBCode Link
Sosyal Paylaş	Sabah net google facebook digg twiter yahoo mixx stumbleupon delicious reddit myspace friendfeed google buzz linkedin

Benzeyen Konular
Konu:		Yazar	Cevaplar:	Gösterim:	Son Mesaj
	Header Links te linklerin önüne resim ekleme Vqmod	e-ticaretdersleri	1	6,071	12-07-2022 07:45 AM Son Mesaj: trapman
	Sabit üst menü	Ersen16	5	6,201	09-26-2016 11:36 AM Son Mesaj: tolikachocolate
	üst menü bağımsız eklame	barikat87	0	1,658	05-03-2016 03:51 PM Son Mesaj: barikat87
	musteri uye sayfasi sag menu linkleri	yusuf14	0	1,664	12-15-2015 02:03 PM Son Mesaj: yusuf14
	[Ücretli] menü ve tab sorunu çözümü	xenophanes	0	1,891	09-13-2015 09:08 PM Son Mesaj: xenophanes
	Super Category Menu numara,beden,renk filtresini aktif etme	djmega	1	2,519	08-04-2015 07:55 PM Son Mesaj: e-ticaretdersleri
	[Modifikasyon] Sepete ürün atınca header sepet açılsın?	pialfa	0	1,675	06-22-2015 08:40 PM Son Mesaj: pialfa
	[Modifikasyon] Opencart 2.0.1.1 Fixed Header Menu (Sabit Başlık Menü) yapımı	mustafaabanoz	2	4,011	05-25-2015 02:53 PM Son Mesaj: sakaryanotebook
	sağ kategoriler menü	teknolajek	0	1,936	05-20-2015 02:40 AM Son Mesaj: teknolajek
	header düzenleme yardım	djsroe	9	5,107	02-28-2015 07:54 PM Son Mesaj: e-ticaretdersleri

	Şuanki Zaman: 04-19-2024, 10:05 PMHoşgeldin Misafir !
	Beni Hatırla Şifremi Hatırlat

« Önceki \| Sonraki »

Opencart Türkiye Destek Sitesi ,E-Ticaret Yazılımı Destek Paylaşım Forumu

Header links te css menu tasarımı.