Customising Search Bar

Backlight 3 Customization
#1

Hi there,

I m using the code below to display a search bar on my home page.

Is there a way I can customise this - make it longer and wider?

<div style="width: 90%;">
    <div style ="text-align:center"><form action="/backlight/search/" method="GET"  class="search-form">
    <p>
        <label><span data-lang="en" class="screen-reader-text">Search for:</span></label>
        <input type="text" id="q" name="q" value=""  placeholder="Enter your search. Use quotes around a phrase">
    </p>

    <button type="submit" class="fa_pseudo">
        <span>Search Albums</span>
    </button>
  </div>
</form>

</div>
#2

you can try targeting form.search-form in custom css

can you include a link?

#3

Yes thanks Rod,

Just on my homepage - https://www.tasmanianphotos.com

This is what I have at the moment.

<style>
form.search-form, form.search-form p, form.search-handoff {
    margin-left: auto;
    margin-right: auto;
}
</style>
#4

You can use the browser inspector to find the the elements that control width.

Just a quick look shows me there are at least two:

form.search-form
and
input#q

you can try adding rules to your custom css using those two selectors, Set the max width the same for both.
I’ve not tested it completely, but I was able to change those widths in the browser inspector and was able to widen the search field.

#5

Thanks Rod. I’ve never used the inspector. Is that in Developer Tools in the Chrome menu?

So are you saying I add max-width to widen the search box? What about making it a bit taller? Would that be changing a font or padding of some sort?

Cheers
Chumby

#6

Yep, the inspector is in Developer Tools. It’s much easier to use if you can right click on an element and choose Inspect. But I think you’ve disabled right-click so you’ll need to dig down through the html.

You can try this in your custom css file (or add it to the styles on the page0:

form.search-form, input#q {
max-width: 600px;
}

You can change the height of the input field but you’d also probably want to change the button or it will look weird. And it will still be one line.

#7

Ok - thanks Rod. I’ve just tried that and it works. Great. Yes I have enabled right-click again.

For the height is it just as simple as (although nothing changed for me):

max-height: 200px;

Also I can see that the button is button.fa_pseudo and is 36x36. How do I define this to be larger?

Appreciate the help.

Cheers,
Chumby

#8

it looks like
form.search-form button controls the width of the button
and
the form button selector uses line-height to control the height

#9

Great. Have changed the button and the box now to look ok

Just need to actually change height of the text as a placeholder in the input box.

Have tried below but nothing changing. Can you see if I am missing something?

<input type="text" id="q" name="q" value=""  style="font-size: large;" placeholder="Enter your search. Use quotes around a phrase">
#10

in the inspector, find the placeholder text. see if there’s any styling controlling it. look for font-size and line-height

Be sure to check to see what it looks like on a phone

#11

Ok thanks, Rod.

Have found

<input type="text" id="q" name="q" value="" placeholder="Enter your search.">

is it looks like “q” or " placeholder is what I need to work around. Will see if I can make something work.

Cheers
Chumby

#12

Just wanted to say thank you for these posts about putting a search box onto pages. I was able to use your example (with a couple of small changes) to get what I wanted for my own site.

Really helpful to have sample code.