İyinet.Com'um Butonları [Yardım]

cakirts

Merhabalar

Giriş, konu aç, gelişmiş vb. butonları iyinetteki gibi yapmak istiyorum. Çok hoşuma gidiyor bu butonlar. Bu butonları yaklaşık 10 sitede daha gördüm. Xenforo nun butonlarını kullanıyorlar. Acaba bu butonların nasıl yapıldığını bilen var mı? Yardımcı olursa sevinirim.

Selametle...

Onur07 · 31 Ekim 2011

Photoshop da hazırla kaydet ftp den at .

ByLacoste · 31 Ekim 2011

Onur07' Alıntı:
Photoshop

Emin misin.

BlackThorn · 31 Ekim 2011

Bu bütonları iyinet'e ben yapmıştım zamanında. Kaldırın diye 100 kere söylememe rağmen kaldırmamışlardı. Daha sonra sağlık olsun dedim ama editlemişler Yeni Konu ve Cevap gibileri. Çokta kötü düzenlenmiş bence.

cakirts · 31 Ekim 2011

Nasıl yapıldığına dair cevap verecek yok mu? css kısmından .button yerine kod eklememiz lazım galiba. Ama hangi kodları?

Bence bu site diğer webmaster sitelerine göre daha şık duruyor.

JebiaS · 31 Ekim 2011

style dosyası

HTML:

input.buton {
	font:bold 20px Arial, Helvetica, sans-serif;
    width: 120px;
    height:40px;
    color: #fff;
	border:none;
	background:#457cb5;
	-webkit-box-shadow: 3px 3px 5px #000;
	box-shadow: 3px 3px 5px #000;
}
input.buton:Hover {
	background:#006699;
	cursor:pointer
}

html buton kodu

HTML:

<input type="submit" value="Cevap Yaz" name="cevap" class="buton">

üstteki yeni butonlar
eski butonlar

HTML:

input.buton {
font-size: 12px;
font-family: Calibri, 'Trebuchet MS', Verdana, Geneva, Arial, Helvetica, sans-serif;
color: black;
background: #DCDCEB url('http://forum.iyinet.com/images/bt_csscore/form-button-white-25px.png') repeat-x top;
padding: 0px 6px;
border: 1px solid #DDDDEB;
border-top-color: white;
border-bottom-color: #B3B3BD;
border-radius: 7px;
-webkit-border-radius: 7px;
-moz-border-radius: 7px;
-khtml-border-radius: 7px;
text-align: center;
box-shadow: 0px 1px 4px 0px rgb(200,200,210);
-webkit-box-shadow: 0px 1px 4px 0px rgb(200,200,210);
-moz-box-shadow: 0px 1px 4px 0px rgb(200,200,210);
-khtml-box-shadow: 0px 1px 4px 0px rgb(200,200,210);
text-shadow: 0px -1px 2px white;
outline: none;
line-height: 23px;
display: inline-block;
cursor: pointer;
box-sizing: border-box;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
height: 23px;
}
input.buton:Hover {
	background:white;
	cursor:pointer
}

html

HTML:

<input type="submit" value="Cevap Yaz" name="cevap" class="buton">

cakirts · 1 Kasım 2011

JebiaS cevabın için teşekkürler.

Onur07 · 2 Kasım 2011

ByLacoste' Alıntı:
Emin misin.

Photoshopdan kastım buton oluşturabileceğin herhangi bir program.

ByLacoste · 2 Kasım 2011

onur valla bilmiyorum ama bana sanki kodlanmış gibi geldi?

Onur07 · 2 Kasım 2011

ByLacoste' Alıntı:
onur valla bilmiyorum ama bana sanki kodlanmış gibi geldi?

Kodlama yaparlarsa yaparlar ben ondan anlamam da ftp den buton resimlerini değiştirince de oluyor .

ByLacoste · 2 Kasım 2011

Onur07' Alıntı:
Kodlama yaparlarsa yaparlar ben ondan anlamam da ftp den buton resimlerini değiştirince de oluyor .

