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:
$this->hText = @preg_replace( "#$this->hHighlight#i", '<span style="background-color:'. $this->hColor .';">$0</span>', $this->hText );
in highlightedMarkup().

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?

shadowcomputers
View Replies:
12345j replied on at Permalink Reply
12345j
copy to root.
keeasti replied on at Permalink Reply
keeasti
I did it a similar way but is there a better way to do this?
dmoreitz replied on at Permalink Reply
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):

.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 :-)
keeasti replied on at Permalink Reply
keeasti
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;
   }
}
roketto replied on at Permalink Reply
roketto
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.
keeasti replied on at Permalink Reply
keeasti
I actually do it in CSS now as well ... very similar to yours.
Probably a better solution.
jkoudys replied on at Permalink Reply
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.
furehead replied on at Permalink Reply
furehead
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.
$this->controller->setHighlightColor('#46454a');

(instead of #46454a you can set your color)