Joomla zoeken css stijlen

De zoekmachine toont een zoekvenster en een resultatenpagina. De module class suffix is "_zoeken". De zoekmachine module ziet er in de voorbeeld website als volgt uit.

Structuur

Stijlen
We willen de button en het inputveld op één lijn en iets meer marge aan de onderzijde van de module. De stijlen zijn hieronder aangegeven.

div.moduletable_zoeken {
   margin-bottom: 15px;
}

div.search_zoeken { }

div.search_zoeken input.inputbox_zoeken {
   width: 120px;
   height: 17px;
   margin-right: 2px;
   padding: 2px 0 0 2px;
}

div.search_zoeken input.button_zoeken { }

Na stijling ziet de module er tussen de andere modules als volgt uit.

Resultatenpagina 
De resultatenpagina is op meerdere punten aan te passen. Zonder aanvullende stijling ziet de resultatenpagina er als volgt uit.

Structuur 

Stijlen
De stijlmogelijkheden staan hieronder aangegeven.

form#searchForm { }

form#searchForm table.contentpaneopen td {
   padding: 0 0 5px 0;
}

table.contentpaneopen td label { }
table.contentpaneopen td input#search_searchword { }
table.contentpaneopen td button.button { }
table.contentpaneopen input#searchphraseall { }
table.contentpaneopen input#searchphraseany { }
table.contentpaneopen input#searchphraseexact { }
table.contentpaneopen td select#ordering { }
form#searchForm input#area_content { }
form#searchForm input#area_weblinks { }
form#searchForm input#area_contacts { }
form#searchForm input#area_categories { }
form#searchForm input#area_sections { }
form#searchForm input#area_newsfeeds { }
form#searchForm label { }

table.searchintro {
   width: 100%;
}

form#searchForm div { 
   width: 100px;
   margin-bottom: 20px;
}

form#searchForm div div {
   margin: 0;
}

form#searchForm div div label { }
form#searchForm div div select#limit { }

table.contentpaneopen td fieldset {
   border: none;
   margin: 0 0 10px 0;
}

table.contentpaneopen td fieldset div span.small {
   display: block;
   padding: 3px 0 3px 0;
}

table.contentpaneopen td a,
table.contentpaneopen td a:visited { }

table.contentpaneopen td a:hover { }

table.contentpaneopen td fieldset div span.highlight {
   font-weight: bold;
   background-color: #ff0000;
   color: #ffffff;
}

table.contentpaneopen td div span.pagenav { }

Na stijling ziet de pagina er als volgt uit. 

• Toevoegen
• Zoeken

Commentaar (2)

• |91.179.206.xxx |30-04-2010 17:29:19 Clement  - resultaat zoeken als het artikel is opgeleeld in p
  Beste,
  Ik heb 1 artikel op mijn website opgesplits in vijf pagina's (anders veel te lang). Maar als ik dan mijn zoekfunctie gebruik en bij het resultaat zit er materiaal van dat artikel, dan gaat hij enkel naar de 'kop' van het artikel op pagina 1. Wat kan ik doen om de zoekfunctie te laten verwijzen naar de pagina waar de informatie werkelijk staat en niet naar het begin van het artikel ?
  
  Alvast heel erg bedankt voor eventuele hup.
  • 0
  • 0

  Antwoorden

• |81.34.168.xxx |01-05-2010 07:54:13 Rob van Oudheusden  - Opgedeeld artikel
  Dit is een vraag over de functionaliteit van Joomla en niet zozeer over CSS. Wat ik er van weet is dat de zoekfunctie de opgedeelde pagina als één pagina blijft zien en dus leidt het resultaat naar de top van de pagina. Het enige wat ik zou kunnen bedenken is op van de deelpagina's aparte artikelen te maken die naar elkaar linken. Beter kun je de vraag stellen aan het Joomla Forum, die wellicht een andere oplossing kan bieden.
  • 0
  • 0

  Antwoorden

Schrijf commentaar

Uw contact gegevens:

Naam:

Email: geen bericht bij reactiehoud me op de hoogte bij reactie

Website:

Commentaar:

Onderwerp:

Bericht:

Beveiliging

Voer de anti-spam code in die in het plaatje staat.

Powered by !JoomlaComment 4.0 beta2