Ayyıldız2 | 2008 TR Yapısı • 1-99 Orta Emek Destan • Oto Avsız • 10 Temmuz 21:00 HEMEN TIKLA!
Merhaba değerli Turkmmo Ailesi Sizlere bugun Xenforo için Avatar Çerçevesi Nasıl yapabilirsiniz Onu anlatacam.
Bu yapacak olduğumuz Avatar Çerçevesi tamamen kodlardan oluşmaktadır her hangi bir şekilde PNG vb gibi şeye ihtiyaç duymayacaksınız.
Admin Paneline Giriş Yapınız.
Görünüm ve Diller Kısmından Temalarınız'a Giriş yapınız.
Daha sonra Şablonlar kısmına giriş yapınız.
giriş Yaptıktan sonra Sitenizin Şablonlaranı göreceksiniz Sağ tarafta Filitre kısmına "Extra_less" Yazarak şablonu bulun ve şablonun içine girin.
yapacak olduğunuz işlemler öncesinde muhakkak temanızın yedeğini almayı unutmayınız.
[CODE lang="css" title="css"]/* NoxVortex Xenforo avatar efekt sistemi başlangıç */
.message-avatar-wrapper .avatar:before,
.message-avatar-wrapper .avatar:after{
border-color: #00c5de;
}
.message-avatar-wrapper a{
posit#00c5deve;
}
#00c5devatar-wrapper a:before,
.message-avatar-wrapper a:after{
content: "";
display: block;
position: absolute;
background: transparent;
top: 0;
bottom: 0;
left: 0;
right: 0;
border-radius: 50%; /*
TAM YUVARLAK */
transition: .3s all;
border: 2px solid;
pointer-events: none;
}
.message-avatar-wrapper a:hover:after{
-webkit-transform: scale(1.5);
transform: scale(1.5);
}
.message-avatar-wrapper a:hover:before{
-webkit-transform: scale(2);
transform: scale(2);
opacity: 0;
}
/*NoxVortex Xenforo avatar efekt sistemi son */[/CODE]
border-color: #00c5de; yukarıdaki kodda bu kısımdan çerçeve renginizi iste#00c5dei ayarlaya bilirsiniz.
Forum temanız renk kombini yapabilir ona göre düzenlemeler yapabilirsiniz. Böylelikte forum tasarımınız daha hoş gözükecektir.
Extra_less Satırına bu vermiş olduğum kodu yapıştırın ve Kaydedin.
Default bir Avatar penceresi
Default çerçevede gördüğünüz gibi çerçeve kenarlarında birşey bulunmamaktadır.
Fotoğraftaki gibi görünür fakat verdiğim kodu extra_less yapıştırdıktan sonra
Avatar çerçevenizin etrafında turkuaz renginde bir çerçeve göreceksiniz verdiğim kodlarda bu çerçeve rengini değiştire bilirsiniz ben örnek olarak turkuaz renk yaptım
Yeni şekli mavi çerçeve içerisinde olacak bu animasyonlu olup üzerine geldiğinizde daha farklı bir duruma gelecektir. Şimdiden iyi kullanımlar dilerim.
Bu yapacak olduğumuz Avatar Çerçevesi tamamen kodlardan oluşmaktadır her hangi bir şekilde PNG vb gibi şeye ihtiyaç duymayacaksınız.
Admin Paneline Giriş Yapınız.
Görünüm ve Diller Kısmından Temalarınız'a Giriş yapınız.
Daha sonra Şablonlar kısmına giriş yapınız.
giriş Yaptıktan sonra Sitenizin Şablonlaranı göreceksiniz Sağ tarafta Filitre kısmına "Extra_less" Yazarak şablonu bulun ve şablonun içine girin.
yapacak olduğunuz işlemler öncesinde muhakkak temanızın yedeğini almayı unutmayınız.
[CODE lang="css" title="css"]/* NoxVortex Xenforo avatar efekt sistemi başlangıç */
.message-avatar-wrapper .avatar:before,
.message-avatar-wrapper .avatar:after{
border-color: #00c5de;
}
.message-avatar-wrapper a{
posit#00c5deve;
}
#00c5devatar-wrapper a:before,
.message-avatar-wrapper a:after{
content: "";
display: block;
position: absolute;
background: transparent;
top: 0;
bottom: 0;
left: 0;
right: 0;
border-radius: 50%; /*
TAM YUVARLAK */transition: .3s all;
border: 2px solid;
pointer-events: none;
}
.message-avatar-wrapper a:hover:after{
-webkit-transform: scale(1.5);
transform: scale(1.5);
}
.message-avatar-wrapper a:hover:before{
-webkit-transform: scale(2);
transform: scale(2);
opacity: 0;
}
/*NoxVortex Xenforo avatar efekt sistemi son */[/CODE]
border-color: #00c5de; yukarıdaki kodda bu kısımdan çerçeve renginizi iste#00c5dei ayarlaya bilirsiniz.
Forum temanız renk kombini yapabilir ona göre düzenlemeler yapabilirsiniz. Böylelikte forum tasarımınız daha hoş gözükecektir.
Extra_less Satırına bu vermiş olduğum kodu yapıştırın ve Kaydedin.
Default bir Avatar penceresi
Default çerçevede gördüğünüz gibi çerçeve kenarlarında birşey bulunmamaktadır.
Fotoğraftaki gibi görünür fakat verdiğim kodu extra_less yapıştırdıktan sonra
Avatar çerçevenizin etrafında turkuaz renginde bir çerçeve göreceksiniz verdiğim kodlarda bu çerçeve rengini değiştire bilirsiniz ben örnek olarak turkuaz renk yaptım
Yeni şekli mavi çerçeve içerisinde olacak bu animasyonlu olup üzerine geldiğinizde daha farklı bir duruma gelecektir. Şimdiden iyi kullanımlar dilerim.
Son düzenleme:
Şu an konuyu görüntüleyenler (Toplam : 0, Üye: 0, Misafir: 0)
Benzer konular