Tamam onurcum sen beni anlamadın, şuanki kodlar resim olarak değilde css midir nedir onunla kodlanmış ve koyulmuş gibi duruyor.

Onur07 · 2 Kasım 2011

ByLacoste' Alıntı:
Tamam onurcum sen beni anlamadın, şuanki kodlar resim olarak değilde css midir nedir onunla kodlanmış ve koyulmuş gibi duruyor.

Anladım abi ben css le facebook logosu falan yapıyorlar doğrudur da. Öyle uğraşcağına bir programla çizmesi daha basit olur bence.

JebiaS · 2 Kasım 2011

geniş düşün photoshopla bi buton yaparsın güzel gelir kolay gelir
ama 100 buton yapcagını düşün herbiri için tektek uğraşcan upload etcen gereksiz yer kaplıcak css de 1tane stil oluşturursun sonra bütün butonlara o stili verirsin

Onur07 · 2 Kasım 2011

JebiaS' Alıntı:
geniş düşün photoshopla bi buton yaparsın güzel gelir kolay gelir
ama 100 buton yapcagını düşün herbiri için tektek uğraşcan upload etcen gereksiz yer kaplıcak css de 1tane stil oluşturursun sonra bütün butonlara o stili verirsin

Kodlamadan anlamam

ama nedense photoshopla daha güzel olur gibi geliyor bana.

Tripmaker · 6 Mart 2012

JebiaS' Alıntı:

style dosyası

HTML:

input.buton {
	font:bold 20px Arial, Helvetica, sans-serif;
    width: 120px;
    height:40px;
    color: #fff;
	border:none;
	background:#457cb5;
	-webkit-box-shadow: 3px 3px 5px #000;
	box-shadow: 3px 3px 5px #000;
}
input.buton:Hover {
	background:#006699;
	cursor:pointer
}

html buton kodu

HTML:

<input type="submit" value="Cevap Yaz" name="cevap" class="buton">

üstteki yeni butonlar
eski butonlar

HTML:

input.buton {
font-size: 12px;
font-family: Calibri, 'Trebuchet MS', Verdana, Geneva, Arial, Helvetica, sans-serif;
color: black;
background: #DCDCEB url('http://forum.iyinet.com/images/bt_csscore/form-button-white-25px.png') repeat-x top;
padding: 0px 6px;
border: 1px solid #DDDDEB;
border-top-color: white;
border-bottom-color: #B3B3BD;
border-radius: 7px;
-webkit-border-radius: 7px;
-moz-border-radius: 7px;
-khtml-border-radius: 7px;
text-align: center;
box-shadow: 0px 1px 4px 0px rgb(200,200,210);
-webkit-box-shadow: 0px 1px 4px 0px rgb(200,200,210);
-moz-box-shadow: 0px 1px 4px 0px rgb(200,200,210);
-khtml-box-shadow: 0px 1px 4px 0px rgb(200,200,210);
text-shadow: 0px -1px 2px white;
outline: none;
line-height: 23px;
display: inline-block;
cursor: pointer;
box-sizing: border-box;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
height: 23px;
}
input.buton:Hover {
	background:white;
	cursor:pointer
}

html

HTML:

<input type="submit" value="Cevap Yaz" name="cevap" class="buton">

kusura bakmayın konuyu hortlattım fakat kodları nereye eklicez :s

cakirts · 7 Mart 2012

Tripmaker' Alıntı:
kusura bakmayın konuyu hortlattım fakat kodları nereye eklicez :s

Aşağıdaki verdiğim kodları VB>temalar>CSS ayarları na gir ve Tuşlar başlığının altında sa taraftaki css abitürü yazan boşluğa yapıştır. Zamanında bende çok aramıştım bunları.

Kod:

