Hi, I hope this is not too basic a question.
I created a Simple Search form usign the Search form and results block.
However, the search block and sort options are sort of “huddled together”, like this:
The relevant html code is the following:
<div id="content" role="main">
<div class="blocks">
<div class="block search-form-block">
<h2>Search form and results</h2>
<form id="search-form">
<input type="text" name="search" value="" placeholder="Cerca">
<button type="submit">Cerca</button>
</form>
</div>
<div class="search-results-block">
<div class="browse-controls">
<form class="sorting" action="">
<select name="sort_by" aria-label="Ordina per">
<option value="created">Creato</option>
<option value="dcterms:date">Data</option>
<option value="dcterms:title">Titolo</option>
</select>
<select name="sort_order" aria-label="Ordina per">
<option value="asc">Crescente</option>
<option value="desc">Decrescente</option>
</select>
<button type="submit">Ordina</button>
</form>
</div>
We have managed to add some vertical space by using the .search-form-block class, which did not appear in the main css, and adding margin-bottom:10%
Unfortunately, there is no way that we can separate the sorting options form each other and from the button in a satisfactory way.
Changes in the classes sorting and browse-control did not display in the console.
We had to go all the way “up” to these css classes and elements
input, textarea, button, .button, select {
margin-right: 10%;
}
but this gave unexpected results.
Is there a way we can space the two sorting options from each other and space this particular sort button, too, but with a different distance?
Thank you,
Francesca V.
It seems to me you’re going in the right direction, but you can get where you want to go by changing your units and making use of CSS specificity in your rules.
Units: When I messed around with your markup in Codepen (not saved because I don’t have an account there), I found that changing each 10% to 1em made for decent spacing.
Specificity: You don’t need to address HTML as high-level as you do. You can pick just the selects in your form by setting a rule to be
.search-form-block #search-form
for addressing the first form, and
.search-form-block input, .search-form-block button
to jointly address the input field and search button in that form.
For the sorting selects, you can use similar combinations of classes and elements, like
.search-results-block select
to address both selects in the second form or
.search-results-block select+select
to address only the second dropdown in the second form.
There’s a lot more to CSS specificity at CSS selectors - CSS: Cascading Style Sheets | MDN, which might be useful in thinking generally about what parts you want to style and how you need to write selectors to address them.
Thank you Triplingual for your answer!
Another of my (many) css worries was that both the searchbox at the upper right hand corner and the main searchbox had the same id ( #search-form).
By combining it woth the specific class, however, I can work only on the relevant searchbox.
I wil check out all the other selectors now.
Have a nice day,
Francesca V.
That other worry, @FrancescaV, is something to pay attention to. The CSS W3C documents state that IDs must be unique. Is one of these search boxes something your team added? If so, you should change its ID.
Hi,
To be honest, we inherited this theme from another institution, so it’s become pretty hard to understand who did what when.
I would say that both searchboxes are part of the “standard” Omeka S website, both the Simple search one which is one of the blocks, and the one at the top.
I will point that out to my colleagues who have more experience and see what can be done.
Thank you again,
Francesca V.
