Changing the highlight colour in Concrete5 search block
Permalink
A site I am working on uses a black background colour and white font colour, so when I added the C5 search block and had the results returned I found it hard to see what was highlighted.
In this version 5.4.1.1 of Concrete5 the highlight colour is hard coded into /concrete/blocks/search/controller.php where it outputs the following:
in highlightedMarkup().
To change the colour for my theme I have changed that line to:
As you can see the block still uses the hard coded colour if no CSS styling overwrites it, but it allows me to change the background colour by adding something like this to me CSS:
I do not like editing files in the root concrete folder... What do people think?
Should this be added in an update to allow designers and developers greater controller without adding settings to the functionality?
Can anyone think of a better of achieving the same result without editing files in the /concrete/blocks/search folder?
In this version 5.4.1.1 of Concrete5 the highlight colour is hard coded into /concrete/blocks/search/controller.php where it outputs the following:
$this->hText = @preg_replace( "#$this->hHighlight#i", '<span style="background-color:'. $this->hColor .';">$0</span>', $this->hText );
To change the colour for my theme I have changed that line to:
$this->hText = @preg_replace( "#$this->hHighlight#i", '<span style="background-color:'. $this->hColor .';"><span class="searchHighlight">$0</span></span>', $this->hText );
As you can see the block still uses the hard coded colour if no CSS styling overwrites it, but it allows me to change the background colour by adding something like this to me CSS:
.searchHighlight { background-color: #8E1E83; }
I do not like editing files in the root concrete folder... What do people think?
Should this be added in an update to allow designers and developers greater controller without adding settings to the functionality?
Can anyone think of a better of achieving the same result without editing files in the /concrete/blocks/search folder?
copy to root.
I did it a similar way but is there a better way to do this?
I didn't change any code on my site, which also has a dark background and light text by default. I added the following to my CSS stylesheet to get the text displaying better (no code changes required to Concrete5):
I do that because the current version 5.4.1.1 I have marks the div with the class "searchResult".
Works for me :-)
.searchResult span { color:black; }
I do that because the current version 5.4.1.1 I have marks the div with the class "searchResult".
Works for me :-)
In Concrete 5.6 this has changed and needs to be done slightly differently. Copy the controller.php file to root as usual and change it there as follows:
<?php defined('C5_EXECUTE') or die("Access Denied."); class SearchBlockController extends Concrete5_Controller_Block_Search { public function highlightedMarkup($fulltext, $highlight) { if (!$highlight) { return $fulltext; } $this->hText = $fulltext; $this->hHighlight = str_replace(array('"',"'","""),'',$highlight); // strip the quotes as they mess the regex $this->hText = @preg_replace( "#$this->hHighlight#ui", '<span style="background-color:'. $this->hColor .';"><span class="searchHighlight">$0</span></span>', $this->hText ); return $this->hText; } }
Working now in 5.6.2.1
----
This isn't ideal unless concrete strips tags before posting the results excerpt, but it's good enough for me and is a CSS-only solution.
.searchResult p > span{ background-color: #fff !important; }
Get some solid use of !important.
----
This isn't ideal unless concrete strips tags before posting the results excerpt, but it's good enough for me and is a CSS-only solution.
.searchResult p > span{ background-color: #fff !important; }
Get some solid use of !important.
I actually do it in CSS now as well ... very similar to yours.
Probably a better solution.
Probably a better solution.
This should definitely be in the CSS; it really ought to use the HTML5 <mark> (https://developer.mozilla.org/en-US/docs/Web/HTML/Element/mark... ) too, but getting these pages up to <!DOCTYPE html> and just using shiv for all the old IEs is a whole other issue.
Hard-coding colours in html is undesirable (separation of style and content), but hard-coding a colour in to a controller is absurd.
Hard-coding colours in html is undesirable (separation of style and content), but hard-coding a colour in to a controller is absurd.
Another option is to call this function in a template for this block.
Copy the seach block template into your own blocks template:
/blocks/search/view.php
Then add this line somewhere in the templates php code.
(instead of #46454a you can set your color)
Copy the seach block template into your own blocks template:
/blocks/search/view.php
Then add this line somewhere in the templates php code.
$this->controller->setHighlightColor('#46454a');
(instead of #46454a you can set your color)
