Wie Ihr sehen könnt, habe ich mein Blog um eine Suchfunktion erweitert. Ich wollte dass die Suche vom Aussehen her, der von Mac OS X Programmen wie z.B. Safari ähnelt. Dies zu erreichen ist gar nicht so schwer. Zum Einen muss in die searchform.php im jeweiligen Template angepasst werden (zu finden im WordPress Verzeichnis unter wp_content/themes/
Des Weiteren müssen ans Ende der style.css Datei, welche sich im gleichen Verzeichnis befindet folgende Zeilen Code:
#searchform {
margin: 10px auto;
padding: 5px 3px;
text-align: center;
}
#searchform .left{
background: transparent url(images/search_left.png) no-repeat;
height: 19px;
width: 20px;
display: block;
position: absolute;
}
#searchform .right{
background: transparent url(images/search_right.png) no-repeat;
height: 19px;
width: 10px;
display: block;
margin-left:118px;
margin-top:-22px;
}
#searchform input{
width: 100px;
position: relative;
margin-left: -8px;
border:0;
padding-top: 2px;
height: 19px;
font-size: 11px;
background: transparent url(images/search_repeat.png) repeat-x center top;
}
#searchform input:focus{
border: 0;
outline: none;
}
Am Schluss müssen noch die benötigten Bilder in den images Ordner des Templates: Bilder für die Suche als ZIP Datei.
UPDATE: Das CSS funktioniert im Internet Explorer nicht sauber. Hier der Post mit dem funktionierendem CSS.
Schreibe einen Kommentar