Highlight search results

Highlight search results

Paul B

XenForo moderator
Staff member
Brogan submitted a new resource:

Highlight search results - Stop searching for search results

This is a very simple tweak but does help to highlight search results.

Search results use the highlight CSS class, which only has font-weight:bold applied by default.

You can use that class to style the results to make them stand out more.
Simply add this to EXTRA.css for example to make the matched search result text color orange:
Code:
.highlight
{
    color: @secondaryMedium;
}

You can obviously style it to suit.

Before:
View attachment 79019

After:...

Read more about this resource...
 
I doesn't work for me. I tried with this:

Code:
//Highlight search results
.highlight
{
    font-weight: bold;
    color: #FF0000;
}
 
You're missing a 0 from #FF0000.

Rich (BB code):
//Highlight search results
.highlight
{
font-weight: bold;
color: #FF0000;
}
 
I added the missing 0. But still there is no color in the search result. I have this code in extra.css for my current style.
 
It works for me, on a default and custom style.

Perhaps there is something wrong with your EXTRA.css template further up?
Or it could be a style issue.

Adding !important may help.
 
I have UI.X Dark

UI.X Dark (the original theme, not visible for user)
-UI.X Dark changing (here i made all changings, not visible to users)
--Dark (visible to users)
 
If the highlight class isn't applied when using a wildcard then it won't be possible to style the results.
 
Do you think it's worthwhile to make a suggestion in XenForo Suggestions to have the software apply such a class? From a user's perspective I don't see a difference between the need to highlight the whole word or a portion of it as both are equally a search result.
 
There's no reason why you can't suggest it.

If the dev's consider it feasible and worthwhile, they may implement it.
 
Top Bottom