CSS for individual search forms

Paul Burton

#7252

Hi,

I am using a widget in the sidebar and everything works perfectly but the client wants another search option in the body of the home page. If I add the shortcode I see the search form but I can’t see any way to customise the layout of that form without affecting all other search forms (e.g. in the sidebar).

So, how can I create a unique form and style it differently to the sidebar form?

Add New Note to this Reply

Ross Moderator

#7255

Hey Paul

Currently you cannot create a completely separate form, but you can style it with CSS.

I just had a look at the code and could have sworn each search form gets its own ID – but they don’t, so to style individual search forms use the following CSS (substituting the ID):

form[data-sf-form-id="824"]
{
    border:1px solid #f00;
}

If of course you are using the same form in different locations you would need to check the DOM and structure of your site.. but in general in WP the homepage has a home class on the body tag so you could target the homepage specifically like:

.home form[data-sf-form-id="824"]
{
     border:1px solid #0f0;
}

And again, depending on your theme, it is common to attach a class to the body tag with page id.. so you could target search forms on specific pages like this:

.page-id-113 form[data-sf-form-id="824"]
{
    border:1px solid #00f;
}

Hope that helps 🙂

Add New Note to this Reply

Paul Burton

#7342

Yeah that kind of helped but I am still struggling…

But maybe I wasn’t explicit enough. I have a unique form (id=6080) and I can manipulate the basic form css but what I want to do is manipulate the two elements in the form. At the moment the dropdown is too short and the button always appears under the dropdown. I would like to increase the width of the dropdown and then position the submit button to the right of the drop down so it is all in one line.

Any edits I attempt using Firebug are affecting the search&filter widget in the sidebar.

Any suggestions?

Add New Note to this Reply

[Author]

Posts