CCS alignment Range Slider

Anonymous

#11220

Hi Ross,

I’m having some trouble with modifying the “Look and feel” from the Range Slider.
I’m still experimenting to build my website on a localhost (with WAMP) so I have to send you some pictures to show you the example I’m struggling with.

I’m using a theme called Flatsome and have installed Woocommerce and your Search-filter-pro plugin.

As seen on the first picture the minimum and maximum numeric fields under the h4 header called “Voor welke prijsklasse?” are aligned underneath each other with as separator an underscore in between.

I did some Photo shopping in picture 2 to let you see how I like the alignment to be.

I did some experimenting in the next CSS files:
<link rel=’stylesheet’ id=’search-filter-chosen-styles-css’ href=’http://localhost/ww/wp-content/plugins/search-filter-pro/public/assets/css/chosen.min.css?ver=1.4.0&#8242; type=’text/css’ media=’all’ />
<link rel=’stylesheet’ id=’search-filter-plugin-styles-css’ href=’http://localhost/ww/wp-content/plugins/search-filter-pro/public/assets/css/search-filter.min.css?ver=1.4.0&#8242; type=’text/css’ media=’all’ />
But I could not find the Class called “meta-range” these items refer to.

Possibly these numeric fields and there CSS is hard baked somewhere in the PHP files but since I’m a novice in PHP, I’m not able to find them.

Can you be so kind to give me some pointers or CSS examples on how I can line up these numeric fields like the example in the second picture?

For the rest your plugin is working great and it does exactly where I’m looking for.
Easy to configure and straight to the point. Good job!

Thanks in advance for your cooperation.

Regards,
Jeroen van Eck

Ross Moderator

#11366

Hey Jeroen

This is the CSS of your theme taking over the CSS from the plugin.

You don’t need to hack in to the plugin to changes styles, you just need to make CSS modifications in your themes stylesheet.

It looks like those fields are being display as position:block, which makes them stack below each other, when to have them all in a row they should be using something like position:inline-block.

This is really a theme issue and requires a little custom CSS to fix – there are many resources on how to style forms etc with CSS – and also how to modify the CSS of your theme.

Thanks

Anonymous

#11633

Hi Ross,

Thanks for the pointers!
Sometimes you need a little push in the right direction to get the result you’re looking for and that is exactly what you did.

I was looking for CSS entries in the theme CSS file that where not specified, but somehow generated by the PHP files. So I decided to write these CSS entries myself and the results are satisfactory as shown on the next picture.

For the ones interested to get a similar result, here some of the entries I found and used to get this. Noted that this is highly depending on the theme you use.

I’m not an expert in CSS and now that there “wizards” out there who can do much better but for me this did the trick.

/* -- search and filter wrapper -- */
.searchandfilter
{
  display: block;
  padding: 40px 0px 0px 55px;
  margin: 0px 0px 25px 0px;
  background: #CDCDCD;
  height: 430px;
  width: 330px;
}

.searchandfilter h4
{
  margin-left: 0px;
}

/* -- search and filter dropdows -- */
.postform
{
  display: inline-block;
  max-width: 220px;
}

/* -- search and filter total range slider -- */
.meta-range 
{
  max-width: 200px !important;
}
  
/* -- search and filter min input field -- */
.range-min
{
	float: left !important;
	margin: 0px 12px 0px 17px !important;
	width: 75px !important;
}

/* -- search and filter max input field -- */
.range-max
{
	float: right !important;
	margin: 0px 0px 50px 0px !important;
	width: 75px !important;
}

/* -- search and filter range slider -- */
.meta-slider
{
	margin: 20px 0px 8px 16px !important;
}	

/* -- search and filter submit button -- */
.sf-field-submit
{
   margin-left: 19px !important;
}

You can note this topic as resolved if you wish.
Once again thanks for the support!

Regards,
Jeroen van Eck

Ross Moderator

#11714

🙂

[Author]

Posts