Zoeken
Alle verdere modules zijn geplaatst in de rechter kolom. De modules willen we van elkaar scheiden met een horizontale lijn. De zoekmodule is als bovenste geplaatst in de rechterkolom. Op deze pagina behandelen we ook de pagina zoekresultaten. Ongestijld ziet de module er als volgt uit.
De vereenvoudigde structuur
div.moduletable_search form div.search_search label input#mod-search-searchword.inputbox_search input.button_search
We passen de volgende stijlen toe.
/* ------------------------------------------
Search module moduleclass suffix = _search
--------------------------------------------- */
div.moduletable_search {
padding: 0 0 15px 0;
margin: 0 0 15px 0;
border-bottom: 1px #999 solid;
}
div.moduletable_search form div.search_search label {
display: none;
}
div.moduletable_search form div.search_search input.inputbox_search {
margin: 0 5px 0 0;
width: 125px;
color: #333;
}
div.moduletable_search form div.search_search input.button_search {
padding: 0 4px 1px 0;
}
Na stijling ziet de module er als volgt uit.
Zoekresultaten lijst
De zoekresultaten lijst ziet er ongestijld als volgt uit.
De structuur
divsearch h1 form#searchForm fieldset.word label input#search-searchword.inputbox button.button div.searchintro p strong fieldset.phrases legend div.phrases-box input#searchphraseall label#searchphraseall-lbl input#searchphraseany label#searchphraseany-lbl input#searchphraseexact label#searchphraseexact-lbl div.ordering-box label.ordering select#ordering.inputbox option fieldset.only legend input#area-categories label input#area-contacts label input#area-content label input#area-newsfeeds label input#area-weblinks label div.form-limit label select#limit.inputbox option p.counter dl.search-results dt.result-title a dd.result-category span.small dd.result-text span.highlight dd.result-created
De lijst ziet er ongestijld niet erg overzichtelijk uit. We passen een reeks van stijlen toe.
/* Search results */
div.search form#searchForm fieldset.word {
padding: 15px 0 0 0;
}
div.search form#searchForm fieldset.phrases {
padding: 15px 0 0 0;
}
div.search form#searchForm fieldset.phrases div.ordering-box {
padding: 5px 0 0 0;
}
div.search form#searchForm fieldset.only {
display: none;
}
div.search form#searchForm div.form-limit {
padding: 10px 0 0 0;
}
div.search form#searchForm p.counter {
padding: 5px 0 0 0;
}
div.search dl.search-results dt.result-title {
font-weight: bold;
padding: 15px 0 0 0;
}
div.search dl.search-results dd.result-category span.small {
font-size: 10px;
line-height: 11px;
color: #666;
}
div.search dl.search-results dd.result-text {}
div.search dl.search-results dd.result-text span.highlight {
background-color: #FF0000;
padding: 0 2px 0 2px;
color: #fff;
}
div.search dl.search-results dd.result-created {
font-size: 10px;
line-height: 11px;
color: #666;
}
Na stijling ziet de pagina er als volgt uit.
