As for now the facets are quite hard to theme. All facet links have the .active class, both in already filtered facet blocks (the (-) link to remove the filter) and non filtered blocks (the terms available to filter). If the (-) had its own class, it would be easy to replace it with for example a Delete icon through css. Maybe each facet could be split into three: the (-), the term itself, and the number of items. To separate the number of items from the link also makes the link easier to read.

Comments

drunken monkey’s picture

drunken monkey
he/him
Primary language German
Location Vienna, Austria
CreditAttribution: drunken monkey commented

Seems like a good idea. I'm not that much of a themer so often don't think enough about that sort of thing.
Could you write an appropriate patch for search_api_facets.theme.inc, or at least post how the generated HTML should look like (what elements there should be, and with which classes …)?

JockeL’s picture

JockeL CreditAttribution: JockeL commented

I'm not very familiar with php, nor a theme guru, but I will give the rendered html a try.
li.first/last and a.active classes are already there.
Added classes: facets, facet-title, facet-count, facet-remove, faceted-facet-title, facet-parent.

For the lists of facet links:

<ul class="facets">
<li class="first last">
<a class="active facet-title" href="..url..">Facet title</a>
<span class="facet-count">(15)</span>
</li>
</ul>

The faceted facet:

<ul class="facets">
<li class="first last">
<a class="active facet-remove" href="..url..">(-)</a>
<span class="faceted-facet-title">Facet title</span>
</li>
</ul>

The facet in current search block:

<ul class="facets">
<li class="first last">
<a class="active facet-remove" href="..url..">(-)</a>
<span class="facet-parent">Facet parent</span> » <span class="faceted-facet-title">Facet title</span>
</li>
</ul>
drunken monkey’s picture

drunken monkey
he/him
Primary language German
Location Vienna, Austria
CreditAttribution: drunken monkey commented
Title: Facet classes » CSS classes for facets
Status: Active » Fixed

I prefixed all classes with "search-api" to avoid conflicts and changed "parent" to the more appropriate "field", but other than that I now implemented this.

Thanks again for the suggestions!

Status: Fixed » Closed (fixed)

Automatically closed -- issue fixed for 2 weeks with no activity.

kopeboy’s picture

kopeboy CreditAttribution: kopeboy commented
Version: 7.x-1.x-dev » 7.x-1.13
Issue summary: View changes
Status: Closed (fixed) » Needs review

I am sorry for reopening this, but I don't see any CSS classes on the Current Search Block (using the default one).

Also, Facets have a CSS id, but is of kind:
#facetapi-link--4--checkbox for the single filter value
#facetapi-facet-search-apidefault-node-index-block-type for the ul list (or select element if you are using the addition module - note that there is no space between the two strings, which is bug I guess),

So it will be hard to use those in CSS since I have nowhere to define those names or numbers for my fields and filters (please correct me if Im wrong).

Finally, it would be very useful to define a CSS class for the Facet block, which now has only:

ID: #block-facetapi-pxrznri097pxqmiylfhvzrz1bs1kpb51 = totally unusable
class: .block block-facetapi contextual-links-region = nothing related to the kind of filters/fields that are inside it.

Is there another module or way to do these kind of things if not possible to add the feature inside Facet API core?

drunken monkey’s picture

drunken monkey
he/him
Primary language German
Location Vienna, Austria
CreditAttribution: drunken monkey commented
Status: Needs review » Closed (fixed)

This issue is more than three and a half years old, back then we didn't even use Facet API.
Please open a new issue in the Facet API.