Merhaba,
Bu yazımda SharePoint 2010 arama kutusunun ve butonunun tasarımını değiştirmeyi
anlatacağım.
SP 2010 ilk kurulduğunda arama kutusunun ve butonunun standart görünümü alttaki
gibidir.
Amacımız bu görünümü değiştirirken SP 2010 arama özelliklerini korumaktır. Neden
bir arama kutusu tasarımı değiştirirken SP’nin bizim için sunduğu özelliklerden
vaz geçelim. Arama kutusunu ve butonunu getiren kod satırı alttaki gibidir.
<SharePoint:DelegateControl runat=”server”
ControlId=”SmallSearchInputBox” Version=”4″/>
Bu kodu masterpage’de (tabi masterpage olmasını öngörüyorsanız) tasarımda
istediğiniz yere koyabilirsiniz. Arama kutusu oradan çalışacaktır. Peki
tasarımı? Yapmanız gereken ilk adım .s4-search input.ms-sbplain
classını değiştirmektir. Benim örneğim altta. corev4.css’deki bazı özellikleri
ezmek için !important
kullanmak durumunda kalabileceğinizi unutmayın.
background-image: url(‘../../SiteCollectionImages/Genel/SearchTextBox.png’) !important
background-repeat:no-repeat;
font-family: “Trebuchet MS”, “Lucida Sans Unicode”, “Lucida Grande”, “Lucida Sans”, Arial, sans-serif;
color:#5e5e5e;
font-size:11px;
border:0px !important;
float:left;
width:141px !important;
height:20px;
margin-left:25px;
padding:3px 0 0 5px;
background:none;
border:1px solid #E3E3E3
}
Kutu değişti sıra butonda.
Şimdi .ms-sbgo classıyla oynayalım. Benim örneğim altta.
background-image:
url(‘../../SiteCollectionImages/Genel/SearchButton.png’)!important;
background-repeat:no-repeat;
cursor:hand;
border:0px;
width:36px;
height:23px
float:left;
margin-left:5px;
background:none;
border-color:none !important;
border-style:none !important;
border-width:none !important;
padding:0 !important;
}
İşte sonuç. Neredeyse
sonuca ulaşmak üzereyiz ama ufak bir sorunumuz var. Buttonumuzun tasarımı altta
geldi. Ama aramayı tetikleyen esas obje o değil. Onun üstündeki, şu anda
tasarımı bozan, imaj. O imajı hem kaybetmemeliyiz hem de gözümüzün önünden
kaldırmalıyız.
İmaj .s4-search .srch-gosearchimg classına bağlı
(background:url(“/_layouts/images/bgximg.png”) repeat-x scroll 0 -511px
#FFFFFF;) ama sistemin altında. Kısacası ona dokunamayız. Bunun yanında bir CSS
hilesi yapamayacağız demek değil. Butonu görünmez yapıp kendi tasarımızdaki
yalancı butonunun üstünü kaplayacak şekilde boyutlarını ayarlayalım. Böylece o
imaj gizli gizli çalışsın övgüleri bizim butonumuz alsın. (Milli Vanilli buton:))
background:url(“/_layouts/images/bgximg.png”) repeat-x scroll 0 -511px #FFFFFF;
border-color:#E3E3E3 #E3E3E3 #E3E3E3 -moz-use-text-color !important;
border-style:solid solid solid none !important;
border-width:1px 1px 1px medium !important;
width:33px;
height:20px;
padding:0 !important;
visibility:hidden;
outline:none;
}
İşte sonuç.
Ve gayet güzel çalışıyor.
İyi çalışmalar
Teşekkürler.
