Search Results in the Callaway Theme

Viewing 2 posts - 1 through 2 (of 2 total)

Author
Posts
December 3, 2020 at 1:27 pm #31872
Ronald Hines
Guest
Dear support staff, I purchased the Callaway Theme through Inmotion Hosting WP package. They picked it out as being suitable for my needs. I am very comfortable with the Theme other than in two respects. I need an internal search function. To get it I installed Ivory Search on my homepage. It search function works fine. But the results display in a font of about 60px – much too large to display on mobile and even quite large for desktop. Ivory tells me that this is an internal Callaway Theme problem. That how their plugin displays in a theme is controlled by the search.php file of the theme and that they have no control over that. I believe that an internal search function is critical to the success of my website and I do not want the Google internal search option because it displays Ads.
The second problem is that the Ivory Search results display in a rather unpleasant orange that is the default link color for the theme. I was able to change the link colors one-by-one through the BoldGrid text color editing function on over 1000 links. But that has no effect on the font color of the Ivory search results. I could live with that I suppose if there was some way to get font px size down to something reasonable.
Can you help me out?
I have a screen shot but you can just go to my homepage and see the problem
December 3, 2020 at 2:10 pm #31894
Jesse Owens
Keymaster
Hi Ronald-
Sorry to hear about the troubles, we’re happy to help. It sounds like we’re dealing with two main issues- using WordPress’s internal search function, and controlling the appearance of the search results page.
You can of course use Ivory Search if you’re happy with its extra functionality, but WordPress does include the ability to add a search form using a widget. You can include a widget in your Customize > Widgets menu, or by using the search block component in your posts or pages:

The color and font size of your search results can be customized as well. In order to reduce the font size, navigate to Customize > Fonts > Headings and you’ll find a slider control to change the heading size:

The color of your headings can be changed in the Customize > Colors menu, where the heading color will be set by the first color in your palette:

Keep in mind that these two customizer options will apply globally to your site. If you’d just like to change them on the search results page, you can do so with a little bit of Custom CSS in your Customize > Advanced > Custom JS&CSS menu. Paste the following lines into your Custom Theme CSS field and adjust to suit your needs:
```
body.search-results h1, body.search-results h2 {
        /* Affects Search "term" and Search Results */
	color: #000;
	font-size: 26px !important;
} 
body.search-results h2 a {
        /* Affects Search result links */
	color: #555;
	font-size: 20px;
} 
```
- This reply was modified 4 years ago by Jesse Owens. Reason: Update CSS code
Author
Posts