{"id":1284,"date":"2011-03-07T20:15:34","date_gmt":"2011-03-07T20:15:34","guid":{"rendered":"http:\/\/www.erbugkaya.com\/?p=1284"},"modified":"2014-01-16T22:52:27","modified_gmt":"2014-01-16T22:52:27","slug":"sharepoint-2010dan-arama-kutusu-tasarimi","status":"publish","type":"post","link":"http:\/\/erbugkaya.com\/?p=1284","title":{"rendered":"SharePoint 2010 Arama Kutusu Tasar\u0131m\u0131"},"content":{"rendered":"

Merhaba,<\/p>\n

Bu yaz\u0131mda SharePoint 2010 arama kutusunun ve butonunun tasar\u0131m\u0131n\u0131 de\u011fi\u015ftirmeyi
\nanlataca\u011f\u0131m.<\/p>\n

SP 2010 ilk kuruldu\u011funda arama kutusunun ve butonunun standart g\u00f6r\u00fcn\u00fcm\u00fc alttaki
\ngibidir.<\/p>\n

\"\"<\/a><\/p>\n

<\/p>\n

Amac\u0131m\u0131z bu g\u00f6r\u00fcn\u00fcm\u00fc de\u011fi\u015ftirirken SP 2010 arama \u00f6zelliklerini korumakt\u0131r. Neden
\nbir arama kutusu tasar\u0131m\u0131 de\u011fi\u015ftirirken SP’nin bizim i\u00e7in sundu\u011fu \u00f6zelliklerden
\nvaz ge\u00e7elim. Arama kutusunu ve butonunu getiren kod sat\u0131r\u0131 alttaki gibidir.<\/p>\n

\n

<SharePoint:DelegateControl runat=”server”
\nControlId=”SmallSearchInputBox” Version=”4″\/><\/p>\n<\/div>\n

Bu kodu masterpage’de (tabi masterpage olmas\u0131n\u0131 \u00f6ng\u00f6r\u00fcyorsan\u0131z) tasar\u0131mda
\nistedi\u011finiz yere koyabilirsiniz. Arama kutusu oradan \u00e7al\u0131\u015facakt\u0131r. Peki
\ntasar\u0131m\u0131? Yapman\u0131z gereken ilk ad\u0131m .s4-search input.ms-sbplain<\/em><\/strong>
\nclass\u0131n\u0131 de\u011fi\u015ftirmektir. Benim \u00f6rne\u011fim altta. corev4.css’deki baz\u0131 \u00f6zellikleri
\nezmek i\u00e7in !important<\/strong><\/span>
\nkullanmak durumunda kalabilece\u011finizi unutmay\u0131n.<\/p>\n

.s4-search input.ms-sbplain {
\nbackground-image: url(‘..\/..\/SiteCollectionImages\/Genel\/SearchTextBox.png’) !important
\nbackground-repeat:no-repeat;
\nfont-family: “Trebuchet MS”, “Lucida Sans Unicode”, “Lucida Grande”, “Lucida Sans”, Arial, sans-serif;
\ncolor:#5e5e5e;
\nfont-size:11px;
\nborder:0px !important;
\nfloat:left;
\nwidth:141px !important;
\nheight:20px;
\nmargin-left:25px;
\npadding:3px 0 0 5px;
\nbackground:none;
\nborder:1px solid #E3E3E3
\n}<\/div>\n

Kutu de\u011fi\u015fti s\u0131ra butonda.<\/p>\n

\"\"<\/a><\/p>\n

\u015eimdi .ms-sbgo<\/strong> class\u0131yla oynayal\u0131m. Benim \u00f6rne\u011fim altta.<\/p>\n

.ms-sbgo {
\nbackground-image:
\nurl(‘..\/..\/SiteCollectionImages\/Genel\/SearchButton.png’)!important;
\nbackground-repeat:no-repeat;
\ncursor:hand;
\nborder:0px;
\nwidth:36px;
\nheight:23px
\nfloat:left;
\nmargin-left:5px;
\nbackground:none;
\nborder-color:none !important;
\nborder-style:none !important;
\nborder-width:none !important;
\npadding:0 !important;
\n}<\/div>\n

\u0130\u015fte sonu\u00e7. Neredeyse
\nsonuca ula\u015fmak \u00fczereyiz ama ufak bir sorunumuz var. Buttonumuzun tasar\u0131m\u0131 altta
\ngeldi. Ama aramay\u0131 tetikleyen esas obje o de\u011fil. Onun \u00fcst\u00fcndeki, \u015fu anda
\ntasar\u0131m\u0131 bozan, imaj. O imaj\u0131 hem kaybetmemeliyiz hem de g\u00f6z\u00fcm\u00fcz\u00fcn \u00f6n\u00fcnden
\nkald\u0131rmal\u0131y\u0131z.<\/p>\n

\"\"<\/a><\/p>\n

\u0130maj .s4-search .srch-gosearchimg<\/strong> class\u0131na ba\u011fl\u0131
\n(background:url(“\/_layouts\/images\/bgximg.png”) repeat-x scroll 0 -511px
\n#FFFFFF;)<\/em> ama sistemin alt\u0131nda. K\u0131sacas\u0131 ona dokunamay\u0131z. Bunun yan\u0131nda bir CSS
\nhilesi yapamayaca\u011f\u0131z demek de\u011fil. Butonu g\u00f6r\u00fcnmez yap\u0131p kendi tasar\u0131m\u0131zdaki
\nyalanc\u0131 butonunun \u00fcst\u00fcn\u00fc kaplayacak \u015fekilde boyutlar\u0131n\u0131 ayarlayal\u0131m. B\u00f6ylece o
\nimaj gizli gizli \u00e7al\u0131\u015fs\u0131n \u00f6vg\u00fcleri bizim butonumuz als\u0131n. (Milli Vanilli buton:))<\/p>\n

.s4-search .srch-gosearchimg {
\nbackground:url(“\/_layouts\/images\/bgximg.png”) repeat-x scroll 0 -511px #FFFFFF;
\nborder-color:#E3E3E3 #E3E3E3 #E3E3E3 -moz-use-text-color !important;
\nborder-style:solid solid solid none !important;
\nborder-width:1px 1px 1px medium !important;
\nwidth:33px;
\nheight:20px;
\npadding:0 !important;
\nvisibility:hidden;
\noutline:none;
\n}<\/div>\n

\u0130\u015fte sonu\u00e7.<\/p>\n

\"\"<\/a><\/p>\n

Ve gayet g\u00fczel \u00e7al\u0131\u015f\u0131yor.<\/p>\n

\"\"<\/a><\/p>\n

\u0130yi \u00e7al\u0131\u015fmalar<\/p>\n

Te\u015fekk\u00fcrler.<\/p>\n

Erbu\u011f Kaya<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"

Merhaba, Bu yaz\u0131mda SharePoint 2010 arama kutusunun ve butonunun tasar\u0131m\u0131n\u0131 de\u011fi\u015ftirmeyi anlataca\u011f\u0131m. SP 2010 ilk kuruldu\u011funda arama kutusunun ve butonunun standart g\u00f6r\u00fcn\u00fcm\u00fc alttaki gibidir.<\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[11],"tags":[58],"class_list":["post-1284","post","type-post","status-publish","format-standard","hentry","category-teknik-yazi","tag-sharepoint-2010"],"_links":{"self":[{"href":"http:\/\/erbugkaya.com\/index.php?rest_route=\/wp\/v2\/posts\/1284","targetHints":{"allow":["GET"]}}],"collection":[{"href":"http:\/\/erbugkaya.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/erbugkaya.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/erbugkaya.com\/index.php?rest_route=\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"http:\/\/erbugkaya.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=1284"}],"version-history":[{"count":6,"href":"http:\/\/erbugkaya.com\/index.php?rest_route=\/wp\/v2\/posts\/1284\/revisions"}],"predecessor-version":[{"id":2335,"href":"http:\/\/erbugkaya.com\/index.php?rest_route=\/wp\/v2\/posts\/1284\/revisions\/2335"}],"wp:attachment":[{"href":"http:\/\/erbugkaya.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=1284"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/erbugkaya.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=1284"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/erbugkaya.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=1284"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}