Saklı Kalmış Sırlar
  Forum Şekillendirme
 

Forum Şekillendirme - 4 Ekim 2009

Dersimize Hoşgeldiniz şimdi size sitemizdeki forum kutucukların border ayarlarıyla şekillendirmeyi öğreteceğim.Border Diyerek Kastettiğin konu forumların sağında solunda veya çevresimde kalın çizgidir ki buda sitenizi güzel gösterir sağolsun Hyperend Kardeşimiz bize forum şekillendirmesini gösterdi biz biraz daha şekillendireceğiz.Dersimize ben görsellerle anlatmayacağım saten çokta uzun sürmez.

Kodu çoğu kişi biliyor saten.Yapacağımız şey forum arkaplanın kodundan sonra aşağıdaki kodu eklemektir.


border: 1px solid #393939; bu forumun çerçevesi için küçük 1 px boyutunda çizgidir.


border-left:5px solid #393939; buda forumun soluna eklenecek border ayarımızdır. Buda 5 px biraz daha kalındır.Bildiğimiz Gibi Left soldur eğer onu sağ yaparsanız border sağ tarafa geçer.



Buda Şuan sitemde Kullandığım Ayarıdır.Renklerde değişikler yapabilir ve arkaplanları değiştirebilirsiniz!

Bu kodu eğer Css tasarım Kullanıyorsanız Css Koduna ekleyeceksiniz eğer iceblue kullanıyorsanız iceblue tasarım kodunu eklediğiniz yerdeki koda tekrar bakın sonunda aşağıdaki kodu bulacaksınız

-->
</style>


bunların üstüne kodu yerleştirin olur


input {
padding: 1px;
margin-right: 1px;
background-image: url(https://img.webme.com/pic/g/gizemligercekler/arkaplanyorum.jpg);
border: 1px solid #393939;
border-left:5px solid #393939;
color: #000000;
font-family:verdana-tahoma;
font-size:16px;
}
input:hover{
padding: 1px;
margin-right: 1px;
background-image: url(https://img.webme.com/pic/g/gizemligercekler/arkaplanyorum.jpg);
border: 1px solid #373636;
border-left:5px solid #373636;
color: #000000;
font-family:verdana-tahoma;
font-size:15px;
}
textarea {
padding: 1px;
margin-right: 1px;
background-image: url(https://img.webme.com/pic/g/gizemligercekler/arkaplanyorum.jpg);
border: 1px solid #373636;
border-left:5px solid #373636;
color: #000000;
font-family:verdana-tahoma;
font-size:17px;
}
textarea:hover {
padding: 1px;
margin-right: 1px;
background-image: none;
border: 1px solid #000000;
border-left:5px solid #000000;
color: #000000;
font-family:verdana-tahoma;
font-size:17px;
}



Red Tasarımdada Denenmiştir İşte Kod


<style type="text/css">
input {
padding: 1px;
margin-right: 1px;
background-image: url(https://img.webme.com/pic/g/gizemligercekler/arkaplanyorum.jpg);
border: 1px solid #393939;
border-left:5px solid #393939;
color: #000000;
font-family:verdana-tahoma;
font-size:16px;
}
input:hover{
padding: 1px;
margin-right: 1px;
background-image: url(https://img.webme.com/pic/g/gizemligercekler/arkaplanyorum.jpg);
border: 1px solid #373636;
border-left:5px solid #373636;
color: #000000;
font-family:verdana-tahoma;
font-size:15px;
}textarea {
padding: 1px;
margin-right: 1px;
background-image: url(https://img.webme.com/pic/g/gizemligercekler/arkaplanyorum.jpg);
border: 1px solid #373636;
border-left:5px solid #373636;
color: #000000;
font-family:verdana-tahoma;
font-size:17px;
}textarea:hover {
padding: 1px;
margin-right: 1px;
background-image: none;
border: 1px solid #000000;
border-left:5px solid #000000;
color: #000000;
font-family:verdana-tahoma;
font-size:17px;
}hr {    border: 0;
    border-top: 1px solid #000;
    color: white;}
tt {
    background: #F2F2F2 ;
    border: dotted 1px #D7D7D7;
    padding: 5px 5px 5px 5px;
font-size:12px
} code {
    margin : 4px 8px;
    padding : 8px;
    text-align : left;
    display : block;
    overflow : auto;
    font : 500 1em/1.5em 'Lucida Console', 'courier new', monospace;
    background: #f8f4f1 url(https://img.webme.com/pic/g/gizemligercekler/httt.jpg) right top no-repeat;
    border : 1px dashed #D7C3C3;
}-->
</style>

 




Not:Dersimiz Bitmiştir. Umarım size yardımda bulunmuşuzdur bir dahaki dersimizde görüşmek üzere sitemiz yeni açılmıştır herkesin bizi tanıması  nedeniyle bu dersi sitemizin reklamını alıntı olarak gösterme şartıyla alabilirsiniz. teşekkürler İyi Günler

 
  Hit: 4 ziyaretçi (11 klik) Berkay Kuzu  
 

Okuduğunuz "Forum Åžekillendirme" adlı yazı veya videoya link vermek için şu linki ya da linkin altındaki kodu kullanabilirsiniz:

Javascript: GizemliGercekler

Bu web sitesi ücretsiz olarak Bedava-Sitem.com ile oluşturulmuştur. Siz de kendi web sitenizi kurmak ister misiniz?
Ücretsiz kaydol