CSS Styling

  • Hi,

    Please could someone help me with this css?

    The page is https://www.davidclarke.co.uk/search-box

    The top search form is my current layout and the one below is the example I would like to copy (just the layout not the color scheme). I am trying to put all fields on one line when viewed on a large screen and change the Buy Rent Developments tabs to radio buttons as show in the example. I guess it would also look better if the title of every field was inside the form field boxes to look less cluttered.

    How do I go about this please?

    Thank You!

    Paul

Viewing 3 replies - 1 through 3 (of 3 total)

  • You can use the following as starting:

    .entry {
  clear: both;
}

.entry ul {
  margin: 1em 0 0;
  float: left;
  width: 14%;
}

.entry ul li {
  list-style: square;
  display: block;
  padding: 0;
  margin: 0;
  font-size: 12px;
  line-height: 1.5;
  background: transparent;
}

ul.property_search-tabs li.epl-sb-current {
  color: #222;
  border-bottom: 0;
  margin-bottom: 0;
  background: transparent;
}

.epl-search-forms-wrapper {
  float: right;
  width: 86%;
}

.epl-search-slim .epl-search-row-half,
.epl-search-slim .epl-property_location,
.epl-search-slim .epl-property_category,
.epl-search-slim .epl-search-other {
  width: 14.8%;
}

.epl-search-slim .epl-search-submit-row {
  width: 11%;
  margin-right: 0;
  margin-top: 1.6em;
}

    You should see it like this: https://imgur.com/a/OlwHb

    For radio options, I believe you will need to add those manually and use jQuery to get the values when submitting the form.

    Thread Starter Paul Clarke

    (@paul-clarke)

    Thanks very much Atul,

    That is a great help.

    Thanks again

    Paul

    Thread Starter Paul Clarke

    (@paul-clarke)

    Hi Atul,

    I tested out on a test site and got it working fine, but now I have applied to the live site I have a couple of issues.

    The first is on https://www.davidclarke.co.uk/property-for-sale/ the search box does not go the full width. The page uses a shortcode to display the search box.

    The second property is when a search is run like https://www.davidclarke.co.uk/?action=epl_search&post_type=property&property_status=&property_location=&property_category=&property_price_from=&property_price_to=&property_bedrooms_min=&property_bedrooms_max= the styling is not applied. This version of the search box is displayed by echo in the archive-listing.php

    Please could you tell me how to fix?

    Thank you

    Paul

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘CSS Styling’ is closed to new replies.