ATTENTION, PLEASE READ: New topic creation is disabled, as we have moved to a new support system. Your existing topics will remain, but for all new requests you will need to use the new system. Click here to go to the new support request form.

• Back to forum

  Posted in: Neighborhood
• April 23, 2014 at 12:14 pm #69388
  HYPD

  Member

  Post count: 13

  Hi there,

  How can I change the style of the sorting menu from the default look to the styled look (as shown in these two attachments)?

  April 24, 2014 at 8:24 am #69559
  Kyle – SUPPORT

  Moderator

  Post count: 35880

  Hi

  It’s not easy to style dropdowns, please seE: https://www.google.co.uk/search?q=styling+select+dropdown&oq=styling+select&aqs=chrome.2.69i57j0l5.5741j0j7&sourceid=chrome&es_sm=119&ie=UTF-8

  – Kyle

  April 25, 2014 at 1:53 am #69850
  HYPD

  Member

  Post count: 13

  Hi Kyle,

  The two screenshot of the styled one was taken directly from an older version of Neighborhood. I would think that this style is one that’s built in to the theme already? Correct me if I’m wrong.

  April 25, 2014 at 2:12 am #69851
  HYPD

  Member

  Post count: 13

  This reply has been marked as private.
  April 25, 2014 at 7:55 am #69870
  Kyle – SUPPORT

  Moderator

  Post count: 35880

  Ok let me check with the developer why it was removed, there must be a reason

  – Kyle

  May 1, 2014 at 3:05 am #71357
  HYPD

  Member

  Post count: 13

  Hey Kyle,

  Any word?

  May 1, 2014 at 8:43 am #71395
  Kyle – SUPPORT

  Moderator

  Post count: 35880

  Please try adding this to your custom css:

  .woocommerce .woocommerce-ordering select, .woocommerce-page .woocommerce-ordering select {
  margin: 0;
  padding: 0;
  -webkit-appearance: none;
  -moz-appearance: none;
  text-indent: 0.01px;
  text-overflow: '';
  cursor: pointer;
  -webkit-border-radius: 0;
  -moz-border-radius: 0;
  border-radius: 0;
  padding: 6px 40px 6px 14px;
  height: 42px;
  outline: 0;
  background-image: url('images/[email protected]');
  background-repeat: no-repeat;
  background-position: 90% center;
  background-size: 9px 6px;
  }
  select {
  display: block;
  vertical-align: top;
  z-index: 2;
  border: none;
  outline: none;
  display: inline-block;
  -webkit-appearance: none;
  -moz-appearance: none;
  text-indent: 0.01px;
  text-overflow: '';
  appearance: none;
  cursor: pointer;
  -webkit-border-radius: 0;
  -moz-border-radius: 0;
  border-radius: 0;
  padding: 8px 25px 8px 15px;
  line-height: 110%;
  margin: 0 0 5px;
  background-image: url('images/[email protected]');
  background-repeat: no-repeat;
  background-position: 90% center;
  background-position: calc(100% - 20px) center;
  background-size: 9px 6px;
  }

  You may need to alter the image path for the arrow

  – Kyle

  July 30, 2014 at 10:07 pm #96230
  Holly & Trisha

  Member

  Post count: 54

  so how do you add the arrows?

  July 31, 2014 at 8:10 am #96299
  Kyle – SUPPORT

  Moderator

  Post count: 35880

  Like I said, you may need to alter the image path for the arrows, they are in dante/images, you may need to put your full url plus the path to the images for it to work as our css is in a different location to the original css file

  – Kyle

• Back to forum

  Posted in: Neighborhood