Classifieds - Search Form (Classic CMS)


Give your Classifieds feature a stylish, different look!

Please be advised that we are not able to customise or adjust this CSS for you, however the input process is straight forward - please copy and paste the following code at the bottom of the Colours section (at the very bottom of that page):


__________________________________________________________________________________



/*Classifieds - Search Form*/
#classifieds_subheader {
    height: 50px;
    border-top-color: transparent;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-content: flex-start;
    align-items: flex-start;
    padding-top: 10px;
    top: 75px;
    transition: height 0.28s ease 0.035s;
}
ion-view[state="classifieds"] div#classifieds_subheader.bar.bar-subheader.bar-custom.item-input-inset.expanded {
  width: 100%;
  background-color: #efefef;
  opacity: 0.95;
}
ion-view[state="classifieds"] div#classifieds_subheader.bar.bar-subheader.bar-custom.item-input-inset.expanded > label {
  border: 1px #333 solid;
    padding-top: 5px;
    padding-bottom: 5px;
    border-radius: 8px;
}
ion-view[state="classifieds"] div#classifieds_subheader.bar.bar-subheader.bar-custom.item-input-inset.expanded > ion-content {
  margin-top: 60px;
  top: 60px;
}
ion-view[state="classifieds"] div#classifieds_subheader.bar.bar-subheader.bar-custom.item-input-inset.expanded > ion-content div.scroll div div#search_filters > div:nth-child(1) {
  border: none;
    background-color: #efefef;
    text-align: center;
    color: black;
}
ion-view[state="classifieds"] div#classifieds_subheader.bar.bar-subheader.bar-custom.item-input-inset.expanded > ion-content div.scroll div div#search_filters label {
  font-weight: bold;
}
ion-view[state="classifieds"] div#classifieds_subheader.bar.bar-subheader.bar-custom.item-input-inset.expanded > ion-content div.scroll div div#search_filters > div:nth-child(2),
ion-view[state="classifieds"] div#classifieds_subheader.bar.bar-subheader.bar-custom.item-input-inset.expanded > ion-content div.scroll div div#search_filters > div:nth-child(7) {
  border: none;
    background-color: #efefef;
}
ion-view[state="classifieds"] div#classifieds_subheader.bar.bar-subheader.bar-custom.item-input-inset.expanded > ion-content div.scroll div div#search_filters > div:nth-child(2) div.input,
ion-view[state="classifieds"] div#classifieds_subheader.bar.bar-subheader.bar-custom.item-input-inset.expanded > ion-content div.scroll div div#search_filters > div:nth-child(7) div.input {
  margin-top: 10px;
}
ion-view[state="classifieds"] div#classifieds_subheader.bar.bar-subheader.bar-custom.item-input-inset.expanded > ion-content div.scroll div div#search_filters > div:nth-child(2) div.input select#category_select,
ion-view[state="classifieds"] div#classifieds_subheader.bar.bar-subheader.bar-custom.item-input-inset.expanded > ion-content div.scroll div div#search_filters > div:nth-child(7) div.input select {
  min-height: 30px;
    border: 1px #333 solid;
    border-radius: 5px;
}
ion-view[state="classifieds"] div#classifieds_subheader.bar.bar-subheader.bar-custom.item-input-inset.expanded > ion-content div.scroll div div#search_filters > div:nth-child(3),
ion-view[state="classifieds"] div#classifieds_subheader.bar.bar-subheader.bar-custom.item-input-inset.expanded > ion-content div.scroll div div#search_filters > div:nth-child(4),
ion-view[state="classifieds"] div#classifieds_subheader.bar.bar-subheader.bar-custom.item-input-inset.expanded > ion-content div.scroll div div#search_filters > div:nth-child(5) {
  background-color: #efefef;
    border: none;
    border-bottom: 1px #333 solid;
    border-radius: 0px;
    margin: 5px;
}
ion-view[state="classifieds"] div#classifieds_subheader.bar.bar-subheader.bar-custom.item-input-inset.expanded > ion-content div.scroll div div#search_filters > div:nth-child(6) {
  background-color:  #efefef;
    border: none;
}
ion-view[state="classifieds"] div#classifieds_subheader.bar.bar-subheader.bar-custom.item-input-inset.expanded button[type="submit"] {
  width: 90%;
    left: 5%;
    min-height: 40px;
    background-image: linear-gradient(60deg, #009fe3, #009fff);
    color: white;
    font-weight: bold;
    font-size: 16px;
    border: none;
    border-radius: 10px;
  margin-bottom: 30px !important;
  margin-top: 0px;
}
ion-view[state="classifieds"] div#classifieds_subheader.bar.bar-subheader.bar-custom.item-input-inset.expanded {
    width: 100%;
    background-color: #efefef;
    opacity: 0.95;
  top: 27px;
}


__________________________________________________________________________________


NOTES:

Elements in BOLD can be updated.

  1. Colours - you can replace the HEX codes with the required colours. You can use section tags in BOLD see what section CSS element belongs to.
  2. URLs - you can upload your images using Image Uploader within Modules > Image Uploader. Use the generated URLs and replace the current image URLs in BOLD.