Hur gör jag mer omfattande grafiska anpassningar av söksidan?
2010-12-07Du kan göra omfattande anpassningar av sökresultatsidan genom att använda stilmallar,CSS. Med hjälp av stilmallar kan du byta färger och typsnitt, dölja delar av sökresultatet eller flytta om element.
För att göra anpassningarna använder du dig av de klasser respektive id:n som är angivna på element i den HTML-kod SiteSeeker skickar. Klassnamn respektive id:n som SiteSeeker använder har prefixen "ess-" respektive "essi-", se exempelvis stilmallen för sökresultatsidan på denna webbplats. (Detta gäller temana Modern kompakt och Modulär.)
Exempel 1: Byt färg på rutan med stavningsförslag så här:
- Börja med att ställa en sökfråga som ger ett stavningsförslag. Spara ned sidan lokalt på din dator, så att du kan modifiera den.
- Öppna den sparade sidan i en HTML- eller text-editor. Leta rätt på rutan för stavningsförslag i sidans källkod.
- Rutan för stavningsförslagen har i temat Modulär klassen ess-spelling.
- Infoga en stilmallsregel i sidan (lägg den inom taggarna
<style type="text/css">…</style>)som appliceras på ovanstående klass. Exempelvis följande:.ess-spelling { background-color: red; border: 5px dotted yellow; color: white; }.Rutan har också ett stort frågetecken i sig, detta har klassen ess-qmark. Byt färg på detta med följande regel: .ess-spelling .ess-qmark { color: yellow!important; } ("!important" behövs för att överlagra värden angivna i SiteSeekers stilmall). - Ovanstående regler måste naturligtvis anpassas efter respektive element. Om du inte får de resultat du önskar, kontrollera om regeln krockar med någon regel i den stilmall SiteSeeker definierar eller de stilmallar som kan vara inlänkade från din webbplats.
- Slutligen infogar du stilmallsreglerna antingen i mallen för söksidan (denna ändar du i Admin) eller i de stilmallar du länkar in från din webbplats.
Exempel 2: Dölj en viss kategorigrupp i kategoriöversikten i temat Modulär genom att införa #essi-bd-cg-kategorigruppsnamn { display: none; } i stilmallen. Notera att kategorigruppsnamnet måste skrivas på en normaliserad form där stora bokstäver blir små, mellanslag blir _, å och ä blir a, ö blir o, och alla övriga tecken som inte är a-z, 0-9 eller - tas bort.
Exempel 3: Ta bort texten "sök efter" i temat Modulär med regeln #essi-query-block label { display:none; }.
Exempel 4: Sätt bredden på sökfrågefältet och ändra attribut för att knappen ska hamna bredvid i temat Modulär med reglerna #essi-search-button { display:inline; float:none; } och #essi-queryfield { width: 80px; display: inline; }.
