"Search Results" Header color

Hi,

Heading color in Theme Options > Typography seems to control the color of the Page Header and the “Search Results” Header (but not the Post Header.)

Because the “Search Results” Header appears on the background image I am using (as opposed to the “Page” Header, which appears on a white background) I am wondering how I can change the “Search Results” Header color without affecting the Page Headers. (I want the Page Header to be black, but the Search Results Header to be white.)

Can you advise?

Thanks.

Hi Delali,

If you wish to change the appearance of the search results page, where it says "Search results for: ", you need to modify some code which would be of course very easy. It is advised to do this via child theme because if you will modify the code inside the Sparkling theme, the changes will be lost after next update.

Option A: If you’re using a child theme for Sparkling.

  1. Copy search.php from “sparkling” to “sparkling-child”.
  2. Open search.php for editing, go to Line No. 16 where it says <h1 class="page-title">
  3. Replace it with something like <h1 class="search-title">
  4. Save the file and exit the editor.

Now go to WordPress Admin > Appearance > theme options > other

Paste the following code in the custom CSS column:

.search-title {
  color: #fff;
}

Option B: If you’re not using a child theme for Sparkling.

  1. Open search.php inside “sparkling” theme folder for editing, go to Line No. 16 where it says <h1 class=“page-title”>
  2. Replace it with something like <h1 class="search-title">
  3. Save the file and exit the editor.

Now go to WordPress Admin > Appearance > theme options > other

Paste the following code in the custom CSS column:

.search-title {
  color: #fff;
}

Click on save options and preview the results page. This should do the job. Let us know if any further help is required.

Thank you, @Amit. I am using the Sparkling Child Theme, but and have made several successful modifications. But I don’t understand how to do this step:

Copy search.php from “sparkling” to “sparkling-child”.

In Wordpress, the only option seems to be to copy the search.php code from “sparkling” to “sparkling-child.”

But I gather you’re suggesting something else. Do I need to do something via my FTP on the server? I have searched the WP forums on this, but am still unclear on how to execute this.

Many thanks.

Hi once again Delali!

Your assumption is right, you will need FTP access to your website. Once you’re logged in via FTP, all you need to do is copy “search.php” from “sparkling” parent theme folder to “sparkling-child” child theme folder and then make the above mentioned changes there.

-Or-

You can also create “search.php” file inside the “sparkling-child” folder, copy all the contents inside the search.php file from parent theme and paste it in search.php file inside child theme folder. That is also one and the same thing.

This is how the child theme works. You can download a copy of the file you want to modify (from parent theme) onto your computer, make the changes, and then upload the file into your child theme folder. Any files that are uploaded to the child theme automatically override those in the parent theme as anything in the child takes priority over the parent. So if the same file is in the child and in parent, the file in the child theme will take priority. This is called future proof customization because whenever there is a new update release, the update only applies to parent theme and the child theme remains untouched during the update.

I hope now you have a clear idea on what needs to be done. Still if you feel like asking anymore questions, you are most welcome to do so. Let us know if you’re having any difficulties.

@Amit,

Thank you very much for taking the time to explain this. It is incredibly helpful — and it worked perfectly (I chose the first option.)

I’m loving the theme and appreciate the support here.