Search & Filter in Widget bar of Responsive theme design

Hey Henrik ??

The plugin is quite simple as it uses standard dom elements and adds almost no styling to them…

The typical structure is something like

<ul>
    <li>[search field]</li>
    <li>[categories]</li>
    <li>[tags]</li>
</ul>

So essentially you need to have knowledge on CSS and how to do responsive coding…

Unfortunately there is nothing built in to this plugin to automatically do this for you – the plugin tries to leave the elements as clean as possible to leave the styling up the developer – which will include responsive stuff.

I do plan on adding “themes” for the S&F widget, but this is far, far down the line :/

If you have a link I could look at I *might* be able to give you some suggestions!

Thanks
Ross

Hi Ross,

Thanks again for this complete assessment.

This is what I figured, I’ve tried the ‘class’ argument in the shortcode but it’s assigned to the form if I’m correct and not on each elements of the form seperated by commas like other arguments.

I didn’t found any exemples using the class argument if I didn’t overlooked your documentation. If you can add some in a near future, that would be great.

F.Y.I. with or without theming your plugin, it has added so much features to my LMS, with no efforts (on my part) that I can’t complain. Responsive CSS will be up to me I’ll figure it out.

here is my dev CMS (LMS)
https://lms.proximit.ca

I hope you like french.

Have a great week end Ross. I’ll drink a cold one for you.

Thanks again.

Henrik

P.S. I’ve disabled the Membership plugin so you can see the content of Cours(Courses) .

Ok

I’ve made my researches and I’ve fixed using:

@media (min-width: 768px) and (max-width: 979px) {
input {width: 100px;}
select  {width: 100px;}
}
@media (min-width: 979px) and (max-width: 1199px) {
input {width: 150px;}
select  {width: 150px;}
}

Perfect glad to hear you got it working ??

I had a quick look at your site to see what you were doing… Here are a couple of suggestions:

You seem to have added styles to the “class” argument so the code looks is broken, I would ignore and remove the class argument as it looks like you do not need it and use something like:

.searchandfilter
{
    width: 100%; padding: 5px 0; text-indent: 5px;"
}

The plugin attaches a css class searchandfilter to the main form element of the plugin so you can easily style the elements inside the plugin by using the searchandfilter class in your CSS.

I would change your responsive code to this:

@media (min-width: 768px) and (max-width: 979px) {
.searchandfilter input {width: 100px;}
.searchandfilter select  {width: 100px;}
}
@media (min-width: 979px) and (max-width: 1199px) {
.searchandfilter input {width: 150px;}
.searchandfilter select  {width: 150px;}
}

This means that all the styling changes you have done on input and select are only applied to the search and filter widget, and do not affect the styling of inputs and selects in the rest of your theme..

Also looks like you might have some extra margin on the left of the widget created by the ul element so I might add:

.searchandfilter ul
{
    margin-left:0;
}

??

Hi Ross,

I knew that my CSS was general and I had to assign it to the form class. This was a quick fix noted as “TO BE FIXED” ??

I’m not a coder but I always find my way when it’s documented somewhere.

Thanks for making my life so EASY! I did some tweaking to the CSS you suggested and the result is great.

Other than being a superhero fixing everybody else’s code out of pure enthusiasm, I can imagine you do this professionally. Are you available for paid consultation every now and then? I got most of my basis covered in this project using plugins but I’m still learning my way with WordPress so…

Send me an email: [email protected]

Just dropped you an email ?? Probably should delete that email address from here if possible!! :/

this is what I get when i put it into a responsive theme (twentytwelve) https://lh4.googleusercontent.com/-nLGhLc4Du48/U2jZOYsDfMI/AAAAAAAAFOY/e8jAW1vdph8/w299-h839-no/Screen+Shot+2014-05-06+at+13.39.24.png

Hey Mark

This plugin is not intended to offer any styling to the search form – so it will likely not automatically work with a responsive theme without some work from a developer.

It is nearly impossible to automate this from within the plugin anyway, as it completely depends on an individual theme and how that is set up – the above were suggestions to hohisse which seemed to have worked for him but will require you to do a little testing.

What might help you is if you place the plugin inside a widget area – try this and see – there is some styling in the CSS that will help with vertical layouts and by default widget areas are vertical areas of a site…

Thanks