Forums › Forums › Search & Filter Pro › CSS for individual search forms

Tagged: ,

  • This topic has 2 replies, 2 voices, and was last updated 10 years ago by Anonymous.
Viewing 3 posts - 1 through 3 (of 3 total)
  • Anonymous
    (Private)  November 8, 2014 at 6:02 pm #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?

    Ross Moderator
    (Private)  November 8, 2014 at 7:29 pm #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 🙂

    Anonymous
    (Private)  November 10, 2014 at 4:06 pm #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?

  • Author
    Posts
Viewing 3 posts - 1 through 3 (of 3 total)