Help with my theme’s search bar/form

  • Hey there! So I’m currently using the Genesis framework and a child theme called Kindred by https://www.stnsvn.com. The creator does not offer HTML or CSS customization support and I’m at a total blank here: the search bar/form. I’m not sure what the form’s source is: Genesis, the child theme, or Jetpack – but I cannot find the class/selector (not sure of the exact terminology here) in any of the files. I’ve looked in nearly ALL of the files. The selector or class is “search-4” which I’m assuming is the basic search form, but again..I cannot find that anywhere in the files. All I want to do is change the text of the search bar – that’s it! No different colors, sizes, padding, etc – just the text. I know I can do this POSSIBLY in custom CSS but I’m pretty new to coding and cannot for the life of me figure it out. I also cannot find the searchform.php file anywhere either so I don’t think I have that one. My page is https://www.hazygreenroad.com/.

    Thanks in advance for any help!

Viewing 3 replies - 1 through 3 (of 3 total)

  • You can right-click your search field and select the Inspect Element option, a new window will appear displaying the structure of the area you right-clicked, to the right of this structure is the CSS code being applied to the selected structure element.

    You can move around your site by clicking on other elements. You can obtain any CSS class/ID of any element using this method, you can also modify this structure and CSS code on your live site to test/fix things.

    To change the colors of your search field you can add this to your Child Theme style.css file or Custom CSS plugin.

    Here’s an example, just modify the colors to suit:

    .sidebar input[type="search"] {
    color: #f00;
    border-color: #444;
}

    Hope this helps.

    Thread Starter hazygreenroad

    (@hazygreenroad)

    Thank you. That did change the placeholder text color, so I know the identifier works, but I have no idea how to change the actual text. I don’t want it to say “Search this website…” – instead, I want it replaced with either just “SEARCH” or leave it simply blank, but preferably “SEARCH” and styled to use the Montserrat font. As for the changing text, I know this is more of an HTML issue rather than CSS, as I haven’t actually found a way to replace text using CSS other than something similar to:

    ::after {
  content: "New text";
  text-indent: 0;
  display: block;
  line-height: initial; /* New content takes up original line height */
}

    …but with the “.sidebar” identifier, which didn’t work. However, I have no idea where to edit this in the HTML files.

    • This reply was modified 8 years, 2 months ago by hazygreenroad. Reason: Adding code
    Thread Starter hazygreenroad

    (@hazygreenroad)

    Okay I finally got it to work. I found the code to change the text here: https://my.studiopress.com/snippets/search-form/ and then used the code you gave to change the text color. Thanks a ton!

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Help with my theme’s search bar/form’ is closed to new replies.