The Carrot2 search-engine has changed both URL and layout. It was at search.carrot2.org/stable/search and it’s now just at the search.carrot2.org URL. I guess the public-facing search may have come out of beta? This is what their new layout looks like…
Not good, on a widescreen desktop monitor.
Which means I’ve made another custom CSS for it. This slices the Carrot into a multi-column layout suited to a widescreen 1920px monitor. It works in the Stylus browser addon, and you need to tell the script to target the search.carrot2.org site
Yum, crunchy Carrot! All the z-depths are set up nicely, so you can still click on/in the filters and search box.
I like to read the URLs in search-results and so I’ve turned them dark green and wrapped them to make this possible. The results look good with URLs that line-wrap by up to three lines. But it’s unavoidable that some very long URLs will wrap over four lines, and will thus spill over the element below.
In most cases there should be no need for any scrolling.
It only works in Day mode, with the Carrot’s new toggle-able Night and Day mode…
If you want a night mode, you’ll have to manually change the colour chips to a charcoal black on…
body, body.light {
and
div.ResultList
The other drawback is that whereas the old multi-column fix showed about 25-30 results, now we’re down to about 16. If you want it up to 20+ add the following code…
.ResultClusters {
display: none;
}
There’s also the lack of a “more…” button, but this usefully forces the user to use the Carrot’s innovative faceting systems over in the left-hand pane.
To install my fix, simply go to Carrot2, then left-click on your icon for the Stylus browser addon and click “Write style for…”.
Then paste in this…
/* ==== CARROT2 - Multi-Columns v.02 Oct 2019 ==== */
/* run this Stylus script on search.carrot2.org */
div.document div.url {
overflow: hidden;
color: #3a7730;
font-size: 110%;
}
body, body.light {
background-color: #ece5db;
}
.ResultList > div > a > span.url {
color: #3f7126;
font-size: 80%;
font-weight: bold;
white-space: pre; /* CSS 2.0 */
white-space: pre-wrap; /* CSS 2.1 */
white-space: pre-line; /* CSS 3.0 */
white-space: -pre-wrap; /* Opera 4-6 */
white-space: -o-pre-wrap; /* Opera 7 */
white-space: -moz-pre-wrap; /* Mozilla */
white-space: -hp-pre-wrap; /* HP Printers */
word-wrap: break-word; /* IE 5+ */
}
a {
font-size: 100%;
}
.SearchForm {
z-index:20;
}
div.ResultList {
z-index:4;
position:absolute;
background-color: #ece5db;
padding-top: 180px;
top:0;
bottom:0;
right:0;
column-count: 5;
width: 70%
}
.ResultList > div > a >div {
font-size: 80%;
}
div.sources {
padding-top: 25px;
}
div.ClusterList {
background-color: #ece5db;
padding-top: 10px;
column-count: 2;
}
div.clusters-tabs {
width: 40%
}
div.clusters {
z-index:4;
width: 50%
}
Tested in Opera, which is a browser that runs on Chrome. It will probably work with other CSS style injectors.