font-style: normal;
font-size: 12px;
font-family: Calibri, 'Trebuchet MS', Verdana, Geneva, Arial, Helvetica, sans-serif;
color: rgb(0, 0, 0);
background: rgb(220,220,235) url('/images/bluefox_ambient/gradients/form-button-white-25px.png') repeat-x top;
padding: 0px 6px;
border: 1px solid rgb(221, 221, 235);
border-top-color: rgb(255, 255, 255);
border-bottom-color: rgb(179, 179, 189);
border-radius: 7px; -webkit-border-radius:  7px; -moz-border-radius:  7px; -khtml-border-radius:  7px;
text-align: center;
box-shadow: 0px 1px 4px 0px rgb(200,200,210); -webkit-box-shadow: 0px 1px 4px 0px rgb(200,200,210); -moz-box-shadow: 0px 1px 4px 0px rgb(200,200,210); -khtml-box-shadow: 0px 1px 4px 0px rgb(200,200,210);
text-shadow: 0 0 0 transparent, 0px -1px 2px white;
outline: none;
line-height: 23px;
display: inline-block;
cursor: pointer;
box-sizing: border-box; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box;
height: 23px;

}


.button.smallButton
{
    font-size: 11px;
    padding: 0px 4px;
    line-height: 21px;
    height: 21px;
    border-radius: 5px; -webkit-border-radius:  5px; -moz-border-radius:  5px; -khtml-border-radius:  5px;
}

.button.primary
{
    background-color: #a5cae4;
}

input.button.disabled,
a.button.disabled,
input.button.primary.disabled,
a.button.primary.disabled
{
    color: #999;
    background-color: #EEE;
    border-color: #CCC;
    box-shadow: 0 0 0 transparent; -webkit-box-shadow: 0 0 0 transparent; -moz-box-shadow: 0 0 0 transparent; -khtml-box-shadow: 0 0 0 transparent;
}

    .button::-moz-focus-inner
    {
        border: none;
    }

    a.button
    {
        display: inline-block;
        color: rgb(0, 0, 0);
    }

    .button:hover,
    .button[href]:hover,
    .buttonProxy:hover .button
    {
        color: black;
text-decoration: none;
background-color: rgb(255,255,200);
border-color: rgb(255,255,200);
border-top-color: white;
border-bottom-color: rgb(190,190,170);

    }

    .button:focus
    {
        border-color: #6cb2e4;

    }

    .button:active,
    .button.ToggleButton.checked,
    .buttonProxy:active .button
    {
        color: black;
background-color: rgb(153, 153, 163);
border-color: rgb(200,200,215);
border-top-color: #b3b3bd;
border-bottom-color: white;
box-shadow: 0px 0px 0px 0px transparent; -webkit-box-shadow: 0px 0px 0px 0px transparent; -moz-box-shadow: 0px 0px 0px 0px transparent; -khtml-box-shadow: 0px 0px 0px 0px transparent;
outline: 0;

        /*position: relative;
        top: 2px;*/
    }

    .button.ToggleButton
    {
        cursor: default;
        width: auto;
        color: rgb(179, 179, 189);
    }
    
    .button.ToggleButton.checked
    {
        background-color: rgb(255,150,50);
    }

    .button.inputSupplementary
    {
        width: 25px;
        position: absolute;
        top: 0px;
        right: 0px;
    }

    .button.inputSupplementary.add
    {
        color: green;
    }

    .button.inputSupplementary.delete
    {
        color: red;
    }

    .submitUnit .button
    {
        min-width: 100px;
        *min-width: 0;
    }

Tripmaker · 8 Mart 2012

Teşekkürler Fakat sanki bu sitedekilerin rengi açık mavi gibi daha hoş duruyor

cakirts · 8 Mart 2012

Kod:

background: rgb(165,202,228) url('/images/sizin_temaniz/gradients/form-button-white-25px.png') repeat-x top;

5. satırı bununla değiştir.

Tripmaker · 8 Mart 2012

Pek bi değişiklik olmadı ama ?

cakirts · 9 Mart 2012

Tripmaker' Alıntı:
Pek bi değişiklik olmadı ama ?

"/images/sizin_temaniz/gradients/form-button-white-25px.png" burasını kendine göre düzenle.